.archive_stock_car{
  padding: 2rem 3.5rem 18rem;
  font-family: var(--NotoSerif);
  /* font-family: "Noto Serif"; */
}

.car_search_inner{
  background-color: #fcfcfc;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem 5.9rem;
  padding: 2.1rem 0 2.4rem 19.7rem;
  width: 100%;
  height: fit-content;
}

.search_selecter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  height: fit-content;
  color: black;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: calc(27em/20);
}

.search_selecter label {
  width: 16.3rem;
  font-weight: 500;
}

/* .search_selecter:nth-child(2) label {
  width: 13.3rem;
} */

.search_selecter select {
  background: white;
  padding: .4rem 1rem;
  width: 23rem;
  height: 3.5rem;
  border-radius: .3rem;
  border: solid .1rem black;
}

.selector_inner{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  width: fit-content;
  font-size: 2rem;
}

.select_outer{
  position: relative;
  width: fit-content;
  height: fit-content;
}

.select_outer::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 2rem;
  width: 1.5rem;
  height: 1.3rem;
  background-color: black;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.search_button{
  margin: 3.5rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 39/6;
  width: 39rem;
  background-color: #303C5D;
  color: white;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .15em;
  line-height:1em;
}

.archive_annotation {
  font-size: 1.2rem;
  font-weight: 400;
  padding: 2rem 0 0 19.7rem;
}


.stock_car_contents{
  margin-top: 7.2rem;
  width: 100%;
}

.stock_car_counter{
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1em;
}

.stock_car_counter .red{
  font-size: 2.5rem;
  color: var(--red);
}

.contents_inner{
  margin-top: 2rem;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  gap: 2.6rem;
}

.stock_car_content{
  padding: 1rem;
  width: 28rem;
  /* background-color: #FAFAF6; */
}

.stock_car_name{
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: calc(25em/20);
}

.stock_car_image{
  margin-top: 1.6rem;
  aspect-ratio: 26/15;
  width: 26rem;
  overflow: hidden;
}

.car_content_inner{
  margin-top: 1.5rem;
  padding: 2rem 1rem;
  width: 100%;
  height: fit-content;
  background-color: white;
  border: solid .1rem black;
  text-align: center;
  word-break: break-all;
}

.total_amount_payable{
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: calc(25/20);
}

.the_pay{
  margin-top: .4rem;
  color: var(--red);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: calc(25/20);
}

.bace_price,
.other_text{
  margin-top: .5rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: calc(25/16);
}

.other_price{
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: calc(25/16);
}

.red_box{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red);
  width: 100%;
  height: 2.5rem;
  color: white;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: calc(25/16);
}

.red_box.model_year{
  position: relative;
  margin-top: 3rem;
}

.red_box.model_year::before{
  content: "";
  position: absolute;
  left: 0;
  top: -1.5rem;
  width: 100%;
  height: 0;
  border-bottom: solid .05rem black;
}

.red_box.running{
  margin-top: 1rem;
}

.stock_details{
  margin-top: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5rem;
  background-color: #303C5D;
  color: white;
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .15rem;
  line-height: 1em;
}

.navigations_outer {
  margin: 8rem auto 0;
  max-width: 34.6rem;
  width: fit-content;
}

.nav-links{
  display: flex;
  justify-content: start;
  align-content: center;
  gap: 2rem;
}

.page-numbers{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  width: 5rem;
  border-radius: 50%;
  border: solid .1rem black;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .15rem;
  line-height: 1em;
  flex-shrink: 0;
}

.page-numbers.current{
  background-color: #FFC134;
}

.page-numbers.next,
.page-numbers.prev{
  display: none;
}

.page-numbers.dots{
  padding-top: 2.5rem;
  margin: 0 -2.7rem 0;
  border: unset;  
}


/* debug */
/* header{
  display: none;
} */
/* debug */

@media screen and (max-width: 699.98px) {
  .archive_stock_car {
    padding: 2rem 0 15rem;
  }

  .car_search_inner {
    gap: 3rem;
    padding: 1rem 2rem;
  }

  .search_selecter {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    width: 100%;
  }
  
  .search_selecter select {
    width: 100%;
  }

  .selector_inner {
    gap: 0;
    justify-content: space-between;
    width: 100%;
  }

  .select_outer{
    width: 100%;
  }

  .selector_inner .select_outer{
    width: 15.3rem;
  }

  .select_outer::after{
    right: 1rem;
  }

  .search_button {
    margin: 1rem auto 0;
    aspect-ratio: 335/50;
    width: 33.5rem;
    font-size: 1.6rem;
    letter-spacing: .15em;
    line-height: 1em;
  }

  .archive_annotation {
    font-size: 1.2rem;
    font-weight: 400;
    padding: 2rem 2rem 0 2rem;
  }


  .stock_car_contents {
    margin-top: 4.3rem;
  }

  .stock_car_counter{
    text-align: center;
    line-height: calc(27em/20);
  }

  .contents_inner {
    margin-top: 2.2rem;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
  }

  .stock_car_content {
    width: 35.5rem;
  }


  .stock_car_image {
    aspect-ratio: 335/200;
    width: 100%;
  }

  .car_content_inner {
    padding: 2rem 1.7rem;
  }

  .bace_price,
  .other_text {
    margin-top: .5rem;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: calc(25/16);
  }

  .red_box.model_year {
    margin-top: 2.5rem;
  }
  
  .red_box.running{
    margin-top: .6rem;
  }

  .navigations_outer{
    margin-top: 4rem;
  }
}