@charset "utf-8";

.page_top {
  width: 960px;
  margin: 0 auto;
}

.cuddle_top_slides {
  margin-top: 30px;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

.img_part {
  width: 100%;
  height: auto;
  position: relative;
}

.img_part_wrapper {
  position: relative;
  width: 100%;
  height: auto;
}

.slide_common_bgimg {
  display: block;
  position: relative;
  height: auto;
  width: 100%;
  margin: 0 auto;
}

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

.section_title {
  font-size: 1.25rem;
  line-height: 2.5rem;
  font-weight: normal;
}

.padding-left_0dot5rem {
  padding-left: 0.5rem;
}
.text-align_left {
  text-align: left;
}
.text-align_center {
  text-align: center;
}
.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;
}

.telop_wrapper {
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
}
.telop {
    display: inline-block;
    opacity: 0;
}

.topic_item {
  border-bottom: 1px solid #808080;
}
.topic_item:first-of-type> * {
    animation: blinking 1s step-end infinite;
}

@keyframes blinking {
    0% { opacity: 1;}
    50% { opacity: 0;}
    100% { opacity: 1;}
}

.topic_date {
  padding-left: 0.5rem;
  height: 2.2rem;
  line-height: 2.2rem;
  font-size: 1.1rem;
  text-align: left;
}
.topic_msg {
  padding-left: 0.5rem;
  height: 1.75rem;
  line-height: 1.75rem;
  font-size: 1.15rem;
  text-align: left;
  color: #000000;
  text-decoration: none;
}
.topic_msg::before {
  display: inline-block;
  content: "";
  position: relative;
  top: 0;
  left: 0;
  background-image: url("../img/e0012_1.png");
  background-size: cover;
  background-position: center;
  width: 1rem;
  height: 1rem;
}
.and_more_link {
  margin-top: 1.5vw;
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.75rem;
  height: 1.75rem;
  color: #0091c4;
}

.counselor {
  margin-top: 3vw;
}
.counselor_form {
  width: 100%;
  padding: 1vw 0;
}
.counselor_search {
  background-color: #eff6ea;
  padding-bottom: 1vw;
}
.search_bar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.search_keyword {
  width: 80%;
  height: 2rem;
}
.search_button {
  height: 2rem;
  width: 10%;
  background-color: #00cc99;
}
.search_btn_img {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
}
.submit_search {
  display: none;
}

.genre_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 1vw 5% 0 5%;
}
.submit_genre {
  margin-left: 1vw;
  margin-top: 1vw;
  color: #3cd5af;
  border: 1px solid #3cd5af;
  background-color: #ffffff;
  border-radius: 20px;
  font-size: 1.5rem;
}
.counselor_introduction {
  padding: 1vw;
}
.introduction_card {
  list-style-type: none;
  background-color: #f2f2f2;
  padding: 1vw;
  margin-bottom: 1vw;
  display: flex;
  /* grid-template-areas: "img msg link";
  grid-template-columns: 0.3fr 0.5fr 0.2fr;
  grid-template-rows: 10vw; */
}
.introduction_img_anchor {
  width: 30%;
  display: block;
  border: 1px solid #3cd5af;
  padding: 0;
  margin: 0;
}
.introduction_img {
  display: block;
  position: relative;
  width: 95%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}
