@charset "utf-8";

/* support class */
.fL {
  float: left;
}

.fR {
  float: right;
}

.mT2 {
  margin-top: 2px;
}

.mT5 {
  margin-top: 5px;
}

.mT10 {
  margin-top: 10px;
}

.mT15 {
  margin-top: 15px;
}

.mT20 {
  margin-top: 20px;
}

.mT30 {
  margin-top: 30px;
}

.mB5 {
  margin-bottom: 5px;
}

.mB10 {
  margin-bottom: 10px;
}

.mB15 {
  margin-bottom: 15px;
}

.mB20 {
  margin-bottom: 20px;
}

.mB30 {
  margin-bottom: 30px;
}

.pT5 {
  padding-top: 5px;
}

.pT10 {
  padding-top: 10px;
}

.pT15 {
  padding-top: 15px;
}

.pT20 {
  padding-top: 20px;
}

.pT30 {
  padding-top: 30px;
}

.pB5 {
  padding-bottom: 5px;
}

.pB10 {
  padding-bottom: 10px;
}

.pB15 {
  padding-bottom: 15px;
}

.pB20 {
  padding-bottom: 20px;
}

.pB30 {
  padding-bottom: 30px;
}

.pLR15 {
  padding-left: 15px;
  padding-right: 15px;
}

.m5 {
  margin: 5px;
}

.m10 {
  margin: 10px;
}

.m15 {
  margin: 15px;
}

.m20 {
  margin: 20px;
}

.m30 {
  margin: 30px;
}

.p5 {
  padding: 5px;
}

.p10 {
  padding: 10px;
}

.p15 {
  padding: 15px;
}

.p20 {
  padding: 20px;
}

.p30 {
  padding: 30px;
}

.lr {
  font-size: larger;
}

.sr {
  font-size: 12px;
}

.xr {
  font-size: x-large;
}

.xl {
  font-size: xx-large;
}

.xm {
  font-size: x-small;
}

.weight {
  font-weight: bold;
}

.relative {
  position: relative;
}

.nonetext {
  font-size: 1px;
  line-height: 1px;
  text-indent: -99999px;
  overflow: hidden;
  outline: none;
  text-align: center;
}

.c {
  text-align: center !important;
}

.r {
  text-align: right !important;
}

.l {
  text-align: left !important;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

body {
  margin: 0;
  padding: 0;
  color: #212121;
  font-size: 14px;
  font-family:
    -apple-system, BlinkMacSystemFont,
    "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック", "MS PGothic",
    sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

a {
  color: #0b8aff;
  text-decoration: none;
}

a[target="_blank"] .icon-blank {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 5px;
}

a[target="_blank"] .icon-blank img {
  width: 13px;
  height: auto;
}

a.link-underline {
  text-decoration: underline;
}

a.link-text {
  color: #333;
  text-decoration: underline;
}

a.link-text-pink {
  color: #f13970;
  text-decoration: underline;
}

a.link-text-pink .icon {
  margin-right: 5px;
  vertical-align: -3px;
}

/* リンクアイコン矢印 */
a.link-icon-after::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 11px;
  background: url("../images/icon-link-arrow.svg") no-repeat right center;
  background-size: contain;
  margin-left: 4px;
}

a.link-icon-after.sr::after {
  width: 6px;
  height: 10px;
}

input.link-icon-after {
  background: url("../images/icon-link-arrow.svg") no-repeat right center;
  color: #0b8aff;
  padding-right: 12px;
}

/* 別タブリンクアイコン */
a.link-icon-after.icon-after-blank::after {
  width: 13px;
  height: 13px;
  background: url("../images/icon-link-blank-blue.svg") no-repeat right center;
  background-size: contain;
  vertical-align: -0.1em;
}

hr.line {
  border: 0;
  height: 1px;
  background: #b7b7b7;
  background-image: linear-gradient(to right, #eee, #b7b7b7, #eee);
  width: 75%;
}

hr.delimiter {
  border: 16px #f1f1f1 solid;
  border-top: 1px solid #e0e0e0;
  margin: 0;
}

/* clearfix */

/* For modern browsers */
.cf::before,
.cf::after {
  content: "";
  display: table;
}

.cf::after {
  clear: both;
}

.underline {
  text-decoration: underline;
}

/* 三点リーダー */
.overflow-1line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-2line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
}

.overflow-3line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.overflow-4line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

@media screen and (max-width: 320px) {
  .sr {
    font-size: 11px;
  }
}

/* ----------------------------------------------------------------------
   Font Color
------------------------------------------------------------------------- */

/* Font Color */
.fcolor-highlight {
  color: #f2185a;
}

.fcolor-textprimary {
  color: #616161;
}

.fcolor-alert {
  color: #f50505;
}

.box-alert-border {
  border: 1px solid #f50505;
  border-radius: 5px;
  padding: 12px 14px;
}

.text-alert-icon {
  color: #f50505;
  padding-left: 20px;
  position: relative;
}

.text-alert-icon::before {
  content: "";
  width: 15px;
  height: 13px;
  background: url("../images/icon-alert.svg") no-repeat;
  position: absolute;
  top: 4px;
  left: 0;
}

.text-dot-indent {
  padding-left: 1em;
}

.text-dot-indent::before {
  content: "・";
  display: inline-block;
  margin-left: -1em;
}

/* 404 not found */
.not-found-head {
  padding: 20px 0;
  text-align: center;
}

.not-found-done {
  font-size: 16px;
}

@media screen and (max-width: 320px) {
  .not-found-done {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------------------
   Background Color
------------------------------------------------------------------------- */
.bg-pink {
  background: #fff2f4;
}

/* ----------------------------------------------------------------------
   more (もっと見る) & title (タイトル)
------------------------------------------------------------------------- */
.more-pager-wrap {
  background-color: #fafafa;
  border-top: 1px solid #eaeaea;
  padding: 0 8px;
}

.more {
  text-align: right;
}

.more a,
.pager a {
  display: block;
  height: 44px;
  line-height: 44px;
  color: #616161;
}

.pager {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.pager .pagerR,
.pager .pagerL {
  width: 50%;
}

.pager .pagerR a {
  text-align: right;
  position: relative;
  padding-right: 24px;
  color: #616161;
}

.pager .pagerR a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #616161;
  border-right: 2px solid #616161;
  transform: rotate(45deg);
  position: absolute;
  right: 8px;
  top: 16px;
}

.pager .pagerL a {
  text-align: left;
  position: relative;
  padding-left: 24px;
  color: #616161;
}

.pager .pagerL a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #616161;
  border-left: 2px solid #616161;
  transform: rotate(-45deg);
  position: absolute;
  left: 8px;
  top: 16px;
}

.pager-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.pager-pagination>li {
  font-size: 12px;
  letter-spacing: 0;
}

.pager-pagination>li .curr {
  display: inline-block;
  background: #f13970;
  border-radius: 3px;
  color: #fff;
  padding: 5px 10px;
  margin: 0 4px;
}

.pager-pagination>li a {
  display: block;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  color: #212121;
  padding: 5px 10px;
  margin: 0 4px;
}

.pager-pagination>li.pager-prev {
  margin-right: 5px;
}

.pager-pagination>li.pager-prev a {
  margin-left: 0;
}

.pager-pagination>li.pager-prev a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #666;
  border-left: 2px solid #666;
  margin-right: 3px;
  transform: rotate(-45deg);
}

.pager-pagination>li.pager-next {
  margin-left: 5px;
}

.pager-pagination>li.pager-next a {
  margin-right: 0;
}

.pager-pagination>li.pager-next a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
  margin-left: 3px;
  transform: rotate(45deg);
}

@media screen and (max-width: 320px) {

  .pager-pagination>li .curr,
  .pager-pagination>li a {
    padding: 3px 8px;
    margin: 0 3px;
  }
}

/* title */
.title {
  padding: 20px 14px 14px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.title.set-txt {
  padding: 8px 8px 4px;
}

/* 新ttlモジュール */
.ttl-lead-border {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 15px;
  margin: 0 -15px 15px;
  letter-spacing: 0;
  position: relative;
}

.ttl-lead-border .tx-small {
  font-size: 14px;
}

.ttl-lead-border::before {
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #f13970 0%, #f13970 8%, #ddd 8%, #ddd 100%);
  position: absolute;
  left: 0;
  bottom: 0;
}

.ttl-lead-border.in-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

.ttl-lead-border.in-link span {
  display: inline-block;
}

/* 左線タイトル */
.ttl-left-item {
  font-size: 16px;
  padding-left: 13px;
  margin-bottom: 15px;
  position: relative;
}

.ttl-left-item::before {
  content: "";
  background: #f13970;
  border-radius: 999em;
  width: 5px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.text-note {
  color: #666;
}

.caution-10pt {
  font-size: 10px;
}

/* title 下リード文 */
.lead {
  padding: 4px 14px 16px;
}

.lead p {
  color: #616161;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 200;
}

.title h1 {
  font-size: 18px;
  padding: 0 0 10px 5px;
  flex: 1;
}

.title h2 {
  font-size: 18px;
  flex: 1;
}

.title h3 {
  font-size: 18px;
  font-weight: 500;
  flex: 1;
}

.title span {
  display: inline-block;
}

.title .more {
  margin-left: auto;
}

.title .more a {
  display: inline;
}

/* お悩みベース用 */
.ttl {
  padding: 24px 8px 8px;
  background: #fff;
}

.ttl h3 {
  font-size: 16px;
  font-weight: 500;
}

@media screen and (max-width: 360px) {
  .ttl-lead-border {
    font-size: 19px;
  }
}

@media screen and (max-width: 320px) {
  .ttl-lead-border {
    font-size: 17px;
  }
}

/* ----------------------------------------------------------------------
  ページ件数表示
------------------------------------------------------------------------- */
.page-num-head-col {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.page-num-head-col>.page-num {
  font-size: 11px;
}

/* ----------------------------------------------------------------------
  Buttons
------------------------------------------------------------------------- */
.btn {
  display: block;
  width: 94%;
  text-align: center;
  position: relative;
  cursor: pointer;
  height: 44px;
  line-height: 40px;
  padding: 0 1.5rem;
  color: #616161;
  font-size: 16px;
  white-space: nowrap;
  border: none;
  user-select: none;
  border-radius: 50px;
  transition: all 0.3s ease-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.225);
}

.btn:hover {
  text-decoration: none;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.225);
}

.btn span {
  line-height: 24px;
  display: inline-block;
}

.btn-wrap {
  display: block;
}

.btn-wrap .btn {
  margin: 0 auto;
}

/* btn初期設定（新） */
.btn-def {
  display: block;
  width: 90%;
  border-radius: 4px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  font-weight: bold;
  padding: 17px 10px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
}

.btn-def.small {
  padding: 12px 10px;
  font-size: 14px;
}

.btn-def.slim {
  padding: 13px 10px;
}

.btn-def .sub {
  display: block;
  font-size: 12px;
  font-weight: normal;
  margin-top: 2px;
}

.btn-wrap-more {
  margin: 30px 0 20px;
}

.btn-def.arrow {
  position: relative;
  padding: 12px 10px;
}

.btn-def.arrow::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 42%;
  right: 16px;
}

