@charset "utf-8";

/* ==================================================================================
category
================================================================================== */

/* -------------------------------------------------------------
mv-category
------------------------------------------------------------- */
.mv-category.is-love {
  background: #f7efef;
}

.mv-category.is-fuan {
  background: #dce8f3;
}

.mv-category.is-relations {
  background: #faf7d8;
}

.mv-category.is-work {
  background: #d9e9d9;
}

.mv-category.is-family {
  background: #faece0;
}

.mv-category.is-sex {
  background: #dbd7ee;
}

.mv-category .inner {
  padding: 2.5em 1.2em 2em;
}

.mv-category .ttl-mv {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 2px;
}

.mv-category .ttl-mv .sub {
  font-size: 0.7em;
}

.mv-category.is-love .ttl-mv {
  color: #f07baa;
}

.mv-category.is-fuan .ttl-mv {
  color: #63a0d8;
}

.mv-category.is-relations .ttl-mv {
  color: #a39600;
}

.mv-category.is-work .ttl-mv {
  color: #588458;
}

.mv-category.is-family .ttl-mv {
  color: #ea974d;
}

.mv-category.is-sex .ttl-mv {
  color: #7165a8;
}

.box-mv-lead {
  background: #fff;
  border-radius: 10px;
  color: #50658c;
  font-size: 13px;
  padding: 25px;
  margin-top: 20px;
}

.is-love .point {
  color: #f90058;
}

.is-fuan .point {
  color: #002bcc;
}

.is-relations .point {
  color: #8b8000;
}

.is-work .point {
  color: #247624;
}

.is-family .point {
  color: #d58200;
}

.is-sex .point {
  color: #5a48ae;
}

@media screen and (max-width: 320px) {
  .mv-category .ttl-mv {
    font-size: 20px;
  }
}

/* -------------------------------------------------------------
rev-area
------------------------------------------------------------- */
.rev-area {
  background: #f5f5f5;
}

.ac-wrap + .ac-wrap {
  margin-top: 10px;
}

.ac-btn {
  background: #6796cb;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  padding: 15px 20px;
  letter-spacing: 2px;
  position: relative;
}

.ac-btn::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  right: 25px;
  top: 24px;
  transform: rotate(-45deg);
}

.ac-btn.active::after {
  transform: rotate(135deg);
}

.ac-content {
  display: none;
  padding: 20px 15px;
}

.box-rev {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

.box-rev + .box-rev {
  margin-top: 30px;
}

.box-counselor {
  border-top: 1px solid #efefef;
  padding-top: 10px;
  margin-top: 10px;
}

.box-counselor .grid-prof {
  justify-content: center;
  align-items: center;
}

.box-counselor .grid-prof > .photo {
  width: 40px;
  height: 40px;
  border: 1px solid #c5c5c5;
  border-radius: 999em;
  margin-right: 15px;
  overflow: hidden;
}

.box-counselor .counselor {
  color: #373737;
  font-size: 13px;
  text-align: center;
}

/* -------------------------------------------------------------
counselor-area
------------------------------------------------------------- */
.counselor-area.is-love {
  background: #f7efef;
}

.counselor-area.is-fuan {
  background: #dce8f3;
}

.counselor-area.is-relations {
  background: #faf7d8;
}

.counselor-area.is-work {
  background: #d9e9d9;
}

.counselor-area.is-family {
  background: #faece0;
}

.counselor-area.is-sex {
  background: #dbd7ee;
}

.counselor-area.is-love .point {
  color: #ee1668;
}

.counselor-area.is-fuan .point {
  color: #1076e8;
}

.counselor-area.is-relations .point {
  color: #a59000;
}

.counselor-area.is-work .point {
  color: #659900;
}

.counselor-area.is-family .point {
  color: #c56e24;
}

.counselor-area.is-sex .point {
  color: #8058ad;
}

.member-list-wrap {
  justify-content: space-between;
}

.member-list-wrap > li {
  width: 48%;
}

.member-list-wrap > li:nth-child(n+3) {
  margin-top: 15px;
}

.member-list-wrap > li.is-hidden {
  display: none;
}

.member-wrap {
  display: block;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 10px;
  text-decoration: none;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.member-wrap:hover {
  opacity: 0.8;/* for PC */
  text-decoration: none;/* for PC */
}

.member-wrap .status {
  display: inline-block;
  line-height: 1;
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.member-wrap .status > span {
  background: none;
  border: none;
  color: #fff;
}

.member-wrap .status > span::before {
  content: "";
  border: 30px solid transparent;
  border-top: 30px solid #bfbfbf;
  border-left: 30px solid #bfbfbf;
  position: absolute;
  top: 0;
  left: 0;
}

.member-wrap .status > span .text {
  transform: rotate(-45deg);
  background: none;
  border: none;
  color: #fff;
  position: absolute;
  top: 11px;
  left: -21px;
}

.member-wrap .status > span.staOn::before {
  border-top-color: #f1f1f1;
  border-left-color: #f1f1f1;
}

.member-wrap .status > span.staOn .text {
  color: #50658c;
}

.member-wrap .status > span.staStd::before {
  border-top-color: #50658c;
  border-left-color: #50658c;
}

.member-wrap .status > span.staOut::before {
  border-top-color: #bfbfbf;
  border-left-color: #bfbfbf;
}

.member-wrap .photo {
  width: 80px;
  height: 80px;
  border-radius: 999em;
  overflow: hidden;
  margin: 0 auto;
}

.member-wrap .prof {
  color: #404040;
  text-align: center;
}

.member-wrap .name {
  font-weight: bold;
  margin: 10px 0 5px;
}

.member-wrap .date,
.member-wrap .count-consult {
  font-size: 10px;
}

.member-wrap .catchcopy {
  background: #f9f9f9;
  font-size: 10px;
  padding: 10px;
  margin-top: 10px;
  text-align: left;
}

.ac-btn-more {
  color: #515151;
  margin-top: 20px;
  text-align: center;
}

/* -------------------------------------------------------------
introduction-area
------------------------------------------------------------- */
.introduction-area {
  background: #f5f5f5;
}

/* -------------------------------------------------------------
history-area
------------------------------------------------------------- */
.grid-history {
  justify-content: center;
}

.grid-history > li {
  padding: 0 10px;
  text-align: center;
}

.grid-history .head {
  color: #848588;
  font-size: 12px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  position: relative;
}

.grid-history .head::after {
  content: "";
  width: 70%;
  border-top: 1px solid #50658c;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.grid-history .num {
  color: #50658c;
  font-size: 17px;
  font-weight: bold;
}

.grid-history .num .sub {
  font-size: 12px;
}