@charset "utf-8";

@media (max-width: 960px) {
  main {
    width: 100%;
  }

  .introduction_name {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
  .tel_rate,
  .mail_rate {
    font-size: 1rem;
    line-height: 1rem;
  }
  .tel_rate::before,
  .mail_rate::before {
    width: 1rem;
    height: 1rem;
    background-size: cover;
  }
  .satisfaction_level {
    font-size: 1rem;
    line-height: 1rem;
  }
}

@media (max-width: 768px) {
  .section_title {
    font-size: 4.5rem;
    line-height: 4.5rem;
    padding: 0.5rem;
  }
  .search_keyword {
    margin-top: 1rem;
    font-size: 3.5rem;
    line-height: 3.5rem;
    height: auto;
  }
  .search_button {
    margin-top: 1rem;
    height: 5rem;
    font-size: 3.5rem;
  }
  .search_btn_img {
    width: 5rem;
    height: 5rem;
  }
  .submit_genre {
    font-size: 3rem;
    line-height: 3rem;
  }
  .introduction_card {
    padding: 18px 0;
    margin-bottom: 10px;
  }

  .introduction_img {
    width: 100%;
  }
  .introduction_description {
    padding: 0.25rem;
  }
  .introduction_name {
    font-size: 3rem;
    line-height: 3rem;
  }
  .tel_rate,
  .mail_rate {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
  .tel_rate::before,
  .mail_rate::before {
    width: 2.5rem;
    height: 2.5rem;
    background-size: cover;
  }
  .satisfaction_level {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
  .star_img {
    width: 12.5px;
    height: 12.5px;
    transform: translateY(-1.2px);
  }
  .intro_link_common_white:nth-of-type(n + 2) {
    margin-top: 8px;
  }

  .intro_link_common_white {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }

  .intro_link_common_white::before {
    width: 2.5rem;
    height: 2.5rem;
  }
  .intro_link_common_sp_window:nth-of-type(n + 2) {
    margin-top: 8px;
  }
  .intro_link_common_sp_window::before {
    width: 2.5rem;
  }
  .pagination {
    margin-top: 2.5rem;
    font-size: 3.5rem;
    line-height: 3.5rem;
    letter-spacing: 2rem;
  }
  .counselor_genre:active {
    color: #ffffff;
    border: 1px solid #ffffff;
    background-color: #3cd5af;
  }
  .diviner_genre:active {
    color: #ffffff;
    border: 1px solid #ffffff;
    background-color: #c59ee2;
  }
  .tel_link,
  .mail_link {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
  .tel_link::before,
  .mail_link::before {
    width: 2.5rem;
    height: 2.5rem;
  }
}