@charset "UTF-8";

/* -----------------------------
	低ダストブレーキパッド
----------------------------- */
.brakepad {
  position: absolute;
  overflow-x: hidden;
  color: #fff;
  background: url(../img/brakepad/bg.webp) center center / 182.133333333vw repeat-y;
}
@media screen and (min-width: 768px) {
  .brakepad {
    background: url(../img/brakepad/bg.webp) center center / 1366px repeat-y,
                linear-gradient(90deg,#000 0%, #000 50%, #c89015 50%, #c89015 100%);
  }
}
.conetent-header {
  display: grid;
  aspect-ratio: 750/490;
}
@media screen and (min-width: 768px) {
  .conetent-header {
    height: 478px;
    aspect-ratio: unset;
  }
}
.conetent-header__image {
  place-self: center;
  width: 63.7333333333333%;
  line-height: 0;
}
@media screen and (min-width: 768px) {
  .conetent-header__image {
    width: 478px;
  }
}

/* about */
.about {
  padding-block: 3em;
  background: rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 768px) {
  .about {
    padding-block: 5.5em;
  }
}
p.about__lead {
  margin-block: 0 2em;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media screen and (min-width: 768px) {
  p.about__lead {
    font-size: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .about__images {
    display: flex;
    width: 100%;
    margin-bottom: 4em;
  }
}
.about__image {
  display: flex;
  flex-direction: column-reverse;
}
@media screen and (min-width: 768px) {
  .about__image {
    width: 33.33%;
    margin: 0;
  }
}
.about__image figcaption {
  display: grid;
  place-content: center;
  min-height: 51px;
  padding: 0.5em;
  background: #65490a;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .about__image figcaption {
    min-height: 56px;
    font-size: min(1.5vw, 1.6rem);
  }
  .about__image:nth-child(2) figcaption {
    background: #523b07;
  }
}
.about__image figcaption span {
  font-size: 1.1rem;
  font-weight: normal;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .about__image figcaption span {
    font-size: min(1.2vw, 1.2rem); 
  }
}

/* product */
.product {
  margin-bottom: 4em;
}
@media screen and (min-width: 768px) {
.product {
  margin-bottom: 6em;
}
}
.product__title {
  position: relative;
  margin-block: 2.5em 1em;
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  text-align: center;
}
/*
.product__title::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: #fff;
  opacity: 0.2;
}
*/
@media screen and (min-width: 768px) {
  .product__title {
    font-size: 4.8rem;
  }
  .product__title::before {
    left: 0;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .product-table-wrap {
    margin-right: -12.3%;
    overflow: scroll;
  }
  .product-table {
    margin-right: 9.87vw;
  }
}
.product-table thead tr {
  background: rgba(255, 255, 255, 0.1);
}
.product-table tbody tr {
  background: rgba(89, 87, 25, 0.25);
}
.product-table tbody tr:nth-child(4n),
.product-table tbody tr:nth-child(4n-1) {
  background: rgba(87, 71, 2, 0.5);
}
.product-table thead th {
  text-align: center;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .product-table thead th {
    font-size: 2.2rem;
    white-space: unset;
  }
}
.product-table tbody td {
  font-size: 1.2rem;
  padding: 0 10px;
  white-space: nowrap;
}
.product-table tbody td:empty::before {
  content: '';
  display: block;
  height: 1.85em;
}
@media screen and (min-width: 768px) {
  .product-table tbody td {
    font-size: 1.8rem;
    white-space: unset;
  }
}
.product-table .car_model {
  text-align: left;
}
ul.note {
  padding: 0;
  list-style: none;
  font-size: 1.2rem;
}

/* inquiry */
.inquiry {
  margin-top: 4em;
  padding-block: 28px;
  color: #473308;
  background: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .inquiry {
    margin-top: 6em;
    padding-block: 48px;
  }
  .inquiry .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 1em;
         column-gap: 1em;
  }
}
.inquiry__title {
  margin-bottom: 0.4em;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .inquiry__title {
    width: 100%;
    margin-bottom: 0.5em;
    font-size: 3rem;
  }
}
.inquiry__tel {
  margin-block: 0;
  font-size: 3.9rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
}
.inquiry__tel a {
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .inquiry__tel {
    width: 100%;
    font-size: 6rem;
  }
}
@media screen and (min-width: 900px) {
  .inquiry__tel {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.inquiry__text {
  margin-block: 0.4em 0;
  padding: 0.4em;
  background: rgba(175, 173, 144, 0.6);
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.inquiry__text br {
  display: none;
}
@media screen and (min-width: 768px) {
  .inquiry__text {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 10px 20px;
    font-size: 1.8rem;
    text-align: left;
    line-height: 1.3;
  }
}
@media screen and (min-width: 900px) {
  .inquiry__text br {
    display: block;
  }
}