/* btn基礎カラー */
.btn-pink {
  background: #f13970;
  color: #fff;
}

.btn-pink-border {
  background: #fff;
  border: 1px solid #f13970;
  color: #f13970;
}

.btn-gray {
  background: #ddd;
  color: #777;
}

.btn-gray-border {
  border: 1px solid #777;
  color: #777;
}

.btn-inactive {
  background: #ccc;
  box-shadow: none;
  color: #fff;
}

.btn-voice {
  display: inline-block;
  width: auto;
  background: #fff url("../images/icon-voice.svg") no-repeat 12px center;
  background-size: 13px auto;
  border: 1px solid #6e778e;
  border-radius: 999em;
  box-shadow: none;
  color: #6e778e;
  font-size: 10px;
  padding: 5px 12px 5px 30px;
}

.btn-voice.is-pause {
  background: #fff url("../images/icon-voice-pause.svg") no-repeat 12px center;
}

.btn-sns-line {
  background: #06c755;
  color: #fff;
  padding: 13px 10px;
  /* LINEアイコンでbtn-defより高さが出る為調整 */
}

.btn-sns-line .icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 2px;
  vertical-align: middle;
}

.btn-sns-line .icon img {
  max-width: 100%;
  height: auto;
}

.btn-sub-blue {
  border: 1px solid #0b8aff;
  border-radius: 3px;
  color: #0b8aff;
  font-size: 12px;
  font-weight: normal;
  padding: 7px 8px;
  width: 80px;
}

@media screen and (max-width: 320px) {
  .btn-def {
    width: 95%;
    font-size: 15px;
  }

  .btn-def .sub {
    font-size: 11px;
    margin-top: 1px;
  }

  .btn-sub-blue {
    font-size: 12px;
  }
}

/* ----------------------------------------------------------------------
ステータスラベル
------------------------------------------------------------------------- */

/* label-status */
.label-status-wrap {
  display: flex;
  flex-wrap: wrap;
}

.label-status {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  border-radius: 2px;
  padding: 1px 5px;
}

.label-status+.label-status {
  margin-left: 5px;
}

.label-status.staStd {
  background: #f13970;
  border: 1px solid #f13970;
  color: #fff;
}

.label-status.staOn {
  border: 1px solid #f13970;
  color: #f13970;
}

.label-status.staOut {
  background: #e5e5e5;
  border: 1px solid #e5e5e5;
  color: #999;
}

.label-status.staRe {
  border: 1px solid #777;
  color: #555;
}

/* ----------------------------------------------------------------------
  form
------------------------------------------------------------------------- */
.error-message {
  color: #c00;
}

/* ----------------------------------------------------------------------
  Select
------------------------------------------------------------------------- */
::-ms-expand {
  display: none;
}

.search-box {
  border: 4px solid #ddd;
  border-radius: 4px;
  padding: 17px 14px;
  margin: 20px 0;
}

.search-box>.head {
  font-size: 12px;
  margin-bottom: 8px;
}

.search-box>.head::before {
  content: "";
  display: inline-block;
  border: 5px solid transparent;
  border-top: 8px solid #f13970;
  vertical-align: -4px;
  margin-right: 4px;
}

.search-box>.sub-item {
  border-top: 1px dashed #ddd;
  padding-top: 18px;
  margin-top: 18px;
}

.link-chat {
  font-size: 13px;
}

.link-chat .icon {
  width: 16px;
}

.search-form-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.search-form {
  outline: none;
  width: calc(100% - 53px);
  height: 46px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  padding: 10px;
}

.search-form::placeholder {
  color: #bdbdbd;
}

.search-form-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #f13970;
  border-radius: 4px;
}

/* セレクトフォーム(prof) */
.sort-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.select-form {
  outline: none;
  width: 100%;
  border: 1px solid #bebebe;
  background: #f9f9f9 url("../images/icon-arrow-ac.svg") no-repeat right 7px center / 8px auto;
  border-radius: 4px;
  color: #212121;
  font-size: 14px;
  padding: 13px 20px 13px 12px;
}

.sort-wrap.prof-sort-wrap {
  margin-bottom: 20px;
}

.prof-sort-wrap .select-form {
  background-position: right 6px center;
  font-size: 12px;
  padding: 13px 18px 13px 9px;
  letter-spacing: -0.05em;
}

.sort-wrap.prof-sort-wrap>.select-form-wrap {
  width: calc((64% / 2) - 7px);
}

.sort-wrap.prof-sort-wrap>.select-form-wrap:first-child {
  width: 36%;
}

.prof-sort-wrap .select-form-wrap:nth-of-type(n+2) {
  margin-left: 7px;
}

@media screen and (max-width: 360px) {
  .link-chat {
    font-size: 12px;
  }

  .link-chat .icon {
    width: 14px;
  }
}

@media screen and (max-width: 320px) {
  .search-box {
    padding: 12px;
  }

  .link-chat {
    font-size: 11px;
  }

  .prof-sort-wrap .select-form {
    font-size: 10px;
  }
}

/* ----------------------------------------------------------------------
  Radio Button
------------------------------------------------------------------------- */
.radio-button {
  position: relative;
  display: block;
  vertical-align: bottom;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 4px;
}

.radio-button:last-child {
  margin-bottom: 0;
}

.radio-button-input {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  background-color: transparent;
  vertical-align: top;
  width: 100%;
  height: 100%;
}

.radio-button-input:active,
.radio-button-input:focus {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ----------------------------------------------------------------------
  notice 通知
------------------------------------------------------------------------- */
.notice {
  box-shadow: none !important;
}

.notice span {
  line-height: 35px;
}

/* ----------------------------------------------------------------------
  カウンセラーのプロフィール  流用
------------------------------------------------------------------------- */
.prof-date {
  display: block;
}

.prof-date .name {
  font-size: 15px;
  font-weight: bold;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #212121;
  position: relative;
}

/* ルビ */
.prof-date .name span.ruby {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  font-weight: normal;
}

.prof-date .detail {
  color: #616161;
}

/* カウンセラーの写真 */
.photo-date {
  border: 1px solid #ddd !important;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border-radius: 50%;
  -webkit-border-top-left-radius: 50%;
  overflow: hidden;
  box-sizing: content-box;
}

.photo-date img {
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------------
  member-list-wrap (カウンセラーのメンバーリスト) 流用
------------------------------------------------------------------------- */
.member-list-wrap {
  display: block;
  position: relative;
}

.member-list-wrap .head {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.member-list-wrap .member-img {
  width: 78px;
  margin-right: 12px;
  position: relative;
}

.member-list-wrap .member-text {
  width: calc(100% - 90px);
  text-align: left;
  box-sizing: border-box;
}

.ruby {
  font-size: 10px;
  line-height: 1.5;
  color: #212121;
}

/* ----------------------------------------------------------------------
  bottom-element-wrap (下部要素) 流用
------------------------------------------------------------------------- */
.bottom-element-wrap {
  display: block;
  padding: 20px 0 10px;
  text-align: center;
}

.bottom-element-wrap .bottom-link a {
  color: #f06292;
  display: block;
  font-size: 13px;
  margin: 15px 0;
  text-decoration: underline;
}

/* ----------------------------------------------------------------------
  プログラムから探す（トップ）
------------------------------------------------------------------------- */
.list-counselingprogram-carousel {
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin: 0 -15px;
}

.list-counselingprogram-carousel>li {
  flex: 0 0 auto;
  width: 160px;
}

.list-counselingprogram-carousel>li:first-child {
  margin-left: 15px;
}

.list-counselingprogram-carousel>li:last-child {
  margin-right: 15px;
}

.list-counselingprogram-carousel>li+li {
  margin-left: 14px;
}

.list-counselingprogram-carousel a {
  display: block;
  background: #fff;
  border: 1px solid #666;
  border-radius: 10px;
  color: #212121;
  font-size: 13px;
  padding: 12px;
  text-decoration: none;
  height: 100%;
}

.list-counselingprogram-carousel a.carousel-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: #0b8aff;
  text-align: center;
  letter-spacing: 0;
}

.list-counselingprogram-carousel ul.program-tag {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  margin: 10px 0;
}

.list-counselingprogram-carousel ul.program-tag li {
  flex: 0 0 auto;
  border: #f13970 1px solid;
  background-color: #fff;
  color: #f13970;
  font-size: 11px;
  padding: 2px 5px;
}

.list-counselingprogram-carousel ul.program-tag li:not(:first-child) {
  flex: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 3px;
  margin-left: 6px;
}

.list-counselingprogram-carousel ul.program-tag li:nth-child(n + 3) {
  display: none;
}

/* ----------------------------------------------------------------------
  特集・コラム 記事関連一覧（トップ）
------------------------------------------------------------------------- */
.list-article>li+li {
  margin-top: 15px;
}

.article-link-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #333;
}

.article-link-top>.img {
  width: 60px;
  margin-right: 12px;
}

.article-link-top>.img img {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: cover;
}

.page-template-media .article-link-top>.text .label-new {
  font-size: 12px;
  padding: 0px 3px;
  margin-left: 6px;
}

.page-template-media .text>p {
  font-size: 14px;
  color: #222;
  margin-top: 0;
  font-weight: 400;
  line-height: 1.6;
}

.page-template-media .article-link-top>.img img {
  width: 64px;
  height: 64px;
  display: block;
  object-fit: cover;
}

.article-link-top>.text {
  width: calc(100% - 72px);
}

.article-link-top>.text .date {
  color: #9A9A9A;
  font-size: 12px;
  line-height: 19px;
  font-weight: 400;
  margin: 0;
}

/* NEWアイコン */
.article-link-top>.text .label-new {
  display: inline-block;
  background: #f13970;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  padding: 1px 5px;
  margin-left: 5px;
}

/* ----------------------------------------------------------------------
  カウンセラーとアドバイザーのアイコン
------------------------------------------------------------------------- */

/* カウンセラー・アドバイザーの表示 */
.prof-icon {
  font-size: 12px;
  margin-bottom: 5px;
}

.prof-icon img {
  width: 26px;
  height: 26px;
  vertical-align: -9px;
  margin-right: 5px;
}

/* 説明文 */
.counselor-adviser-explanation-area {
  display: flex;
  font-size: 10px;
  color: #666;
}

.counselor-adviser-explanation-area li:nth-of-type(n + 2) {
  margin-left: 15px;
}

.counselor-adviser-explanation-area img.icon {
  width: 20px;
  height: 20px;
  vertical-align: -7px;
  margin-right: 5px;
}

/* 写真 カウンセラーとアドバイザーのアイコン表示 */
.photo-prof-icon {
  position: relative;
}

.photo-prof-icon::after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  bottom: 0;
  right: 0;
}

