@charset "utf-8";

main {
  color: #333333;
  background-color: #ffffff;
  width: 960px;
  margin: 30px auto;
}

.white {
  color: #ffffff;
}
.bold {
  font-weight: bold;
}
.bgcolor_a6a6a6 {
  background-color: #a6a6a6;
}
.bgcolor_3cd5af {
  background-color: #3cd5af;
}
.bgcolor_c59ee2 {
  background-color: #c59ee2;
}
.bgcolor_0091c4 {
  background-color: #0091c4;
}
.bgcolor_ff5b5b {
  background-color: #ff5b5b;
}

.color_a6a6a6 {
  color: #a6a6a6;
}
.color_3cd5af {
  color: #3cd5af;
}
.color_red {
  color: red;
}
.color_c59ee2 {
  color: #c59ee2;
}

.bgcolor_45cc82 {
  background-color: #45cc82;
}
.bgcolor_ff9999 {
  background-color: #ff9999;
}
.yellow {
  color: #ffc000;
}

/********************************************************************************/
.counselor_color {
    color: #ffffff;
    background-color: #3cd5af;
}
.diviner_color {
    color: #ffffff;
    background-color: #c59ee2;
}
.sp_window_color {
    color: #ed7d31;
    background-color: #fff97d;
}
.counselor_img {
  display: block;
  width: 90%;
  margin: 0 auto;
}
.counselor_title {
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 1rem;
  line-height: 2rem;
}
.counselor_desc {
  width: 85%;
  margin: 0 auto;
  line-height: 1.5rem;
}
.section_title {
  font-size: 1.25rem;
  line-height: 2.5rem;
  background-color: #0070c0;
  color: #ffffff;
  text-align: center;
}
.call_status_wrapper {
  padding: 0;
}
form[name="status_form"] {
  padding: 10rem 10rem 0 10rem;
}
form[name="status_form"]> a {
  display: block;
}
.counselor_background-color {
    background-color: #3cd5af;
}
.diviner_background-color {
    background-color: #c59ee2;
}
.sp_window_background-color {
    background-color: #fff97d;
}
.call_status {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.call_status--inactive {
  background-color: #111;
  color: #ddd;
  box-shadow: inset 0 1rem 1rem #000;
}
.call_status--active {
  background-color: #111;
  color: #fff;
  box-shadow: 0 1rem 1rem #000;
}
.call_status--active:hover {
  background-color: #111;
  color: #3cd5af;
  border: 5px solid #3cd5af;
}
.call_status--active:active {
  background-color: #101;
  box-shadow: inset 0 1rem 1rem #000;
  color: #3cd5af;
  border: 5px solid #3cd5af;
  transform: translate3d(0, 1rem, 0);
}

.call_status_btn_desc {
  margin-top: 2vw;
  text-align: center;
  line-height: 1.5rem;
}
.call_status_msg {
  margin-top: 2vw;
}
.call_status_desc {
  text-align: center;
  line-height: 2rem;
  color: #ffffff;
}
.call_status_white_circle {
  border: 1px solid #ffffff;
  border-radius: 50%;
}
.luck_call_points {
  margin-top: 0;
  font-size: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
}
.reach_mail_limit_count {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  color: red;
}

.luck_call_points a {
  color: red;
  text-decoration: none;
}

.call_attension_title {
  font-size: 1.25rem;
  line-height: 2.5rem;
  background-color: #a6a6a6;
  color: #ffffff;
  text-align: center;
  margin-bottom: 2rem;
}
.call_attension {
  margin-top: 2.5rem;
}
.status_list {
  list-style-type: none;
}
.status_list > li {
  margin-top: 1vw;
}
.margin-top_1dot5rem {
  margin-top: 1.5rem;
}

.call_reservation_form {
  padding: 2rem;
}

.reservation_wrapper {
  margin-top: 1rem;
}
.reservation_attension {
  color: red;
  margin-top: 1.5rem;
}
.biko_title {
  margin-top: 3rem;
}
.biko_class {
  width: 100%;
  height: 6rem;
  margin-top: 1rem;
}
.biko_attention {
  margin-top: 1rem;
  color: red;
}
.reservation_confirm {
  display: block;
  font-weight: bold;
  padding: 1rem 0;
  text-align: center;
  width: 100%;
  border-radius: 10px;
  margin-top: 2rem;
  text-decoration: none;
}
.link_to_call_reservation {
  display: block;
  text-align: center;
  margin-top: 2.5rem;
}
.call_reservation_attension {
  color: red;
  margin-top: 1.5rem;
  line-height: 2rem;
}

.table-height {
  min-height: 150px;
}

.call_history_list_wrapper {
  width: 90%;
  margin: 2rem auto 0 auto;
}

.call_history_table {
  width: 100%;
}
.call_history_table,
.call_history_table th,
.call_history_table td {
  border: 1px solid #808080;
}
.call_history_table th,
.call_history_table td {
  padding: 0.5rem;
}
.pagenate {
  margin-top: 1.5rem;
}

.call_reservation_list_wrapper {
  width: 90%;
  margin: 2rem auto 0 auto;
}
.disp_status_desc {
  display: block;
  font-weight: bold;
  text-decoration: none;
}
.status_desc {
  margin-top: 0.5rem;
}
.call_reservation_table {
  width: 100%;
  margin-top: 1.5rem;
}

.call_reservation_table,
.call_reservation_table th,
.call_reservation_table td {
  border: 1px solid #808080;
}

.call_reservation_table th,
.call_reservation_table td {
  padding: 0.5rem;
}
.call_reservation_table .td_status {
  padding: 0;
}
.reservation_call_cancel_link {
  padding: 0.5rem;
}

.td_shubetsu,
.td_status {
  text-align: center;
}
.consul_mail_form {
  padding: 2rem;
}

.disable_mail_form {
  margin-top: 1.5rem;
  color: red;
  text-align: center;
}
.consul_title {
  margin-top: 1rem;
}
.consul_title span {
  display: none;
  color: red;
}
.input_consul_title {
  margin-top: 0.25rem;
  width: 100%;
  line-height: 1.5rem;
}
.consul_contents {
  margin-top: 2rem;
}
.consul_contents span {
  display: none;
  color: red;
}
.input_consul_contents {
  width: 100%;
  margin-top: 0.25rem;
  height: 21rem;
}
.attachment_image_title {
  margin-top: 2rem;
}
.attachment_file {
  border: 1px solid #000000;
  width: 100%;
  margin-top: 0.25vw;
}
.mail_form_submit {
  width: 100%;
  line-height: 2.5rem;
  border: none;
  margin-top: 1rem;
  border-radius: 10px;
  font-weight: bold;
}
.mail_send_attension {
  color: red;
  margin-top: 1.5rem;
  text-align: center;
}
.consul_mail_history_list {
  width: 90%;
  margin: 2rem auto;
}
.consul_mail_history_card {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}
.counselor_content {
  display: flex;
  justify-content: start;
  align-items: center;
}
.counselor_icon {
  border-radius: 50%;
  width: 8vw;
  height: 8vw;
  background-position: center;
  display: inline-block;
  background-size: cover;
}
.counselor_name {
  color: #000000;
  text-decoration: none;
}
.consul_mail_title {
  margin-top: 1rem;
  color: #000000;
  text-decoration: none;
}
.card_right_part {
  width: 10vw;
}
.mail_status_icon {
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  padding: 0.25rem;
  text-align: center;
  margin-top: 0.25rem;
}
.waiting_for_reply {
  background-color: #52be49;
}
.counselor_checking {
  background-color: #e2d093;
}
.not_open {
  background-color: #be4962;
}
.opened {
  background-color: #88bed8;
}
.mail_sent_date,
.mail_sent_time {
  margin-top: 0.5rem;
  text-decoration: none;
  color: #000000;
}
.already_read {
  background-color: #88bed8;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  margin-top: 1.5rem;
}
.page-item {
  margin-right: 1rem;
  font-weight: bold;
}
.reservation_call_cancel_link {
  text-decoration: none;
  display: block;
}
.call_status_img {
  display: block;
  width: 95%;
  margin: 0 auto;

}
#link_for_direct_call:active {
  transform: translateY(5rem);
}
.blink_new {
    animation: blink 0.75s ease infinite;
}
.status_03_alert_wrapper {
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.status_03_alert {
  color: red;
  background-color: yellow;
  text-align: center;
  width: 90%;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 2rem;
}
.bgcolor_fff97d { background-color: #fff97d; }
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.call_button {
  border: 1px solid #efefef;
  border-radius: 10px;
  background-color: #45a1cc;
  box-shadow: 2px 2px 5px #2a7da3;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
  display: block;
  color: #ffffff;
}
.call_button:hover {
  box-shadow: none;
}
.call_reservation_table {
  margin-top: 3rem;
}

.validation_message {
  color: red;
  font-size: 3rem;
  line-height: 3rem;
}