@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;

    text-wrap: nowrap;

}



.topic_item {

  border-bottom: 1px solid #808080;

}

@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;

}