.photo-prof-icon.icon-counselor::after {
  background: url(../images/icon-counselor.svg) no-repeat center bottom / 26px 26px;
}

.photo-prof-icon.icon-adviser::after {
  background: url(../images/icon-adviser.svg) no-repeat center bottom / 26px 26px;
}

/* アイコンサイズ20px用 */
.member-list-rev .photo-prof-icon::after,
.list-freec .photo-prof-icon::after,
.counselor-info .photo-prof-icon::after {
  width: 20px;
  height: 20px;
  right: 15px;
}

.member-list-rev .photo-prof-icon.icon-counselor::after,
.list-freec .photo-prof-icon.icon-counselor::after,
.counselor-info .photo-prof-icon.icon-counselor::after {
  background-size: 20px 20px;
}

.member-list-rev .photo-prof-icon.icon-adviser::after,
.list-freec .photo-prof-icon.icon-adviser::after,
.counselor-info .photo-prof-icon.icon-adviser::after {
  background-size: 20px 20px;
}

/* アイコンサイズコラム用 */
.column-counselor-area .photo-prof-icon::after {
  right: 7px;
  top: 42px;
}

/* ----------------------------------------------------------------------
  scroll カルーセル お気に入り/カテゴリー/新着カウンセラー
------------------------------------------------------------------------- */
.horizontal_scroll_wrap {
  overflow: hidden;
  margin: 0 -15px;
}

.scroll_lst {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.scroll_item {
  display: inline-block;
  width: 90px;
  text-align: center;
  vertical-align: top;
  margin-bottom: 5px;
}

.scroll_item:first-child {
  margin-left: 15px;
}

.scroll_item:last-child {
  margin-right: 15px;
}

.scroll_item+.scroll_item {
  margin-left: 15px;
}

.scroll_item_inr {
  display: block;
}

.scroll_item_img .photo-date {
  width: 90px;
  height: 90px;
  border: 1px solid #f0f0f0;
  border-radius: 999em;
  margin: 0 auto;
  overflow: hidden;
}

.scroll_item_img .photo-date.staOn {
  border-color: #f13970 !important;
}

.scroll_item .prof-date .name {
  font-size: 13px;
  margin-top: 10px;
}

.scroll_item .label-status-wrap {
  justify-content: center;
  margin-top: 10px;
}

/* scroll_category */
.photo-date-border {
  width: 90px;
  height: 90px;
  margin: 0 auto 3px;
  border-radius: 999em;
  overflow: hidden;
}

.photo-date-border img {
  width: 100%;
  height: auto;
}

.scroll_category .scroll_item:last-child a {
  color: #fff;
}

.scroll_category .scroll_item:last-child .photo-date-border {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #f788aa;
}

.scroll_category .scroll_item .prof-date .name {
  font-weight: normal;
}

@media screen and (max-width: 320px) {
  .scroll_item {
    width: 80px;
  }

  .scroll_item_img .photo-date,
  .photo-date-border {
    width: 80px;
    height: 80px;
  }

  .scroll_item .prof-date .name {
    font-size: 12px;
  }
}

/* ----------------------------------------------------------------------
  恋愛相談で多い悩み（トップ）
------------------------------------------------------------------------- */
.area-task {
  border: 1px #0c2b7c solid;
  border-radius: 5px;
  color: #0c2b7c;
  font-size: 14px;
  padding: 14px;
  margin: 14px 0;
}

.area-task li {
  position: relative;
  padding: 0 0 0 25px;
}

.area-task li+li {
  margin: 7px 0 0;
}

.area-task li::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: url("../images/icon-dissatisfied.svg") no-repeat;
  background-size: 20px 20px;
  top: 0;
  left: 0;
}

.area-freec {
  background: #f7f9fe;
  margin: 0 -15px;
  padding: 25px 13px 4px;
}

.area-freec:last-child {
  margin: 0 -15px -15px;
}

.ttl-freec {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  margin: 0 0 20px;
  line-height: 1.4;
}

.area-freec>ul>li {
  border: 1px #aaa solid;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

.area-freec>ul>li a {
  display: block;
  padding: 14px 14px 16px;
}

.area-freec ul li+li {
  margin: 18px 0 0 0;
}

.area-freec ul li a {
  color: #000;
}

.area-freec ul.freec-comment li dl dt {
  position: relative;
  text-decoration: underline;
  margin: 0 0 17px;
  padding: 0 0 0 30px;
  line-height: 1.5;
}

.area-freec ul.freec-comment li dl dt::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
}

.area-freec ul.freec-comment li dl dt.icon-woman::before {
  background: url("../images/icon-woman.svg") no-repeat;
  background-size: 20px 20px;
}

.area-freec ul.freec-comment li dl dt.icon-men::before {
  background: url("../images/icon-men.svg") no-repeat;
  background-size: 20px 20px;
}

.area-freec ul.freec-comment li dl dt.icon-user-gray::before {
  background: url("../images/icon-user-gray.svg") no-repeat;
  background-size: 20px 20px;
}

.area-freec ul.freec-comment li dl dd {
  font-size: 13px;
}

/* =========================================================
header
========================================================= */
#header {
  display: block;
  clear: both;
  margin: 0;
  padding: 0;
  position: relative;
}

#header .header-inner {
  height: 56px;
  border-bottom: 1px #e3e3e3 solid;
  background-color: #fff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 2px 7px;
}

#header .header-inner.is-main {
  height: auto;
  padding: 0 0 0 9px;
}

/* =========================================================
header(RE)
========================================================= */

/* 通常時ロゴ */
.header-L .button-logo {
  background: url("../images/sp/logo_koilabo_txt.svg") no-repeat center;
  width: 84px;
  height: 44px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  padding: 0 !important;
  display: block;
}

.header-L .button-logo-img img {
  width: 100%;
  vertical-align: middle;
}

.header-R {
  display: flex;
  font-size: 10px;
}

.header-R a {
  display: block;
}

#header.header-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
}

.header-R .hd-btn-login {
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  text-decoration: none;
  margin: 10px 16px;
}

.header-R .hd-btn-regist {
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.supTel {
  color: #777;
  padding: 9px 0 8px;
}

.supTel>.head {
  font-size: 11px;
  letter-spacing: -0.01em;
}

.supTel>.head::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 13px;
  background: url("../images/icon_contact_operator.svg") no-repeat;
  margin-right: 3px;
  margin-left: 2px;
  vertical-align: -3px;
}

.supTel .tel {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.supTel .time {
  font-size: 10px;
  font-weight: normal;
  margin-right: 3px;
  line-height: 1.2;
  vertical-align: 1px;
}

.contact-wrap a img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 320px) {
  .header-L .button-logo {
    width: 94px;
    height: 29px;
  }

  .supTel {
    padding: 7px 0 6px;
  }

  .supTel .tel {
    font-size: 11px;
  }

  .contact-wrap a img {
    width: 50px;
  }
}

/* ヘッダーLINE連携バナー、新規会員登録特典バナー
--------------------------------------------------------- */
.header-bnr-line a {
  display: block;
  background: #06c755;
}

.header-bnr-coupon-membership-benefits a {
  display: block;
  background: #0a55f6;
}

.header-bnr-line img,
.header-bnr-coupon-membership-benefits img {
  display: block;
  max-width: 600px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* クレカ未登録の方向けメッセージ
--------------------------------------------------------- */
.notice-card {
  background: #e3efff;
  text-align: center;
}

.notice-card a {
  color: #222;
  display: block;
  font-size: 11px;
  padding: 10px 0;
  text-decoration: none;
}

.notice-card a .alert-btn {
  display: inline-block;
  border: 1px solid #0b8aff;
  border-radius: 3px;
  color: #0b8aff;
  font-weight: bold;
  padding: 3px 7px 2px;
  margin-left: 5px;
}

.notice-card a .alert-btn::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  background: url("../images/icon-link-arrow-blue.svg") no-repeat center / cover;
  margin-left: 5px;
  vertical-align: -0.1em;
}

/* 未払いがある方向けメッセージ
--------------------------------------------------------- */
.notice-card-unpaid a {
  display: block;
  background: #f50505;
  color: #fff;
  font-size: 12px;
  padding: 8px 5px;
  text-align: center;
  text-decoration: none;
}

