@charset "UTF-8";

.search-heading {
  color: #735b51;
  font-size: 3rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  margin: 0 10px 20px;
  font-weight: normal;
}
@media (min-width: 600px) {
  .search-heading {
    font-size: 4rem;
    margin: 0 auto 60px;
  }
}
.search-heading .title--sub {
  color: #735b51;
  font-size: 1.2rem;
  display: block;
}
@media (min-width: 600px) {
  .search-heading .title--sub {
    font-size: 2rem;
  }
}

/*-------------------- 特集から探す --------------------*/
.feature {
  margin-top: 60px;
  margin-bottom: 10px;
}
@media (min-width: 600px) {
  .feature {
    margin-top: 200px;
  }
}
.feature::before {
  z-index: -1;
}
.feature .title {
  min-height: auto;
}
.feature-list {
  max-width: 850px;
  /* margin: 0 20px; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 600px) {
  .feature-list {
    gap: 50px;
    margin: 0 auto;
  }
}
.feature-text {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  display: block;
  margin: 0px 0 0;
  font-weight: normal;
  letter-spacing: 1px;
}
@media (min-width: 600px) {
  .feature-text {
    font-size: 2rem;
    margin: 0px 0 0;
  }
}
.banner_mg {
  max-width: 780px;
  margin: 0 auto 80px;
}

/*-------------------- カテゴリから探す --------------------*/
.category {
  margin: 0 0 60px;
  padding-top: 100px;
}
@media (min-width: 600px) {
  .category {
    margin: 0 0 150px;
    padding-top: 300px;
  }
}

.table__wrap {
  max-width: 1160px;
  max-width: 780px;
  margin: 0 20px 20px;
  padding: 10px 20px;
  background: #FFFFFF;
  border-radius: 10px;
}
@media (min-width: 600px) {
  .table__wrap {
    margin: 0 auto 100px;
    padding: 20px 50px;
  }
}

.table-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 1px;
  max-width: 1160px;
  background: #735b51;
}
@media (min-width: 600px) {
  .table-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.table-list a {
  color: #735b51;
  background: #FFFFFF;
  display: block;
  text-align: center;
  padding: 15px 0;
  position: relative;
  font-family: "Noto Sans JP", 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  letter-spacing: 1px;
}
@media (min-width: 600px) {
  .table-list a {
    font-size: 2rem;
    font-size: 1.6rem;
    padding: 30px 0;
  }
}
.table-list a:hover {
  opacity: .9;
}
.table-list a::after {
  content: "";
  display: block;
  width: 1px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #735b51;
}
@media (min-width: 600px) {
  .table-list a::after {
    height: 70px;
  }
}

@media (max-width: 599px) {
  .table-list li:nth-of-type(2n) a::after {
    display: none;
  }
}
@media (min-width: 600px) {
  .category-list li:nth-of-type(4n) a::after {
    display: none;
  }
}

/*-------------------- 価格から探す --------------------*/
.price {
  margin-bottom: 60px;
}
@media (min-width: 600px) {
  .price {
    margin-bottom: 150px;
  }
}
.price::before {
  z-index: -1;
}
.price .title {
  min-height: auto;
}
@media (min-width: 600px) {
  .price-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 600px) {
  .price-list li:nth-of-type(2n) a::after {
    display: none;
  }
}


/*-------------------- SNS --------------------*/
.follow {
  margin-bottom: 60px;
}
@media (min-width: 600px) {
  .follow {
    margin-bottom: 150px;
  }
}
.follow .title {
  min-height: auto;
}
.follow-list { /*follow-list*/
  display: flex;
  justify-content: center;
}
.follow-list li {
  width: 50px;
}
@media (min-width: 600px) {
  .follow-list li {
    width: 100px;
  }
}
.follow-list li:not(:last-child) {
  margin-right: 10px;
}
@media (min-width: 600px) {
  .follow-list li:not(:last-child) {
    margin-right: 30px;
  }
}

/*-------------------- HOME・PAGETOP --------------------*/
.back-btn {
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 60px 30px;
}
@media (min-width: 600px) {
  .back-btn {
    gap: 40px;
    margin: 200px auto;
  }
}
.back-btn a {
  display: block;
  line-height: 0;
  background: #FFFFFF;
  padding: 10px 20px;
  border-radius: 100vh;
}
.back-btn a:hover {
  background: #FFFFFF;
}
@media (min-width: 600px) {
  .back-btn a {
    padding: 25px 50px;
  }
}