@charset "utf-8";

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

  .luck_call_points {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  main {
    width: auto;
    margin: 0 auto;
    padding: 30px 0;
  }
  .counselor_title {
    padding: 1.5rem;
    width: 95%;
  }
  .counselor_name {
    font-size: 4rem;
    line-height: 3rem;
  }
  .counselor_rate {
    margin-top: 2rem;
    font-size: 3rem;
    line-height: 3rem;
  }
  .counselor_desc {
    width: 90%;
    margin-top: 1.5rem;
    font-size: 2.75rem;
    line-height: 3.25rem;
  }
  .section_title {
    margin-top: 3rem;
    font-size: 3.5rem;
    line-height: 4.5rem;
    padding: 1.25rem;
  }
  .call_status {
    width: 60vw;
    height: 60vw;
  }
  .call_status_img {
    width: 50vw;
  }
  .call_status_msg {
    font-size: 3rem;
    line-height: 3rem;
    text-align: center;
  }
  .call_status_desc {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  .luck_call_points {
    margin-top: 0;
    font-size: 3.5rem;
    line-height: 4rem;
  }
  .reach_mail_limit_count {
    font-size: 3.5rem;
    line-height: 4rem;
  }

  .call_attension_title {
    font-size: 3.5rem;
    line-height: 4.5rem;
    padding: 1.25rem;
  }
  .call_attension,
  .biko_attention,
  .status_list > li {
    font-size: 3rem;
    line-height: 3rem;
  }

  .status_list > li {
    margin-top: 3vw;
  }
  .consul_reservation_msg {
    margin-top: 2.5rem;
    font-size: 3rem;
    line-height: 3rem;
  }
  .reservation_wrapper {
    margin-top: 2.5rem;
    font-size: 2.5rem;
    line-height: 3rem;
    padding: 1rem 0;
  }
  .reservation_attension,
  .biko_title {
    margin-top: 3rem;
    font-size: 3rem;
    line-height: 3rem;
  }
  .biko_class {
    margin-top: 1.25rem;
    height: 15rem;
  }
  .reservation_confirm {
    font-size: 4rem;
    padding: 1rem;
  }
  .call_reservation_form {
    padding: 2rem 1rem;
  }
  .link_to_call_reservation {
    font-size: 3rem;
    line-height: 3rem;
    margin-top: 2.5rem;
  }
  .call_reservation_attension {
    margin-top: 2.5rem;
    font-size: 3rem;
    line-height: 3.5rem;
  }
  .call_history_list_wrapper {
    width: 100%;
  }
  .call_reservation_list_wrapper {
    width: 100%;
  }
  .call_history_table,
  .call_reservation_table,
  .consul_mail_history_list {
    width: 100%;
  }

  .call_reservation_table {
    margin: 0;
    margin-top: 9rem;
    width: 100%;
  }
  .call_history_table th,
  .call_reservation_table th {
    font-size: 3rem;
    line-height: 3rem;
    padding: 1rem;
  }

  .call_history_table th,
  .call_history_table td {
    font-size: 3rem;
    line-height: 3rem;
    padding: 1rem;
  }
  .call_reservation_table td {
    font-size: 3rem;
    line-height: 3rem;
    padding: 1rem;
  }
  .call_reservation_table .td_status {
    font-size: 6rem;
    line-height: 6rem;
    padding: 0;
  }
  .call_reservation_table .td_status> a,
  .call_reservation_table .td_status> span {
    display: block;
    transform: translateY(0.75rem);
    width: auto;
    height: auto;
    padding: 0;
  }
  .datetime_header {
    width: 20rem;
  }
  .disp_status_desc {
    font-size: 3rem;
    line-height: 3rem;
  }
  .status_desc {
    margin-top: 2rem;
    font-size: 3rem;
    line-height: 3rem;
  }
  .consul_title,
  .consul_contents {
    font-size: 3rem;
    line-height: 3rem;
  }
  .input_consul_title {
    font-size: 4rem;
    line-height: 4rem;
  }
  .input_consul_contents {
    font-size: 4rem;
    line-height: 4rem;
    height: 40rem;
  }
  .attachment_image_title {
    margin-top: 3rem;
    font-size: 3rem;
    line-height: 3rem;
  }
  .mail_form_submit {
    margin-top: 3rem;
    font-size: 4.5rem;
    line-height: 4.5rem;
    padding: 1.25rem;
  }
  .mail_send_attension {
    margin-top: 2.5rem;
    font-size: 3rem;
    line-height: 3rem;
  }
  .consul_mail_history_card {
    margin-top: 3rem;
  }
  .consul_mail_title {
    font-size: 3rem;
    line-height: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .card_right_part {
    width: 20rem;
  }
  .mail_status_icon {
    font-size: 3rem;
    line-height: 3rem;
    padding: 0.75rem;
  }
  .mail_sent_date {
    font-size: 3rem;
    line-height: 3rem;
    margin-top: 2rem;
  }
  .mail_sent_time {
    font-size: 3rem;
    line-height: 3rem;
  }
  .pagination {
    margin-top: 2.5rem;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: 1.5rem;
  }
  .table_wrapper {
    width: 100%;
    height: auto;
    overflow-x: scroll;
    white-space: nowrap;
  }
  .table_wrapper::-webkit-scrollbar {
    height: 10px;
  }
  .table_wrapper::-webkit-scrollbar-track {
    margin: 0 2px;
    border-radius: 5px;
    background: #ccc;
  }
  .table_wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #666;
  }

  .call_reservation_table {
    width: 100vw;
  }
  .tbcol_datetime {
    width: 21rem;
  }
  .tbcol_consul_time {
    width: 18rem;
  }
  .tbcol_counselor {
    width: auto;
  }
  .tbcol_pt {
    width: auto;
  }
  .tbcol_status {
    width: 8rem;
  }
  .tbcol_comment {
    width: 20rem;
  }

  .disable_mail_form {
    font-size: 2rem;
    line-height: 3rem;
    padding-top: 2rem;
  }
  .call_status_btn_desc,
  .call_status_msg {
      font-size: 2.5rem;
      line-height: 2.5rem;
  }
  form[name="status_form"] {
    padding: 15rem 15rem 0 15rem;
  }
  .status_03_alert_wrapper {
    background-color: #3cd5af;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .status_03_alert {
    font-size: 2.75rem;
    line-height: 4rem;
  }
  #link_for_direct_call:active {
    transform: translateY(5rem);
  }  
  .blank-msg {
    font-size: 3.5rem;
    line-height: 4rem;
  }
}