.notice-card-unpaid a .underline::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  background: url("../images/icon-link-arrow-white.svg") no-repeat center / cover;
  margin-left: 5px;
  vertical-align: -0.05em;
}

.notice-card-unpaid .icon-alert {
  display: inline-block;
  margin-right: 3px;
}

/* マイページ上の未払い通知エリア */
.notice-card-unpaid.card-border a {
  background: none;
  border: 2px solid #bf1145;
  color: #bf1145;
}

/* 個別フォローメッセージ
--------------------------------------------------------- */
.notice-follow-message {
  background: #f16292;
  text-align: center;
}

.notice-follow-message a {
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: bold;
  padding: 10px 5px;
  text-decoration: none;
}

@media screen and (max-width: 320px) {

  .notice-card a,
  .notice-card a .alert-btn,
  .notice-card-unpaid a,
  .notice-follow-message a {
    font-size: 10px;
  }

  .notice-card a .alert-btn {
    padding: 2px 6px;
  }

  .notice-card a .alert-btn::after {
    width: 5px;
    height: 9px;
  }

  .notice-card-unpaid .icon-alert {
    vertical-align: -1px;
  }
}

/* 上部アラートリンク（相談開始や通話かけ直し/アプリ再認証）
--------------------------------------------------------- */
.header-call-alert a {
  display: block;
  background: #f16292;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 10px 5px;
  text-align: center;
}

.header-call-alert a .icon-arrow::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  background: url("../images/icon-link-arrow-white.svg") no-repeat center / cover;
  margin-left: 5px;
  vertical-align: -0.05em;
}

.header-call-alert a .alert-btn {
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 3px 8px;
  margin-left: 5px;
}

.header-call-alert a .alert-btn::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 11px;
  background: url("../images/icon-link-arrow-white.svg") no-repeat center / cover;
  margin-left: 5px;
  vertical-align: -1px;
}

[class^="notice-"]+.header-call-alert {
  border-top: 1px solid #fff;
}

/* アプリ再認証モーダル */
.modal-content.about-alert-app-modal {
  display: block;
  z-index: 1000;
}

.modal-content.about-alert-app-modal>.head {
  padding: 12px 10px;
}

.about-alert-app-modal>.head .icon-notice::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/icon-alert_white.svg") no-repeat center;
  background-size: 20px auto;
  margin-right: 5px;
  vertical-align: -4px;
}

.modal_overlay_alert {
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 120%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

@media screen and (max-width: 320px) {
  .header-call-alert a {
    font-size: 10px;
  }

  .header-call-alert a .alert-btn {
    padding: 2px 6px;
  }

  .header-call-alert a .alert-btn::after {
    width: 5px;
    height: 9px;
  }
}

/* =========================================================
Footer
========================================================= */
#footer {
  display: block;
  clear: both;
  margin: 0;
  padding: 0;
  background: #fff;
  /* position: absolute; */
  /* left: 0; */
  /* bottom: -10px; */
  width: 100%;
  /* height: 110px; */
}

#footer-inner {
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  font-size: 11px;
  padding: 10px;
  text-align: center;
}

#footer-inner ul {
  display: inline;
}

#footer-inner ul li {
  display: inline-block;
  border-right: solid 1px #ccc;
  margin: 0 5px 0 0;
  padding: 0 5px 0 0;
  line-height: 1;
}

#footer-inner ul li:last-child {
  margin: 0;
  border-right: none;
}

#footer #companyinfo {
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 10px;
}

#footer #companyinfo #companyname {
  margin-bottom: 5px;
}

#footer .copyright {
  background: #f7739f;
  padding: 16px 0;
  text-align: center;
}

#footer .copyrightTxt {
  font-size: 11px;
  color: #fff;
}

#footer.footerMod #footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px #ccc solid;
}

#footer.footerMod #footer-nav li {
  width: 50%;
  text-align: center;
  border-right: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
}

#footer.footerMod #footer-nav li:nth-child(even) {
  border-right: none;
}

#footer.footerMod #footer-nav li a {
  color: #333;
  display: block;
  font-size: 12px;
  padding: 14px !important;
}

#footer.footerMod #footer-nav .icon-blank {
  margin-left: 5px;
  vertical-align: middle;
}

#footer.footerMod #footer-nav .icon-blank img {
  width: 12px;
}

.footerContact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #ffeef3;
  padding: 20px 10px;
  margin-top: 20px;
  text-align: center;
}

.footerContact>.content>.head {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 0;
}

.footerContact>.content>.head img {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.footerContact .contact-tel a {
  color: #333;
  font-size: 20px;
  font-weight: bold;
}

.footerContact .contact-tel .sub {
  font-size: 12px;
  font-weight: normal;
}

.footerContact .contact-mail {
  margin-top: 10px;
}

.footerContact .contact-mail a {
  background: #fff;
  border: 1px solid #8e8e8e;
  color: #333;
  padding: 12px 20px;
  width: 100%;
  line-height: 1.2;
}

.footerContact .contact-mail a img {
  display: inline-block;
  width: 18px;
  height: auto;
  margin-right: 7px;
  vertical-align: -0.2em;
}

.footerContact .contact-mail a .sub {
  display: inline-block;
}

.footerContact a.btn-contact-mail {
  width: 40px;
  margin: 0;
}

.footer-excite-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #f7739f;
  padding: 13px 10px 5px;
}

.footer-excite-link>li {
  margin: 3px 5px;
}

.footer-excite-link a {
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

.footer-sns {
  background: #f7739f;
  border-bottom: 1px solid #ffacc8;
  padding: 12px 10px 6px;
}

.footer-sns .list-sns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.footer-sns .list-sns>li+li {
  margin-left: 20px;
}

/* =========================================================
 pagetop
========================================================= */
#page-top {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 25;
}

#page-top a {
  display: block;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  width: 42px;
  height: 42px;
  position: relative;
}

#page-top a::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  position: absolute;
  top: 17px;
  left: 16px;
  transform: rotate(-45deg);
}

/* =========================================================
Main
========================================================= */
main {
  width: 100%;
  margin: 0 auto;
  display: block;
}

.wrap {
  display: block;
}

.wrap-inner {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 14px 0 0;
  background: #fff;
}

.wrap-inner.wrap-line {
  border-top: 1px solid #eaeaea;
}

/* ページ横余白調整 */
.page-padding {
  padding: 15px 15px;
}

/* =========================================================
top
========================================================= */

/* 共通（ゲスト時） */
.def-img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/*
top（通常時）
----------------------------------------------------------- */
.top-area-banner {
  margin-top: 20px;
}

.top-area-banner .slider-bnr {
  margin: 0 8px;
  padding-bottom: 10px;
}

.top-area-banner .slider-bnr img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
}

.top-area-banner.is-single .slider-bnr {
  margin: 0 15px;
  padding-bottom: 0;
}

.top-area-register {
  padding: 25px 15px 20px;
}

.top-area-register ul li {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.top-area-register ul li a.text-link {
  color: #333;
  display: inline-block;
  text-decoration: underline;
  margin-top: 15px;
}

.section__count-box {
  padding: 25px 15px 20px;
}


.top-area-register p {
  margin-top: 0;
}

@media screen and (max-width: 320px) {
  .top-area-register .xr {
    font-size: 16px;
  }
}

/* top（保有コイン）
--------------------------------------------------------- */
.area-coin {
  position: relative;
}

.area-coin .inner {
  margin: 30px 15px 0;
}

.area-coin .inner .area-coin-details {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid #ddd;
  background: #f8f8f8;
  border-radius: 10px;
}

.area-coin .inner a {
  color: #212121;
  font-size: 13px;
  height: auto;
  text-decoration: underline;
  letter-spacing: 0.05em;
  padding: 0 3px 0 0;
}

.area-coin .inner img {
  margin: 0 5px 0 2px;
}

.area-coin .num-coin {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.area-coin .balloon+.inner {
  padding-bottom: 70px;
}

.area-coin .balloon {
  position: absolute;
  width: 60%;
  border: 2px #f2185a solid;
  border-radius: 8px;
  text-align: center;
  padding: 5px 8px;
  color: #f2185a;
  font-size: 11px;
  font-weight: bold;
  line-height: 140%;
  top: 60px;
  left: 50%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  letter-spacing: -0.03em;
  transform: translateX(-50%);
}

.area-coin .animation_on {
  animation: fluffy 3s ease infinite;
  animation-iteration-count: 1;
}

.area-coin .balloon::before,
.area-coin .balloon::after {
  position: absolute;
  left: 50%;
  top: -50%;
  border: 10px solid transparent;
  content: '';
  height: 0;
  width: 0;
}

.area-coin .balloon::before {
  border-bottom-color: #f2185a;
  margin-left: -10px;
}

.area-coin .balloon::after {
  border-bottom-color: #fff;
  margin: 3px 0 0 -10px;
}

@keyframes fluffy {
  0% {
    transform: translateY(0);
  }

  5% {
    transform: translateY(0);
  }

  10% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-10px);
  }

  25% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-10px);
  }

  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

@media only screen and (min-width: 415px) and (max-width: 767px) {

  /* for Galaxy S9 plus */
  .area-coin .balloon {
    right: 38px;
  }
}

/* top（グロナビ）
--------------------------------------------------------- */
.nav-login {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  z-index: 5;
}

.nav-guest {
  position: relative;
  top: 0;
  z-index: 2;
}

nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

nav ul li {
  text-align: center;
  width: calc(100% / 5);
  position: relative;
}

nav ul li a {
  display: block;
  color: #555;
  font-size: 10px;
  letter-spacing: 0;
  padding: 11px 0 8px;
}

nav ul li a .icon {
  display: block;
  height: 18px;
  margin-bottom: 6px;
}

nav ul li.nav-current a {
  color: #f06292;
  font-weight: bold;
}

/* =========================================================
お知らせ
========================================================= */
.top-area-info {
  margin-bottom: 15px;
}

.top-area-info .info-date {
  color: #666;
  font-size: 11px;
  margin-bottom: 2px;
}

.top-area-info .info-text {
  color: #333;
}

.top-area-info a {
  text-decoration: underline;
}