.introduction_description {
  width: 45%;
  padding-left: 1rem;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.25rem;
}
.introduction_name {
  width: 100%;
  margin-bottom: 1rem;
}
.tel_rate {
  width: auto;
  margin-bottom: 1rem;
}
.tel_rate::before {
  display: inline-block;
  content: "☎";
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 1rem;
  /* background-image: url('../img/round_call_black_18dp_1x.png'); */
}
.mail_rate {
  width: auto;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
.mail_rate::before {
  display: inline-block;
  content: "✉";
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 1rem;
  /* background-image: url('../img/round_email_black_18dp_1x.png'); */
}
.introduction_link_wrapper {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: space-between;
  flex-wrap: wrap;
}
.intro_link_common {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 30%;
  color: #ffffff;
  border-radius: 12.5px;
  text-decoration: none;
}
.intro_link_common::before {
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  background-size: cover;
  background-position: center;
}

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

.introduction_link::before {
  background-image: url("../img/e0012_1_white.png");
}
.pagenate {
  text-align: center;
}
.pagenate > a {
  color: #0070c0;
  text-decoration: none;
}
.intro_link_common_white {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 30%;
  border-radius: 12.5px;
  text-decoration: none;
}
.intro_link_common_sp_window {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 30%;
  border-radius: 12.5px;
  text-decoration: none;
}
.intro_link_common_white::before {
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  color: #ffffff;
  background-size: cover;
  background-position: center;
}
.intro_link_common_sp_window::before {
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  color: #ed7d31;
  background-size: cover;
  background-position: center;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}
.page-item {
  margin-right: 1rem;
  font-weight: bold;
}
.tel_link::before {
  content: "☎";
  margin-right: 1rem;
}
.introduction_link,
.tel_link,
.mail_link {
  border-bottom: 1px solid #000000;
}
.introduction_link:hover,
.tel_link:hover,
.mail_link:hover {
  border-bottom: none;
}

.mail_link::before {
  content: "✉";
}
.diviner_img_anchor {
  border: 1px solid #c59ee2;
}
.sp_window_img_anchor {
  border: 1px solid #fff97d;
}
.bgcolor_fff97d {
  background-color: #fff97d;
}
.ed7d31 {
  color: #ed7d31;
}

.search_button_counselor {
  background-color: #00cc99;
}
.search_button_diviner {
  background-color: #c59ee2;
}
.counselor_genre {
  color: #3cd5af;
  border: 1px solid #3cd5af;
  background-color: #ffffff;
}

.counselor_genre_clear,
.diviner_genre_clear {
  background-color: #808080;
  border: 1px solid #808080;
  color: white;
}
.diviner_genre {
  color: #c59ee2;
  border: 1px solid #c59ee2;
  background-color: #ffffff;
}
.active_counselor_genre {
  color: #ffffff;
  border: 1px solid #ffffff;
  background-color: #3cd5af;
}
.active_diviner_genre {
  color: #ffffff;
  border: 1px solid #ffffff;
  background-color: #c59ee2;
}
.submit_genre:hover {
  cursor: pointer;
}
.color_counselor_search {
  background-color: #eff6ea;
}
.color_diviner_search {
  background-color: #f3ebf9;
}

.bgcolor_disabled {
  background-color: #8e8e8e;
  border: none;
}
.satisfaction_level {
  display: flex;
}
.star_img {
  display: block;
  width: 20px;
  height: 20px;
  transform: translateY(-5px);
}

/**********************************************************************************************/
/* .diviner {

} */
.diviner_form {
  width: 100%;
  padding: 1vw 0;
}
.diviner_search {
  background-color: #f3ebf9;
  padding-bottom: 1vw;
}
.diviner_search_button {
  height: 2rem;
  width: 10%;
  background-color: #c59ee2;
}
.submit_diviner_genre {
  margin-left: 1vw;
  margin-top: 1vw;
  color: #c59ee2;
  border: 1px solid #c59ee2;
  background-color: #ffffff;
  border-radius: 20px;
  font-size: 1.5rem;
}
.diviner_introduction {
  padding: 1vw;
}
.diviner_introduction_img_anchor {
  grid-area: img;
  display: block;
  border: 1px solid #c59ee2;
  padding: 0;
  margin: 0;
}
.diviner_intro_link_common {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 30%;
  color: #ffffff;
  border-radius: 12.5px;
  text-decoration: none;
}
.diviner_intro_link_common::before {
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  background-size: cover;
  background-position: center;
}
.bgcolor_c59ee2 {
  background-color: #c59ee2;
}

/**********************************************************************************************/
.sp_window_introduction {
  padding: 1vw;
}
.sp_window_introduction_img_anchor {
  grid-area: img;
  display: block;
  border: 1px solid #0091c4;
  padding: 0;
  margin: 0;
}
.sp_window_intro_link_common {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 30%;
  color: #ffffff;
  border-radius: 12.5px;
  text-decoration: none;
}
.sp_window_intro_link_common::before {
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  background-size: cover;
  background-position: center;
}
.bgcolor_0091c4 {
  background-color: #0091c4;
}

.step_wrapper {
  margin-top: 3vw;
  display: flex;
  justify-content: space-between;
}
.step {
  width: 30%;
}
.step_img {
  display: block;
  width: 100%;
}
.step_title {
  margin-top: 0.5vw;
  text-align: center;
}
.step_message {
  line-height: 1.5rem;
}

.qanda {
  margin-top: 3vw;
}
.qanda_card_wrapper {
  padding: 2vw;
}
.qanda_card {
  border: 2px solid #bfbfbf;
  padding: 2vw;
  margin-top: 2vw;
}
.question {
  border-left: 2px solid #008080;
  padding-left: 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  text-align: left;
  width: 100%;
  position: relative;
}
.question::after {
  display: block;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: -0.75rem;
  right: 0;
  border-right: solid transparent 1.5rem;
  border-bottom: solid #20b2aa 1.5rem;
  transform: rotate(-45deg);
}
.answer {
  padding-top: 2.25rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
.margin-top_0 {
  margin-top: 0;
}
.color_3cd5af {
  color: #3cd5af;
}
.font-size_1dot25rem {
  font-size: 1.25rem;
}
.line-height_2dot5rem {
  line-height: 2.5rem;
}
.margin-top_1dot5vw {
  margin-top: 0.5vw;
  margin-bottom: 0.5vw;
}

.support {
  margin-top: 3vw;
}

.support-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.support-img-wrapper {
  width: 46%;
}

.support-img img {
  width: 100%;
  height: auto;
  padding-bottom: 20px;
}

.cuddle_channel-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-top: 2.5vw;
  margin-bottom: 2.5vw;
}

.cuddle_youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.note {
  background-color: #3cd5af;
  color: #ffffff;
  padding: 1.5rem 0.5vw;
  font-size: 1.5rem;
}
.about_title {
  margin-top: 1.5rem;
  text-decoration: underline;
}
.about_message {
  line-height: 1.95rem;
  margin-top: 1vw;
}
div.diviner,
div.sp_window_introduction,
div.use_flow {
  margin-top: 10rem;
}
.not_found_data_message {
  font-size: 2.5rem;
  line-height: 2.5rem;
}