@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@900&display=swap");

/*-----------------------------

CAST PROFILE

----------------------------*/

/* 基本スタイル（モバイル向け） */
.topbox {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1000px;
}

.profile_box_left,
.profile_box_right {
  width: 100%;
  max-width: 480px;
  display: inline-block;
  margin: 0 auto;
  vertical-align: text-top;
}

/*LEFT BOX*/

.profile_box_left .img_box {
  width: 90%;
  aspect-ratio: 480 / 640;
  margin: 0 auto 20px;
  position: relative;
}

/*新人マーク*/

.img_box .icon_new {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 30%;
}

.img_box .icon_new .new_icon {
  width: 100%;
}

/*セラピスト写真*/

.slick-prev::before,
.slick-next::before {
  color: #3366cc !important;
}

.slick-dots li.slick-active button::before {
  opacity: 1 !important;
  color: #3366cc !important;
}

.slick-dotted.slick-slider {
  margin-bottom: 50px !important;
}

.cast_img img {
  width: 100%;
  aspect-ratio: 480 / 640;
  object-fit: cover;
}

/*RANK NO*/
.profile_box_left .rank_no {
  top: -24px;
  left: -10px;
  font-size: 32px;
  z-index: 2;
}

/*RIGHT BOX*/

.profile_box_right {
  margin: 0 auto 20px;
  padding: 0 20px;
}

/*セラピスト名前*/

.profile_box_right .name_holder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  margin: 0.5lh auto;
}

.profile_box_right .name_holder .cast_level {
  min-width: 48px;
  max-width: 48px;
}

.profile_box_right .name_holder .cast_level img {
  width: 100%;
  vertical-align: baseline;
}

.profile_box_right .name_holder .name {
  font-size: 2.2rem;
  color: #426aea;
  white-space: nowrap;
}

.profile_box_right .name_holder .name span {
  font-size: 1.5rem;
}

.profile_box_right .data {
  font-size: 1.2rem;
  color: #333;
}

.profile_box_right .cast_copy {
  font-size: 1.2rem;
  color: #426aea;
  margin: 0 0 0.5lh 0;
}

/*SNS*/
.profile_sns {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 80px;
}

.profile_sns li {
  width: 50px;
}

.profile_sns img {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .topbox {
    flex-direction: row;
  }

  .profile_box_left .img_box {
    width: 400px;
  }
}

/*-----------------------------

AUTOGRAPH

----------------------------*/

.autograph_con img {
  width: 100%;
}

/*-----------------------------

RATING

----------------------------*/

.rating_con img {
  width: 100%;
}

/*-----------------------------

Q&A

----------------------------*/

.questionsbox {
  color: #3d5bbb;
}

.questionsbox dt,
.questionsbox dd {
  display: flex;
  align-items: center;
  margin-bottom: 0.3lh;
}

.questionsbox dt {
  font-size: 1.2rem;
  text-decoration: underline;
}

.questionsbox dd {
  font-size: 1rem;
  margin-left: 1rem;
}

.questionsbox dt span,
.questionsbox dd span {
}

/*-----------------------------

SHOP & THERAPIST MESSAGE

----------------------------*/

.message_heading {
  width: 100%;
  border: 1px solid #7495f0;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background-color: #e0f3fd;
  overflow: hidden;
}

.message_heading h3 {
  color: #3366cc;
  text-align: left;
  font-size: 0.8rem;
  padding: 1lh 1rem;
  line-height: 1;
  margin: 0;
}

.message_content {
  text-align: initial;
  border: 1px solid #7495f0;
  border-radius: 0 0 10px 10px;
  padding: 15px;
  margin: 0 auto 50px auto;
}

.message_content img {
  max-width: 100% !important;
  height: auto !important;
}

@media screen and (min-width: 769px) {
  .message_heading h3 {
    font-size: 1rem;
  }
}

/*-----------------------------

OPTION

----------------------------*/

.option_con h3.sec_title_sub {
  color: #3d5bbb;
  border-bottom: 2px solid #3d5bbb;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
  text-indent: 0.5rem;
  margin-bottom: 1lh;
}

.option_con .option_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option_list li {
  width: calc((100% - 20px) / 3);
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: bold;
  padding: 20px 10px;
}

.option_list li.option_ok {
  background-color: #4dc2ff;
  color: #fff;
}

.option_list li.option_ng {
  background-color: #949393;
  color: #828282;
}

@media screen and (min-width: 769px) {
  .option_list li {
    font-size: 1rem;
  }
}

/*-----------------------------

SCHEDULE

----------------------------*/

.schedule_con h3.sec_title_sub {
  color: #3d5bbb;
  border-bottom: 2px solid #3d5bbb;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
  text-indent: 0.5rem;
  margin-bottom: 1lh;
}

.sche_tbl {
  width: 90%;
  border-top: 1px solid #6b8bed;
  border-left: 1px solid #6b8bed;
  border-right: 1px solid #6b8bed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1rem;
  margin: 35px auto;
}

.sche_tbl thead {
  display: block;
  float: left;
  border-right: 1px solid #6b8bed;
  width: 30%;
}

.sche_tbl thead tr {
  width: 100%;
}

.sche_tbl tr {
  display: block;
  float: left;
}

.sche_tbl tr th,
.sche_tbl tr td {
  border-bottom: 1px solid #6b8bed;
  padding: 10px;
  height: 50px;
  display: block;
}

.sche_tbl th {
  background: #e0f3fd;
  font-weight: normal;
  text-align: center;
}

.sche_tbl tbody {
  display: block;
  float: left;
  width: 70%;
}

.sche_tbl tbody tr {
  width: 100%;
}

#sche-slider {
  position: relative;
}

#sche-slider .prev,
#sche-slider .next {
  position: absolute;
  top: -10px;
  right: 0;
  z-index: 10;
  padding: 5px 10px;
  font-size: 14px;
  border: 1px solid #6b8bed;
  color: #6b8bed;
  cursor: pointer;
}

/* 横並びに見えるように right をずらす */
#sche-slider .prev {
  right: 80px;
}

#sche-slider .next {
  right: 0;
}

@media screen and (min-width: 769px) {
  .sche_tbl {
    width: 100%;
  }

  .sche_tbl tr {
    display: table-row;
    float: none;
  }

  .sche_tbl tr td,
  .sche_tbl tr th {
    width: calc(100% / 7);
    display: table-cell;
    height: auto;
    border-right: 1px solid #6b8bed;
  }

  .sche_tbl thead {
    display: table-header-group;
    float: none;
    width: auto;
  }

  .sche_tbl tbody {
    display: table-row-group;
    float: none;
    width: auto;
  }
}

.sche_tbl th.sun,
.sche_tbl td.sun {
  color: #e60033;
}
.sche_tbl th.sat,
.sche_tbl td.sat {
  color: #005aff;
}

/*-----------------------------

CAST EVENT

----------------------------*/

.cast_event_list li {
  margin-bottom: 20px;
}

.cast_event_list img {
  width: 100%;
}