/*
お知らせ（詳細）
----------------------------------------------------------- */
.info-contents p span {
  color: #999;
  display: block;
  font-size: 12px;
  margin: 20px 0 0 0;
  text-align: right;
}

/* =========================================================
myfile-detail （マイページTOP）
========================================================= */

/* マイページトップ（for 後払い改修）
------------------------------------------- */
.title-my h1 {
  font-size: 22px;
  padding: 36px 0 10px;
  text-align: center;
}

.alert-danger {
  background-color: #fff6f6;
  border: 1px #ca9695 solid;
  border-radius: 5px;
  color: #b2100d;
  font-size: 13px;
  padding: 10px;
  margin: 14px 0;
}

.alert-danger p {
  padding: 0 !important;
}

.alert-notice {
  background: #fff8f8;
  border-radius: 4px;
  padding: 15px 16px;
}

.alert-notice a.text-alert-icon::before {
  top: 0;
}

/* コイン
------------------------------------------- */
table.coin_limit {
  width: 100%;
  margin: 30px 0 10px 0;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: solid 1px #e7e7e7;
  border-right: solid 1px #e7e7e7;
}

table.coin_limit th {
  border-bottom: solid 1px #e7e7e7;
  border-left: solid 1px #e7e7e7;
  margin: 0;
  padding: 5px;
  text-align: left;
  font-weight: bold;
  background-color: #f5f5f5;
}

table.coin_limit td {
  border-bottom: solid 1px #e7e7e7;
  border-left: solid 1px #e7e7e7;
  margin: 0;
  padding: 5px;
  background-color: #fff;
}

/* =========================================================
rev (口コミ)
========================================================= */

.member-list-rev {
  display: block;
}

.member-list-rev>li+li {
  margin-top: 15px;
}

.rev-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.rev-box a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #f8f8f8;
  border-radius: 5px 5px 0 0;
  color: #212121;
  font-size: 12px;
  padding: 10px 25px 10px 15px;
  text-decoration: none;
  position: relative;
}

.rev-box a::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: rotate(45deg) translateY(-50%);
}

.rev-box .photo {
  width: 55px;
  height: 55px;
  border-radius: 999em;
  margin-right: 15px;
  overflow: hidden;
}

.rev-box .counselor-name {
  font-size: 15px;
  font-weight: bold;
}

.rev-box .rev-content {
  padding: 10px 15px;
}

.rev-box .rev-user {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  color: #777;
  font-size: 12px;
  margin-top: 10px;
}

.rev-box .rev-user>span+span {
  margin-left: 10px;
}

.rev-box .rev-user .user-photo img {
  display: block;
  width: 20px;
  height: 20px;
}

/* =========================================================
tweet (つぶやき)
========================================================= */

/* つぶやきリスト */
.tweet-wrap li {
  border-top: 1px solid #ddd;
}

.tweet-top {
  margin: 0 -15px;
}

.tweet-wrap.tweet-top li:last-child {
  border-bottom: 1px solid #ddd;
}

.tweet-list-wrap {
  display: block;
  position: relative;
  padding: 8px;
  overflow: hidden;
  min-height: 70px;
}

.tweet-list-wrap .member-img {
  float: left;
  width: 52px;
  position: relative;
}

.tweet-list-wrap .member-img .photo-date {
  width: 48px;
  height: 48px;
}

.tweet-list-wrap .member-text {
  float: right;
  text-align: left;
  width: 100%;
  margin-left: -58px;
  padding-left: 58px;
  box-sizing: border-box;
}

.tweet-list-wrap .member-text dl {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding-bottom: 8px;
}

.tweet-list-wrap .member-text dl dt {
  padding-right: 8px;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 128px;
  color: #000;
}

.tweet-list-wrap .member-text dl dd {
  color: #616161;
  font-size: 11px;
  letter-spacing: -0.05px;
}

.tweet-list-wrap .member-text p {
  font-size: 12px;
  font-weight: 200;
  line-height: 1.5;
  color: #616161;
}

a.tweet-list-wrap {
  padding-right: 30px;
}

a.tweet-list-wrap::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  transform: rotate(45deg);
  position: absolute;
  top: 42%;
  right: 10px;
}

.tweet-time {
  text-align: right;
  color: #616161;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: -0.3px;
}

/* =========================================================
第３下層 (設定/my/help/登録/エラーなど) 既存css流用
========================================================= */
h1.ttl {
  font-size: 18px;
  padding: 14px;
  letter-spacing: 1px;
}

h2.ttl {
  font-size: 18px;
  padding: 14px;
  letter-spacing: 1px;
}

.ttl-section {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 18px;
}

.note {
  padding: 10px;
}

.option {
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  margin: 8px 0;
  padding: 15px;
  font-size: 12px;
}

h3.subject {
  font-size: 14px;
  font-weight: 700;
  margin: 8px 0;
}

/* ===========  form-wrap（login）  =========== */
.form-wrap-login ul li {
  padding: 10px 20px 6px;
}

.form-wrap-login span,
.form-wrap p {
  display: inline-block;
}

/* ===========  form-wrap（form全体）  =========== */
.form-wrap ul li {
  padding: 10px 16px 20px;
  border-top: 1px dotted #cbc8c2;
}

.form-wrap ul li:nth-child(2n) {
  background: #fafafa;
}

.form-wrap ul li:last-child {
  border-bottom: 1px dotted #cbc8c2;
}

.form-wrap span,
.form-wrap p {
  display: inline-block;
}

.form-wrap p.fcolor-alert,
.form-wrap p.fcolor-alert span {
  display: initial;
}

.form tr {
  border-bottom: 1px dotted #cbc8c2;
}

.form tr td {
  vertical-align: middle;
  padding-top: 8px;
  padding-bottom: 8px;
}

.form tr td span {
  font-size: 11px;
  display: block;
}

.form tr td input[type="text"] {
  margin: 0;
}

.form tr td label {
  display: inline-block;
  font-size: 12px;
}

.form tr th {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 24%;
}

.form tr th span {
  font-size: 11px;
  display: block;
  margin-top: 4px;
}

.form select {
  font-size: 14px;
  border: 1px solid #d9d9d9;
  background: #fff url(../images/arrow.png) no-repeat right 3px center;
  background-size: 10px auto;
  border-radius: 4px;
  color: #212121;
  padding: 5px 10px 5px 5px;
  min-height: 33px;
}

.birth-date {
  display: flex;
}

.birth-date>.form+.form {
  margin-left: 8px;
}

.birth-date>.form select {
  margin-right: 3px;
  width: 80px;
}

@media screen and (max-width: 320px) {
  .birth-date>.form select {
    width: 72px !important;
  }
}

.form input {
  padding: 2%;
  width: 100%;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
}

.form input::placeholder {
  color: #bdbdbd;
}

.form.is-text {
  display: flex;
  align-items: flex-end;
}

.form.is-text>span {
  display: inline-block;
  margin-left: 5px;
}

.form input[type="radio"],
.form input[type="checkbox"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  margin-right: 0.5em;
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

.form input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
  display: inline-block;
  width: initial;
  margin: 4px 8px;
}

.form input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  display: inline-block;
  width: initial;
  margin: 4px 8px;
}

.form label {
  display: inline-block;
  padding-right: 10px;
}

/* 新規会員登録フォーム：性別 */
.form input.input-gender {
  display: none;
}

input.input-gender+label {
  display: inline-block;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  color: #999;
  width: 80px;
  padding: 6px 0 5px;
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
}

/* 選択時 */
input.input-gender:checked+label {
  border-color: #f2185a;
  color: #f2185a;
}

/* 新規会員登録フォーム：同意チェックボックス */
label.checkbox-item {
  padding-right: 0;
}

.checkbox-item input {
  display: none !important;
}

.checkbox-item .checkbox-text {
  display: inline-block;
  position: relative;
  padding-left: 28px;
  cursor: pointer;
}

.checkbox-item .checkbox-text::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
}

.checkbox-item input:checked+.checkbox-text::before {
  border-color: #f13970;
}

.checkbox-item input:checked+.checkbox-text::after {
  content: "";
  width: 9px;
  height: 14px;
  border-bottom: 4px solid #f13970;
  border-right: 4px solid #f13970;
  position: absolute;
  top: 2px;
  left: 5px;
  transform: rotate(45deg);
}

/* ラジオボタン（ピンク） */
.radio-item input,
.form .radio-item input {
  display: none;
}

.radio-item .radio-text {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.radio-item .radio-text::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 999em;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.radio-item input:checked+.radio-text::before {
  border-color: #f13970;
}

.radio-item input:checked+.radio-text::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #f13970;
  border-radius: 999em;
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
}

/* 選択不可の場合（:disabled） */
.radio-item input:disabled+.radio-text {
  color: #ccc;
  cursor: default;
}

.radio-item input:disabled+.radio-text::before {
  border-color: #e0e0e0;
  background: #ebebeb;
}

.formBtn {
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
  cursor: pointer;
  height: 44px;
  line-height: 40px;
  padding: 0 1.5rem;
  font-size: 16px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  user-select: none;
  border-radius: 20px;
  transition: all 0.3s ease-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.225);
  color: #f06292;
  background-color: #fff;
  border: 2px solid #ccc;
  margin: 8px 0;
}

textarea {
  width: 96%;
  padding: 2%;
  font-size: 16px;
  color: #212121;
  background-color: #fff;
  border: solid 1px #d9d9d9;
  margin: 5px 0;
  padding-right: 7px;
  border-radius: 5px;
}

.textarea-wrap textarea {
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 10px;
}

.textarea-wrap textarea::placeholder {
  color: #bdbdbd;
}

/* 必須ラベル */
.indispensable-label {
  display: inline-block;
  background: #f13970;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 10px;
}

.form .checkbox {
  display: flex;
  justify-content: flex-start;
}

.form .radio {
  display: flex;
  justify-content: flex-start;
}

label.men {
  background: none repeat scroll 0 0 #42a5f5;
  padding: 7px;
  float: left;
  width: 46%;
  margin: 4px 2%;
  text-align: center;
  font-size: 12px;
  border-radius: 8px;
  color: #fafafa;
}

.button-form {
  margin: 8px auto;
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
  cursor: pointer;
  height: 44px;
  line-height: 40px;
  padding: 0 1.5rem;
  font-size: 16px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  user-select: none;
  border-radius: 20px;
  transition: all 0.3s ease-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.225);
  color: #f06292;
  background-color: #fff;
  border: 2px solid #ccc;
}

input.button-form {
  margin: 8px auto;
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
  cursor: pointer;
  height: 44px;
  line-height: 40px;
  padding: 0 1.5rem;
  font-size: 16px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  user-select: none;
  border-radius: 20px;
  transition: all 0.3s ease-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.225);
  color: #f06292;
  background-color: #fff;
  border: 2px solid #ccc;
}

div#co_profile,
div.costTable {
  overflow: hidden;
  padding: 10px;
}

div.co_profile_m img,
div.costImg img {
  float: left;
  margin-right: 10px;
  padding: 2px;
  border: #dededa 1px solid;
}

p.co_name {
  font-size: 18px;
  font-weight: 500;
  color: #212121;
  padding-bottom: 8px;
  margin: 0 0 10px 110px;
  border-bottom: 1px dotted #cbc8c2;
}

span.txB {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #212121;
  margin: 0 0 5px 95px;
  border-bottom: 1px dotted #cbc8c2;
}

.p_wid {
  font-size: smaller;
}

.call_back {
  display: none;
}

.disc li {
  list-style-type: disc;
  margin-left: 20px;
  margin-top: 5px;
  border-top: none !important;
  background: none !important;
}

/* メールボックス
--------------------------------------------------------- */
.pro_tx_m {
  font-size: 12px;
}

.error {
  border: 2px solid #ba2d65;
  border-radius: 8px;
  padding: 10px;
  background: #fafafa;
}

/* =========================================================
 待機リクエスト
========================================================= */

/* modal */
#modal_overlay {
  z-index: 10;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal_content {
  display: none;
  z-index: 20;
  position: fixed;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  width: 84%;
  padding: 20px 10px;
}

.modal_content .photo-date {
  margin-bottom: 16px;
  margin-top: 16px;
}

.modal_content p {
  margin-bottom: 8px;
  font-size: 12px;
}

/* 新モーダル */
.modal-content {
  display: none;
  width: 90%;
  background: #fff;
  border-radius: 10px;
  position: fixed;
  top: calc(50% - 20px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}

.modal-close-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 999em;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: -10px;
  right: -10px;
}

.modal-close-icon::before,
.modal-close-icon::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 4px;
  background: #777;
  position: absolute;
  top: 13px;
}

.modal-close-icon::before {
  transform: rotate(45deg);
  right: 6px;
}

.modal-close-icon::after {
  transform: rotate(-45deg);
  left: 6px;
}

.modal-content>.head {
  background: #f13970;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

.modal-content>.content {
  max-height: 75vh;
  overflow-y: auto;
  border-radius: 0 0 10px 10px;
}

.modal-content>.content .content-inner {
  padding: 20px 15px;
}

.modal-wrap+.modal-wrap {
  border-top: 1px dashed #777;
  padding-top: 25px;
  margin-top: 25px;
}

.ttl-modal {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

@media screen and (max-width: 320px) {
  .modal-content {
    font-size: 13px;
  }

  .modal-content>.content {
    max-height: 400px;
  }

  .ttl-modal {
    font-size: 15px;
  }
}

/* =========================================================
 ヘルプ
========================================================= */
.help-wrap-inner {
  margin: auto auto;
  padding: 16px 0;
  text-align: center;
}

.help-wrap-inner hr {
  width: 72%;
  border-top: 1px solid #ccc;
  margin: 0 auto;
}

.help-wrap-inner h1 {
  padding: 0 0 32px;
  line-height: 24px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  width: 72%;
  margin: 0 auto;
}

.help-wrap-inner .help-list {
  display: block;
  width: 100%;
}

.help-wrap-inner .help-list li {
  display: block;
}

.help-wrap-inner .help-list li a {
  color: #212121;
  display: block;
  width: 100%;
  line-height: 5.2em;
}

.help-wrap-inner .help-list li span {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin: 0 auto;
  max-width: 72%;
  width: 100%;
  text-align: left;
}

.help-wrap-inner .title {
  padding: 8px 0 0;
  letter-spacing: 0.1em;
  text-align: center;
}

/* 特商法
--------------------------------------------------------- */
ul.tokusyoho {
  margin: 0;
}

ul.tokusyoho li {
  padding: 20px 10px;
  border-bottom: 1px dotted #bfbfbf;
}

ul.tokusyoho li:last-child {
  border-bottom: none;
}

ul.tokusyoho li h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}

/* 利用規約
--------------------------------------------------------- */
ul#disclaimer h3 {
  padding-bottom: 8px;
}

ul#disclaimer>li {
  list-style-type: none;
}

ul#disclaimer>li+li {
  margin-top: 20px;
}

ul#disclaimer ol>li {
  list-style-type: decimal;
  margin: 0 0 15px 32px;
}

ul.disclaimer_ul>li {
  list-style-type: none;
  margin-bottom: 0.7em;
  word-wrap: break-word;
}

dl#disclaimer_partner,
dl#disclaimer_hist {
  margin: 0.7em 0;
}

dl#disclaimer_partner dd {
  margin: 0 2em;
}

dl#disclaimer_hist {
  margin-top: 4em;
}

dl#disclaimer_hist dd {
  margin: 0 2em;
}

table.progress {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
}

table.progress td {
  background: #fce4ec;
  color: #b3b3b3;
  width: 120px;
  height: 44px;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 44px;
  position: relative;
  padding-left: 16px;
}

table.progress td.here {
  background: #ffb2dd;
  color: #fff;
  width: 120px;
  height: 24px;
  position: relative;
  padding-left: 16px;
}

table.progress td.goal {
  background: #fff;
  color: #ba2d65;
  width: 110px;
  height: 24px;
  position: relative;
  padding-left: 16px;
}

table.progress td::after {
  border: 12px solid transparent;
  border-left-color: #fce4ec;
  left: 100%;
  top: 50%;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  margin-top: -12px;
  z-index: 1;
}

table.progress td.here::after {
  border: 12px solid transparent;
  border-left-color: #ffb2dd;
  left: 100%;
  top: 50%;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  margin-top: -12px;
  z-index: 1;
}

table.progress td.goal::after {
  border: 12px solid transparent;
  border-left-color: #fff;
  left: 100%;
  top: 50%;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  margin-top: -12px;
  z-index: 1;
}

/* 登録完了
--------------------------------------------------------- */
.option-box {
  margin: 10px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  background-color: #fafafa;
  border-radius: 8px;
}

.caP {
  padding: 10px;
  font-size: 12px;
  line-height: 18px;
}

.caP b {
  font-size: 16px;
}

/* 申し込み
--------------------------------------------------------- */
div.application {
  margin: 16px 0;
  padding: 10px;
  border: 1px solid #e5e5e5;
  background-color: #fafafa;
  border-radius: 8px;
}

div.application ol {
  padding-left: 24px;
}

div.application ul {
  padding-left: 24px;
}

div.application li {
  list-style: initial;
}

/* 申し込み情報
--------------------------------------------------------- */
dl.date dt {
  float: left;
  display: block;
  background: #f06292;
  width: 50px;
  height: 22px;
  line-height: 22px;
  font-size: 10px;
  text-align: center;
  color: #fff;
  margin-right: 8px;
  border-radius: 3px;
}

dl.date dd {
  display: block;
  height: 25px;
  font-size: 12px;
  padding-top: 0;
}

dl.date_ex {
  margin-bottom: 8px;
  overflow: hidden;
}

dl.date_ex dt {
  float: left;
  display: block;
  background: #f06292;
  color: #fff;
  width: 80px;
  height: 22px;
  line-height: 22px;
  font-size: 10px;
  text-align: center;
  margin-right: 8px;
  border-radius: 3px;
}

dl.date_ex dd {
  display: block;
  height: 25px;
  font-size: 12px;
  padding-top: 0;
}

/* セレクトボックス
--------------------------------------------------------- */
ul.select {
  width: 100%;
  margin-top: 10px;
}

ul.select li p {
  float: left;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  margin-right: 20px;
}

ul.select li select {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  border-radius: 5px;
  width: 85%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  color: black;
  background: white;
  border: solid 1px #dededa;
  margin: 5px 0;
  padding: 0 10px;
}

@media screen and (max-width: 320px) {
  ul.select li select {
    width: 82%;
  }
}

div.select-half {
  overflow: hidden;
}

div.select-wrap {
  display: inline-block;
  position: relative;
}

div.select-wrap:first-child select {
  margin-left: 0 !important;
}

div.select-wrap::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #616161;
  border-bottom: 2px solid #616161;
  transform: rotate(45deg);
  position: absolute;
  top: 23px;
  right: 20px;
}

div.select-half select {
  padding-right: 32px;
  padding-left: 8px;
  background: #fff url(../images/arrow.png) no-repeat right 3px center;
  background-size: 10px auto;
  border-radius: 5px;
  height: 40px;
  font-size: 14px;
  font-weight: bold;
  color: #212121;
  border: solid 1px #dededa;
  margin: 5px 5px 5px 0;
}

/* 音声プロフィール
--------------------------------------------------------- */
button {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.audio {
  position: absolute;
  right: 45px;
  bottom: 10px;
}

@media screen and (max-width: 320px) {
  .audio {
    position: absolute;
    right: 20px;
    bottom: 10px;
  }
}

@media screen and (min-width: 390px) {
  .audio {
    position: absolute;
    right: 60px;
    bottom: 10px;
  }
}

.audio_hidden {
  display: none;
}

/* メッセージ */
.message_new_badge {
  width: 12px;
  height: 12px;
  background: #f50505;
  border: 1px solid #fff;
  border-radius: 999em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 4px;
  right: 4px;
}

/* メールボックス
--------------------------------------------------------- */

/* メッセージ詳細 */
.alert-icon {
  display: inline-block;
  border: 1px solid #f50505;
  border-radius: 999em;
  color: #f50505;
  font-size: 12px;
  font-weight: normal;
  padding: 1px 7px;
  text-align: center;
}

.icon-unread {
  display: inline-block;
  background: #f50505;
  border-radius: 999em;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  margin-right: 8px;
  text-align: center;
}

.icon-unread.is-white {
  background: #fff;
  color: #f50505;
}

/* ぱんくずリスト
--------------------------------------------------------- */
.breadcrumbs {
  color: #333;
  font-size: 13px;
  margin: 30px 0 17px 15px;
  overflow: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  -webkit-overflow-scrolling: touch;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li a {
  display: flex;
  align-items: center;
  color: #333;
}

.breadcrumbs li::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #ddd;
  border-right: 2px solid #ddd;
  transform: rotate(45deg);
  margin: 0 9px 0 6px;
}

.breadcrumbs li:last-child::after {
  display: none;
}

/* LINEログイン周り（ログイン、新規登録、登録情報変更）
--------------------------------------------------------- */

/* コインについて モーダル */

/* リンク風ボタン */
button.link-btn {
  font-size: 14px;
  cursor: pointer;
  border: none;
  background: none;
  color: #ba2d65;
  padding: 0;
  letter-spacing: 0.1em;
}

/* モーダルテキストボタン */
button.modal-btn {
  display: block;
  color: #0b8aff;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

button.modal-btn .icon-modal {
  vertical-align: -3px;
  margin-left: 5px;
}

button.modal-btn.c {
  margin: 0 auto;
}

/* マイページ下層ナビ
--------------------------------------------------------- */
.my-menu-area .btn-pink-border {
  width: 60%;
}

.my-menu-area ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 30px 0 0;
}

.my-menu-area ul li {
  display: inline-block;
  height: 120px;
  width: 33.333%;
  text-align: center;
  border-top: 1px #ccc solid;
  border-right: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
}

.my-menu-area ul li:nth-of-type(3),
.my-menu-area ul li:nth-of-type(6) {
  border-right: none;
}

.my-menu-area ul li:nth-child(-n+3) {
  border-bottom: none;
}

.my-menu-area ul li a {
  display: block;
  height: 120px;
  color: #333;
  padding: 20% 0 0 0;
  font-size: 13px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 320px) {
  .my-menu-area ul li a {
    font-size: 12px;
  }
}

.my-menu-area ul li a span {
  display: block;
  padding: 8px 0 0;
}

/* 新規登録とログイン
------------------------------------------ */
.regist-area {
  text-align: center;
  padding: 50px 0;
}

.regist-area small {
  display: block;
  margin: 5px 0;
  letter-spacing: -0.01em;
}

/*
キャンペーンコイン付与表示
*/
.coin-campaign-notice {
  border-width: 3px;
  border-style: solid;
  border-color: red;
  border-radius: 7px;
  margin: 5px;
  padding: 5px;
}

.coin-campaign-notice p {
  text-align: center;
  color: red;
}

/* LINEバナー */
a.line-bnr {
  display: block;
  margin: 20px auto;
  text-align: center;
  width: 90%;
}

/* freecのサマリー
--------------------------------------------------------- */
.summary-area {
  background: #fff0f5;
  border-radius: 5px;
  font-size: 13px;
  line-height: 160%;
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px #f06292 solid;
}

.summary-title {
  color: #f06292;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: -0.02em;
  line-height: 160%;
  margin: 0 0 5px;
  position: relative;
}

/* chatBot 位置調整
--------------------------------------------------------- */
@media screen and (min-width: 0) and (max-width: 767px) {
  #chat_badge_ai {
    right: 3px !important;
    bottom: 65px !important;
  }
}

/* 相談終了後 初再訪時モーダル（お気に入り増）
--------------------------------------------------------- */
.about-call-done-fav-modal {
  display: block;
  z-index: 1000;
}

.about-call-done-fav-modal>.head {
  font-size: 15px;
}

.about-call-done-fav-modal .counselor-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}

.about-call-done-fav-modal .counselor-info>.photo {
  width: 90px;
  height: 90px;
  border: 1px solid #d0dcf4;
  border-radius: 999em;
  overflow: hidden;
  margin-right: 20px;
}

.about-call-done-fav-modal .counselor-info .name {
  font-size: 16px;
  margin-bottom: 5px;
}

.about-call-done-fav-modal .counselor-info .info-text {
  width: auto;
}

.about-call-done-fav-modal .btn-def>span {
  vertical-align: -2px;
  margin-right: 10px;
}

/* 初再訪時モーダルの背景 */
.modal_overlay_fav {
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 120%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

/* ご利用上の注意事項
--------------------------------------------------------- */
.attention {
  border-top: 1px #ccc solid;
  padding: 15px;
  font-size: 12px;
}

.attention li {
  line-height: 160%;
}

.attention li a {
  color: #333;
}

.attention li small {
  color: #666;
  display: block;
  line-height: 140%;
}

/* トップページ（クーポン）
--------------------------------------------------------- */
.coupon-news a {
  color: #ee3255;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  text-decoration: underline;
  position: relative;
}

.coupon-news a span {
  text-indent: 20px;
}

.coupon-news a::before {
  content: "";
  background: url("../images/icon-alert-circle.svg") no-repeat;
  width: 16px;
  height: 16px;
  margin-right: 3px;
  position: absolute;
  top: 4px;
}

.scroll_item-coupon {
  display: inline-block;
  vertical-align: top;
  margin: 0 23px 5px 0;
}

.scroll_item-coupon a {
  text-decoration: none;
}

.scroll_item-coupon:first-child {
  margin-left: 15px;
}

.scroll_item-coupon:last-child {
  margin-right: 25px;
}

.scroll_item-coupon .coupon-list-detail {
  display: flex;
}

.scroll_item-coupon .coupon-list-detail .coupon-data {
  background: #fff;
  border-top: #e9f0ff 1px solid;
  box-shadow: 8px 0 12px rgba(57, 48, 109, 0.2);
  font-size: 12px;
  padding: 10px;
  width: 152px;
  position: relative;
}

.scroll_item-coupon .coupon-list-detail .coupon-data::after {
  content: "";
  background: linear-gradient(45deg, #fff 50%, transparent 52%), linear-gradient(315deg, transparent 50%, #fff 52%);
  background-size: 30px 12px;
  position: absolute;
  top: 0;
  right: -20px;
  height: 100%;
  width: 30px;
}

.scroll_item-coupon .coupon-list-detail .coupon-data .coupon-name {
  color: #333;
  line-height: 150%;
  padding-top: 5px;
  white-space: normal;
}

.scroll_item-coupon .coupon-list-detail .coupon-img,
.scroll_item-coupon .coupon-list-detail .coupon-img img {
  width: 84px;
  height: 84px;
}

.scroll_item-coupon .coupon-list-detail .coupon-data .coupon-available {
  color: #576574;
  font-size: 10px;
}

.scroll_item-coupon .coupon-list-detail .coupon-data .icon_coupon-clock::before {
  content: url("../images/icon-time-gray.svg");
  display: inline-block;
  vertical-align: middle;
}

.coupon-limit-badge-finish {
  content: "もうすぐ終了";
  background: #246dfc;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  display: inline-block;
  padding: 1px 8px;
}

.coupon-limit-badge-less {
  content: "残りわずか";
  background: #246dfc;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  display: inline-block;
  padding: 1px 8px;
}

.error404 {
  padding-bottom: 200px;
}

/* 詳細ページ */

p {
  font-size: 14px;
  margin-top: 20px;
}

.article-supervisor-prof-url {
  font-size: 14px;
  color: #0b8aff;
  transition: all .3s;
  position: relative;
  padding-right: 5px;
  display: inline-block;
  margin-top: 20px;
}

a.text-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #0b8aff;
  padding-right: 5px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 20px;
}

a.text-link:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  margin: auto;
  width: 96%;
  height: 1px;
  background: #0b8aff;
}

a.text-link:after {
  content: "";
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-top: 3px solid #0b8aff;
  border-right: 3px solid #0b8aff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

a.text-link:hover {
  opacity: 0.7;
  text-decoration: none;
}

.single-post .contents-body .highlights {
  font-weight: bold;
  background: linear-gradient(transparent 70%, #fff383 10%);
}

.single .contents-body .highlights {
  font-weight: bold;
  background: linear-gradient(transparent 70%, #fff383 10%);
}

.single .contents-body .pink {
  font-weight: bold;
  color: #F13970;
}

.single .contents-body h4+.contents-body ul {
  margin-top: 10px;
}


/* .single-post .contents-body {
  font-family: Roboto;
} */

.single-post .contents-body h2 {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  padding-left: 17px;
  margin-bottom: 20px;
  margin-top: 50px;
}

.single-post .contents-body h2:before {
  content: "";
  width: 6px;
  height: 100%;
  background: #f13970;
  position: absolute;
  left: 0;
  border-radius: 5px;
  top: 0;
}

.single-post .contents-body h3 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #212121;
  padding-bottom: 4px;
  margin-bottom: 20px;
  margin-top: 40px;
}

.single-post .contents-body h4 {
  font-size: 14px;
  font-weight: bold;
  padding: 2px 7px;
  background: #f4f7ff;
  margin-bottom: 12px;
  margin-top: 20px;
}

/*  */
.single .contents-body h2 {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  padding-left: 17px;
  margin-bottom: 20px;
  margin-top: 50px;
}

. .single .contents-body h2:before {
  content: "";
  width: 6px;
  height: 100%;
  background: #f13970;
  position: absolute;
  left: 0;
  border-radius: 5px;
  top: 0;
}

.single .contents-body h3 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #212121;
  padding-bottom: 4px;
  margin-bottom: 20px;
  margin-top: 40px;
}

.single .contents-body h4 {
  font-size: 14px;
  font-weight: bold;
  padding: 2px 7px;
  background: #f4f7ff;
  margin-bottom: 12px;
  margin-top: 20px;
}

.counselor-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.5;
  margin-top: 20px;
}


.kv-area img {
  max-width: 345px;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 500px) {
  .kv-area img {
    max-width: inherit;
  }
}

.contents-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  margin-top: 0;
}

.contents-body .counselor-list {
  display: flex;
  margin-bottom: 40px;
  gap: 0 14px;
  overflow-x: auto;
  margin-top: 0;
}

.contents-body .counselor-list li {
  border: 1px #ddd solid;
  border-radius: 5px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 160px;
  padding: 0;
}

.contents-body .counselor-list li:before {
  display: none;
}

.contents-body .counselor-list li a {
  color: #333;
  display: block;
  padding: 20px 22px 16px;
  text-decoration: none;
}

.label-status-wrap {
  display: flex;
  flex-wrap: wrap;
}

.label-status.staStd {
  background: #f13970;
  border: 1px solid #f13970;
  color: #fff;
}

.label-status.staRe {
  border: 1px solid #777;
  color: #555;
}

.counselor-list .photo-date {
  border: 1px solid #f0f0f0;
  border-radius: 999em;
  width: 116px;
  height: 116px;
  margin: auto;
  overflow: hidden;
}

.counselor-list p.name {
  font-size: 16px;
  margin-top: 10px;
  font-weight: bold;
  margin-bottom: 7px;
  line-height: 1.5;
  text-align: center;
}

.counselor-list .category {
  color: #666;
  font-size: 12px;
  text-align: left;
  min-height: 39px;
}

.counselor-list li .category::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(../img/item/icon-tag-category.svg) no-repeat;
  vertical-align: -0.2em;
  margin-right: 4px;
}

.counselor-list li .category>span+span::before {
  content: "/";
  display: inline-block;
  padding-right: 3px;
}

.counselor-list li .text-link-arrow {
  color: #f13970;
  font-size: 12px;
  margin-top: 14px;
  white-space: nowrap;
}

.counselor-list li .text-link-arrow::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 9px;
  background: url(../img/item/icon-link-arrow-pink.svg) no-repeat center / cover;
  margin-left: 3px;
}

.counselor-list .photo-date img {
  max-width: 100%;
  height: 160px;
  object-fit: cover;
}

img.alignnone.size-medium {
  width: 100%;
  max-width: 345px;
  margin: auto;
  height: auto;
  text-align: center;
  display: block;
}

@media screen and (max-width: 500px) {
  img.alignnone.size-medium {
    max-width: inherit;
  }
}


.cta-pro-btn {
  margin: 40px 0 50px;
}

.single-post .contents-body .cta-title-pro {
  text-align: center;
  margin-top: 0;
  font-size: inherit;
}

.single .contents-body .cta-title-pro {
  text-align: center;
  margin-top: 0;
  font-size: inherit;
}

.contents-body ol {
  margin-top: 20px;
  padding-left: 16px;
}

.contents-body ol li {
  list-style-type: decimal;
}

.contents-body ul {
  margin-top: 20px;
}

.contents-body ul li {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #212121;
  position: relative;
  padding-left: 12px;
}

.contents-body ul li:before {
  content: "";
  position: absolute;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #666666;
  border-radius: 50%;
  left: 0;
}

.btn-line {
  gap: 0 5px;
  background: #06C755;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-creator {
  margin: 30px auto 50px;
}

.article-creator-catch {
  display: grid;
  grid-template-columns: 56px auto;
  align-items: center;
  gap: 0 12px;
}

.article-creator-img {
  border: 1px solid #D5DCEB;
  border-radius: 50%;
  width: 56px;
  height: 56px;
}

.article-creator-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

.article-creator-title {
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}

.article-creator-text {
  margin-top: 13px;
}

.article-table {
  margin: 20px 0 40px;
}

.article-table tr {
  border-bottom: 1px solid #fff;
}

.article-table th {
  background: #53597E;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
  width: 110px;
  vertical-align: middle;
}

.article-table td {
  background: #F7F9FE;
  color: #212121;
  font-size: 12px;
  line-height: 1.6;
  padding: 15px;
  font-weight: 400;
}

.voice {
  border: 1px solid #53597E;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.voice-user-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eee;
  margin-right: 10px;
}

.voice-user-img img {
  width: 100%;
  height: auto;
}

.voice-user {
  display: flex;
  align-items: center;
}

.voice-user-prof {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #212121;
}

.voice-user-date {
  font-size: 12px;
  line-height: 1.6;
  color: #666666;
  font-weight: 400;
}

.voice-text {
  margin-top: 20px;
}

.voice-text span {
  font-weight: 700;
  color: #F13970;
}

.voice-charge {
  background: #F7F9FE;
  border-radius: 0 0 10px 10px;
}

.voice-charge-img {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px solid #F0F0F0;
  background: #fff;
  border-radius: 50%;
}

.voice-catch {
  padding: 20px;
}

.voice-charge-img img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.voice-charge a {
  padding: 15px 19px;
  display: flex;
  align-items: center;
  position: relative;
}

.voice-charge a:before {
  content: "";
  width: 10px;
  height: 15px;
  background: url(../img/item/icon-link-arr-right-black.svg);
  position: absolute;
  right: 19px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.voice-charge-prof {
  margin-left: 15px;
}

.voice-charge-prof-title {
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
  color: #212121;
}

.voice-charge-prof-name {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  color: #212121;
  text-decoration: underline;
  margin-top: 3px;
}

.article-supervisor {
  background: #F7F9FE;
  padding: 29px 15px 20px;
}

.article-supervisor-img {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #F0F0F0;
}

.article-supervisor-img img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.article-supervisor-catch {
  gap: 0 15px;
  display: grid;
  grid-template-columns: 80px auto;
  align-items: center;
  margin-top: 22px;
}

.article-supervisor-text {
  margin-top: 17px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}

.article-supervisor-prof-name {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
}

.article-supervisor-prof-url {
  font-size: 14px;
  color: #0b8aff;
  transition: all .3s;
  position: relative;
  padding-right: 5px;
  display: inline-block;
  margin-top: 6px;
}

.article-supervisor-prof-url:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  margin: auto;
  width: 96%;
  height: 1px;
  background: #0b8aff;
}

.article-supervisor-prof-url:after {
  content: "";
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-top: 3px solid #0b8aff;
  border-right: 3px solid #0b8aff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.article-supervisor-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  border-top: 1px solid #212121;
  border-bottom: 1px solid #212121;
  padding: 11px 0 7px;
  position: relative;
}

.article-supervisor-title span {
  position: relative;
}

.article-supervisor-title span:before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: url(../img/item/icon-supervisor-title.svg) no-repeat center center;
  top: -29px;
  left: 0;
  right: 0;
  margin: auto;
  background-size: 22px;
  z-index: 2;
}

.article-supervisor-title span:after {
  content: "";
  width: 50px;
  height: 25px;
  background: #F7F9FE;
  top: -29px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

.mokuji {
  background: #F7F9FE;
  padding: 20px;
  border-radius: 10px;
}

.single .contents-body .mokuji-catch-title {
  margin: 0;
  /* border-bottom: 1px solid #E0E4ED; */
  border-bottom: none;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  padding-bottom: 15px;
  color: #53597E;
}

.single .contents-body .mokuji-list-title {
  margin-top: 15px;
  color: #53597E;
  line-height: 1.8;
  font-weight: 700;
  font-size: 14px;
  padding: 0;
  margin-bottom: 5px;
  background: none;
  display: block;
}

.single .contents-body .mokuji-wrap-list {
  margin-top: 0;
}

.single .contents-body .mokuji-list-title a {
  color: #53597E;
}

.single .contents-body .mokuji-list {
  padding-left: 30px;
  padding-bottom: 15px;
  margin-top: 0;
}

.single .contents-body .mokuji-block {
  border-top: 1px solid #E0E4ED;
  margin-top: 0;
  list-style-type: none;
  padding: 0;
}

.single .contents-body .mokuji-block:before {
  display: none;
}

.single .contents-body .mokuji-list li {
  font-size: 14px;
  line-height: 1.8;
  font-weight: 400;
  position: relative;
  padding: 0;
}

.single .contents-body .mokuji-list li:before {
  content: "";
  width: 7px;
  height: 1px;
  position: absolute;
  top: 12px;
  left: -12px;
  background: #212121;
  border-radius: inherit;
}

.single .contents-body .mokuji-list li a {
  color: #212121;
}

.single .contents-body h4+ul {
  margin-top: 10px;
}

/*  */
.single-post .contents-body .mokuji-catch-title a {
  margin: 0;
  border-bottom: 1px solid #E0E4ED;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  padding-bottom: 15px;
  color: #53597E;
  display: block;
}

.single-post .contents-body .mokuji-list-title {
  margin-top: 15px;
  color: #53597E;
  line-height: 1.8;
  font-weight: 700;
  font-size: 14px;
  padding: 0;
  margin-bottom: 5px;
  background: none;
  display: block;
}

.single-post .contents-body .mokuji-list {
  padding-left: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #E0E4ED;
  margin-top: 0;
}

.single-post .contents-body .mokuji-list li {
  font-size: 14px;
  line-height: 1.8;
  font-weight: 400;
  position: relative;
  padding: 0;
}

.single-post .contents-body .mokuji-list li:before {
  content: "";
  width: 7px;
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  background: #212121;
  margin: auto;
  border-radius: inherit;
}

.mokuji .mokuji-toggle {
  display: none;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 25px;
  position: relative;
}

.mokuji .mokuji-toggle:before {
  content: "";
  position: absolute;
  right: 50%;
  top: 4px;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-top: 3px solid #53597E;
  border-right: 3px solid #53597E;
  transform: rotate(135deg);
  margin-right: -50px;
}

.mokuji .mokuji-toggle.on:before {
  transform: rotate(-45deg);
  margin-right: -39px;
  top: 7px;
}

.cta-line-btn {
  margin: 40px 0 50px;
}

.voice-list {
  margin: 40px 0;
}

.single-post strong,
b {
  font-weight: bold;
}

.single strong,
b {
  font-weight: bold;
}

[id] {
  scroll-margin-top: 50px;
}