@charset "utf-8";

body,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0;
  font-size: 100%;
  zoom: 1;
}

div {
  padding: 0;
  margin: 0;
  font-size: 100%;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

h1,
h2,
h3 {
  font-weight: bold;
}

a,
a:active {
  color: #0e82ed;
}

a:visited {
  color: #0e82ed;
}

a:hover {
  text-decoration: underline;
}

a {
  text-decoration: underline;
}

table {
  font-size: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

li {
  list-style: none;
  zoom: normal;
}

img {
  border: 0;
  vertical-align: text-bottom;
}

input,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  vertical-align: baseline;
}

figure {
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 320px) {
  body {
    font-size: 14px;
  }
}

/* clearfix
--------------------------------------------------------- */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.clearfix::before {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  display: block;
}

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

.cf::after {
  clear: both;
}

/* For IE 6/7 (trigger hasLayout)
--------------------------------------------------------- */
.cf {
  zoom: 1;
}

/* 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;
}

.mT40 {
  margin-top: 40px;
}

.mB5 {
  margin-bottom: 5px;
}

.mB10 {
  margin-bottom: 10px;
}

.mB15 {
  margin-bottom: 15px;
}

.mB20 {
  margin-bottom: 20px;
}

.mB25 {
  margin-bottom: 25px;
}

.mB30 {
  margin-bottom: 30px;
}

.mB40 {
  margin-bottom: 40px;
}

.mB50 {
  margin-bottom: 50px;
}

.pT5 {
  padding-top: 5px;
}

.pT10 {
  padding-top: 10px;
}

.pT15 {
  padding-top: 15px;
}

.pT20 {
  padding-top: 20px;
}

.pT30 {
  padding-top: 30px;
}

.pT40 {
  padding-top: 40px;
}

.pT50 {
  padding-top: 50px;
}

.pB5 {
  padding-bottom: 5px;
}

.pB10 {
  padding-bottom: 10px;
}

.pB15 {
  padding-bottom: 15px;
}

.pB20 {
  padding-bottom: 20px;
}

.pB30 {
  padding-bottom: 30px;
}

.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;
}

.pLR15 {
  padding: 0 15px;
}

.pLR20 {
  padding: 0 20px;
}

.lr {
  font-size: larger;
}

.sr {
  font-size: smaller;
}

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

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

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

.weight {
  font-weight: bold;
}

.relative {
  position: relative;
}

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

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

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

.d-flex {
  display: flex;
  align-items: center;
}

/* color
--------------------------------------------------------- */
.red {
  color: #ee3255 !important;
  font-weight: 700 !important;
}

.blue {
  color: #0e82ed !important;
  font-weight: 700 !important;
}

.green {
  color: #0cbaa0 !important;
}

.black {
  color: #333 !important;
}

.black-weak {
  color: #666 !important;
}

/* color（アラート、注目）
--------------------------------------------------------- */
.point-color {
  color: #ee3255;
  font-weight: bold;
}

.error-message {
  color: #ee3255;
  font-weight: bold;
}

.point-color .underline {
  text-decoration: underline;
}

.alert-wrap {
  background: #f3f7ff;
  border-left: 6px #8292b3 solid;
  font-size: 14px;
  padding: 15px;
}

.alert-wrap-error {
  background: #fff4f6;
  border-left: 6px #ee3255 solid;
  font-size: 14px;
  padding: 15px;
}

.alert-wrap-text {
  color: #6f83ac;
  font-size: 16px;
  font-weight: bold;
}

.alert-wrap-text::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url("../images/icon/icon-alert-outline-grey.svg") no-repeat;
  margin-right: 2px;
  vertical-align: -6px;
  background-size: cover;
}

.alert-wrap-text-error {
  color: #ee3255;
  font-size: 16px;
  font-weight: bold;
}

.alert-wrap-text-error::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url("../images/icon/icon-alert-outline-red.svg") no-repeat;
  margin-right: 2px;
  vertical-align: -6px;
  background-size: cover;
}

.alert-wrap-ttl {
  display: flex;
  align-items: center;
  line-height: 170%;
}

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

  .alert-wrap-text,
  .alert-wrap-text-error {
    font-size: 14px;
  }
}

/* 角丸ラベル
--------------------------------------------------------- */
.label-card-rec,
.label-card-done {
  display: flex;
  align-items: center;
}

.label-card-rec::after {
  content: "";
  background: url("../images/label-card-recommendation.svg") no-repeat;
  width: 62px;
  height: 23px;
  margin-left: 5px;
}

.label-card-done::after {
  content: "";
  background: url("../images/label-card-done.svg") no-repeat;
  width: 66px;
  height: 23px;
  margin-left: 5px;
}

/* background-color
--------------------------------------------------------- */
.bgcolor-secondary {
  background-color: #fff2f4;
}

.bgcolor-white {
  background-color: #fff !important;
}

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

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

.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;
}

/* Header Footer
--------------------------------------------------------- */
#exHeader {
  display: block;
  clear: both;
  padding: 0;
  height: 57px;
  border: none;
  box-sizing: border-box;
  background: #fff !important;
  font-size: 14px;
}

#exHeader #topSiteLogo {
  margin-top: 4px;
}

#exHeader #exHeaderInner {
  width: 100%;
  height: 57px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 0 0 0 10px;
  box-sizing: border-box;
}

#exHeader #siteLogo span {
  display: inline-block;
  margin: 4px 0 0;
}

#exHeader #logoExcite {
  width: 61px;
  height: 25px;
  float: left;
  display: inline-block;
  overflow: hidden;
  text-indent: -9999px;
  background: url(//image.excite.co.jp/jp/share/images/sp/logo_excite.png) no-repeat;
  background-size: 61px 25px;
}

#exHeader #logoSub {
  font-size: 15px;
  font-weight: bold;
  color: #000;
  line-height: 2;
  text-shadow: 0 1px 1px #fff;
}

#exHeader .headerIcon,
#exHeader .headerIcon-lp {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  padding-right: 10px;
}

#exHeader .headerIcon .contact-tel {
  margin-right: 10px;
  margin-top: 3px;
}

#exHeader .headerIcon .icon-logout img {
  width: 34px;
  height: 32px;
}

#exHeader .headerIcon a {
  margin: 0 0 0 16px;
  text-decoration: none;
}

#exHeader .headerIcon a img {
  vertical-align: middle;
}

#exHeader .hd-btn-login {
  background: #fff;
  border: 1px solid #0ca795;
  border-radius: 50px;
  color: #0ca795;
  margin-left: 10px !important;
  padding: 6px 12px;
  text-decoration: none;
}

#exHeader .hd-btn-regist {
  background: #0ca795;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  padding: 6px 12px;
}

@media screen and (max-width: 320px) {
  #exHeader .hd-btn-regist {
    padding: 6px 10px;
  }
}

#exHeader .headerIcon-lp a {
  margin: 10px 0 0 16px;
}

/* navなしheaderのshadow */
.not-nav-shadow {
  box-shadow: 0 4px 4px rgba(78, 81, 90, 0.1) !important;
}

/* guestのみ */
.guest-exHeader {
  position: sticky;
  top: 0;
  z-index: 5;
}

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

#logoSub {
  padding: 0;
}

.footer-telephone {
  box-sizing: border-box;
  background: #effdf7;
  padding: 20px;
}

.footer-telephone-inner>.head {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.footer-telephone-inner>.head>img {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

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

.contact-wrap>p {
  margin: 0 10px;
  line-height: 1em;
}

.footer-telephone .contact-wrap .text-contact-tel a {
  color: #333;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.footer-telephone .contact-wrap .text-contact-tel .sub {
  font-size: 12px;
}

.footer-telephone .contact-wrap .btn-contact-mail {
  margin-top: 15px;
}

.footer-telephone .contact-wrap .btn-contact-mail a {
  display: block;
  background: #fff;
  border: 1px solid #777;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  color: #333;
  font-weight: bold;
  padding: 12px 20px;
  line-height: 1.2;
  text-decoration: none;
}

.footer-telephone .contact-wrap .btn-contact-mail a img {
  display: inline-block;
  margin-right: 5px;
  vertical-align: -3px;
}

.footer-telephone .contact-wrap .btn-contact-mail a .sub {
  font-size: 12px;
  font-weight: normal;
}

#exFooter {
  display: block;
  clear: both;
  margin: 0;
  padding: 0;
  background: #29c7af;
}

.footer-sub-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 20px 10px;
}

.footer-sub-menu .list-sub-link li {
  font-size: 12px;
}

.footer-sub-menu .list-sub-link li+li {
  margin-top: 8px;
}

.list-sub-link a {
  color: #fff !important;
}

.footer-sub-menu .list-sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

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

#exFooter .copyright {
  border: none;
  padding: 0 0 10px;
  text-align: center;
  text-shadow: none;
}

#exFooter .copyrightTxt {
  color: #fff;
  font-size: 10px;
  padding: 10px 0 0;
}

#exFooter .copyrightTxt-call {
  color: #333;
  font-size: 10px;
  padding: 10px 0 0;
}

.footer-recruit {
  background: #fff;
  padding: 10px;
}

#companyinfo {
  padding: 15px 0 0;
  font-size: 11px;
  color: #fff;
}

#displayMode {
  background: #fff;
  border-top: 1px #ddd solid;
  border-bottom: 1px #ddd solid;
  font-size: 11px;
  padding: 8px 0 !important;
}

#excite-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #fff;
  font-size: 13px;
  padding: 12px 20px;
  margin: 0 auto;
}

#excite-link a {
  color: #333;
  margin: 5px 10px 0 0;
  white-space: nowrap;
}

/* コピーライトのみフッター */
#exFooter.copyright-only {
  padding: 12px 0;
}

#exFooter.copyright-only .copyright {
  padding: 0;
}

#exFooter.copyright-only .copyrightTxt {
  color: #fff;
  padding: 0;
  margin: 0;
}

/* 上部アラートリンク（相談開始や通話かけ直しはこちらから/アプリ再認証）
--------------------------------------------------------- */
.notice-header-alert a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffedf0;
  color: #ee3255;
  font-size: 13px;
  font-weight: bold;
  padding: 14px 12px 10px 12px;
  text-decoration: none;
  text-align: center;
}

.notice-header-alert .alert-text::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 14px;
  background: url("../images/icon/icon-alert-triangle.svg") no-repeat;
  margin-right: 5px;
  vertical-align: -2px;
}

.notice-header-alert .alert-btn::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 11px;
  background: url("../images/icon/icon-link-arr-right-red.svg") no-repeat;
  margin-left: 5px;
  vertical-align: -1px;
}

.notice-header-alert .alert-btn {
  text-decoration: underline;
}

.notice-header-alert a img {
  width: 230px;
  height: auto;
}

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

/* アプリ再認証モーダル */
.about-alert-app-modal {
  background: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  color: #333;
  font-size: 14px;
  font-weight: normal;
  width: 85%;
  height: auto;
  padding: 0;
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  line-height: 1.6;
  z-index: 10000;
}

.about-alert-app-modal .modal_content_header {
  background: #0cbaa0;
  border-radius: 12px 12px 0 0;
  color: #fff;
  padding: 14px 15px !important;
}

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

.about-alert-app-modal .modal_content_inner {
  padding: 20px 15px;
  max-height: 75vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.about-alert-app-modal .btn-secondary {
  width: 90%;
}

.about-alert-app-modal .close-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
  border-radius: 999em;
  position: absolute;
  top: -5px;
  right: -5px;
}

.about-alert-app-modal .close-btn img {
  max-width: 11px;
  width: 11px;
  height: 11px;
}

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

/* クレカ未登録の方向けメッセージ、個別フォローメッセージ
--------------------------------------------------------- */
.notice-card,
.notice-follow-message {
  background: #6e81c3;
  font-size: 13px;
  padding: 10px;
}

.notice-card a,
.notice-follow-message a {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: underline;
}

.notice-card a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../images/icon/icon-alert-card.svg") no-repeat;
  margin-right: 8px;
  vertical-align: -4px;
}

.notice-follow-message a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/icon/icon-error-outline-white.svg") no-repeat;
  margin-right: 8px;
  vertical-align: -4px;
}

/* 未払いがある方向けメッセージ
--------------------------------------------------------- */
.notice-card-unpaid a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: #ee3255;
  font-size: 13px;
  padding: 7px 10px;
  text-decoration: none;
}

.notice-card-unpaid .alert-text::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/icon/icon-error-outline-white.svg") no-repeat;
  margin-right: 8px;
  vertical-align: -4px;
}

.notice-card-unpaid .alert-btn {
  text-decoration: underline;
}

.notice-card-unpaid .alert-btn::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 11px;
  background: url("../images/icon/icon-link-arr-right-white.svg") no-repeat;
  margin-left: 5px;
  vertical-align: -1px;
}

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

  .notice-card,
  .notice-follow-message {
    font-size: 11px;
  }

  .notice-card-unpaid a {
    font-size: 11px;
  }

  .notice-card-unpaid .icon-alert img {
    width: 11px;
    height: auto;
  }
}

/* 共通レイアウト
--------------------------------------------------------- */
.note {
  font-size: 12px;
  padding: 10px 15px;
}

.note-tiny {
  color: #666;
  font-size: 10px;
}

.note_numbers {
  text-align: right;
  font-size: 12px;
}

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

hr.delimiter-thin {
  border: 3px #f5f6fa solid;
  margin: 0;
}

h1.title {
  font-size: 22px;
  padding: 24px 20px 0;
}

.section-wrap {
  padding: 20px 20px 0;
}

.section-inner {
  padding: 48px 20px 0;
}

.section-inner-ttl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px #e5eafc solid;
  font-size: 20px;
  padding: 10px 0 20px;
  letter-spacing: -0.04em;
}

.section-inner-ttl::after {
  position: absolute;
  display: block;
  content: " ";
  border-top: 2px #0cbaa0 solid;
  top: -2px;
  width: 30%;
}

.section-inner-scroll-x {
  padding: 50px 0 0 20px;
}

.section-inner-scroll-x .section-inner-ttl {
  margin-right: 20px;
}

@media screen and (max-width: 320px) {
  .section-inner {
    padding: 40px 16px 0;
  }

  .section-inner-ttl {
    font-size: 16px;
    padding: 10px 0;
  }
}

/* hGroups
--------------------------------------------------------- */
.ttl-seo {
  margin: 0;
  padding: 20px 0 0 20px;
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

span.ttl-sub {
  font-size: 18px;
  font-weight: normal;
  display: block;
  padding-left: 5px;
}

h2.ttl {
  position: relative;
  margin: 0 auto;
  padding: 14px 10px 0 14px;
  font-size: 22px;
}

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

h2.ttl.in-link>.link-text {
  font-size: 13px;
  font-weight: normal;
}

h2.ttl.in-link>.link-text img {
  width: 7px;
  height: 11px;
}

/* アコーディオン
--------------------------------------------------------- */
.accordion {
  text-align: left;
  margin: 10px 0 0 0;
}

.accordion .inner {
  display: none;
}

.accordion p {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 15px;
  border-bottom: 1px solid #dededa;
}

.accordion .ac-link {
  display: block;
  font-weight: 700;
  padding: 10px 15px;
  border-bottom: 1px solid #dededa;
  color: #000;
  text-decoration: none;
}

.accordion .inner li a {
  display: block;
  color: #000;
  padding: 10px 30px;
  border-bottom: 1px solid #dededa;
  text-decoration: none;
}

.icon-category {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

/* プロフィール写真サイズ指定
--------------------------------------------------------- */
.profile-image-80 {
  width: 80px;
  height: 96px;
}

.profile-image-100 {
  width: 100px;
  height: 120px;
}

/* 検索
--------------------------------------------------------- */
#keyword-form {
  width: 92%;
  margin: 18px auto 10px;
}

#keyword-form .keyword-search {
  display: flex;
  justify-content: space-between;
  margin: 24px 0 20px;
}

input.search {
  -webkit-appearance: none;
  width: 72%;
  height: 53px;
  line-height: 53px;
  text-decoration: none;
  font-size: 16px;
  border: 2px solid #c6d1e9;
  padding: 0 10px 0 14px;
  border-radius: 10px;
}

input.btn-search {
  -webkit-appearance: none;
  width: 17%;
  height: 56px;
  line-height: 56px;
  color: #fff;
  background: #676f80;
  border: 0;
  font-weight: bold;
  border-radius: 10px;
}

input.search::placeholder {
  color: #c6d1e9;
  font-size: 14px;
}

ul.tag-search {
  margin: 10px auto;
  list-style-type: none;
}

ul.tag-search li {
  display: inline-block;
}

ul.tag-search a {
  float: left;
  display: block;
  color: #0ca795;
  border: 1px solid #0ca795;
  background: #fff;
  margin: 0 6px 2px 0;
  padding: 2px 10px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 13px;
}

ul.tag-search li.selected a {
  color: #fff;
  border: 1px solid #3ac2a0;
  background-color: #3ac2a0;
}

@media screen and (max-width: 320px) {
  input.search {
    -webkit-appearance: none;
    width: 70%;
    height: 44px;
    line-height: 44px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 12px;
    border: 2px solid #dededa;
    padding: 0 10px;
    margin: 0 8px 0 0;
  }

  input.btn-search {
    -webkit-appearance: none;
    width: 18%;
    height: 47px;
    line-height: 47px;
    color: #fff;
    background: #676f80;
    border: 0;
    font-weight: bold;
    border-radius: 12px;
  }

  ul.tag-search a {
    float: left;
    display: block;
    font-size: 12px;
    color: #0ca795;
    border: 1px solid #0ca795;
    background: #fff;
    margin: 0 10px 0 0;
    padding: 2px 10px;
    border-radius: 20px;
    text-decoration: none;
  }
}

.flex {
  display: flex;
}

/* 絞り込みプルダウン
--------------------------------------------------------- */
.tag-pulldown-wap {
  padding: 0 0 5px;
}

.tag-pulldown.narrow-down {
  width: 40%;
  float: left;
}

.tag-pulldown.equal-down {
  width: 48% !important;
  float: left;
}

.tag-pulldown.sort {
  margin-left: 4%;
  width: 55%;
  float: right;
}

.tag-pulldown.sort-equal {
  margin-left: 4%;
  width: 48% !important;
  float: right;
}

.tag-pulldown select {
  /* styling */
  background-color: #fff;
  border-radius: 8px;
  font: inherit;
  line-height: 1.5em;
  font-size: 16px;
  padding: 12px;

  /* reset */
  margin: 0;
  color: #333;
  border: 1px solid #333;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 50px;
}

/* arrows */
select.pulldown {
  background-image:
    linear-gradient(45deg, transparent 50%, #333 50%),
    linear-gradient(135deg, #333 50%, transparent 50%),
    linear-gradient(to right, #dededa, #dededa);
  background-position: calc(100% - 20px) calc(10px + 10px), calc(100% - 14px) calc(10px + 10px);
  background-size: 6px 6px, 6px 8px, 0 0;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, #28636b 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #28636b 50%),
    linear-gradient(to right, #dededa, #dededa);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: #92d3bb;
  outline: 0;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 gray;
}

/* フィルタープルダウン */
.pulldown-filter-wrap {
  margin-bottom: 15px;
}

.pulldown-filter-wrap.date-counselor {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pulldown-filter {
  position: relative;
}

.pulldown-filter::after {
  content: "";
  border: 5px solid transparent;
  border-top: 6px solid #8088a1;
  position: absolute;
  top: calc(50% + 4px);
  right: 10px;
  transform: translateY(-50%);
}

.pulldown-filter select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid #99a4cc;
  border-radius: 8px;
  box-sizing: border-box;
  color: #646d8c;
  font-size: 14px;
  padding: 12px 24px 12px 10px;
  position: relative;
}

/* リスト
--------------------------------------------------------- */
ul.list {
  margin: 0;
}

ul.list li {
  border-top: 1px dotted #cbc8c2;
}

ul.list li a {
  display: block;
  overflow: hidden;
  padding: 10px 30px 10px 14px;
  position: relative;
  margin: 0;
  color: #000;
  text-decoration: none;
}

ul.list li a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid #a1d1bc;
  border-right: 2px solid #a1d1bc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul.nl {
  margin: 0;
  overflow: auto;
}

ul.nl li {
  width: 50%;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #dededa;
  float: left;
  margin-top: 0;
  padding: 0 !important;
  border-top: none !important;
}

ul.nl li a {
  display: block;
  overflow: hidden;
  padding: 12px 0 12px 10px;
  position: relative;
  margin: 0;
  border-right: 1px solid #dededa;
  border-left: 1px solid #fff;
  color: #333;
  text-decoration: none;
}

ul.nl li a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid #a1d1bc;
  border-right: 2px solid #a1d1bc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul.nl li:first-child {
  border-bottom: 1px solid #dededa !important;
}

ul.nl li:last-child {
  border-bottom: none !important;
  border-bottom: 1px solid #dededa !important;
}

ul.nl li.col-1 {
  width: 100%;
}

ul.nl li.col-1 a {
  border-right: none;
}

ul.disc li {
  list-style-type: disc;
  margin-left: 20px;
  margin-top: 5px;
}

ul.nl li:nth-child(even) a {
  border-right: none !important;
}

/* pager
--------------------------------------------------------- */
ul.pager {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  margin: 0 0 20px;
}

ul.pager li {
  display: table-cell;
  vertical-align: middle;
}

ul.pager li a {
  display: block;
  text-align: center;
  margin: 0 10px;
  padding: 8px 10px;
  border: 1px #333 solid;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

ul.pager li a:hover {
  text-decoration: none;
  background: #0cbaa0;
  color: #fff;
}

/* 会員登録ボタン
--------------------------------------------------------- */
div.entry {
  border-top: 1px dotted #bfbfbf;
  padding: 10px;
}

/* CP
--------------------------------------------------------- */
ul.cp_option {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 10px;
  line-height: 140%;
  background: #f4f6fa;
  border-radius: 5px;
  margin: 10px auto;
  padding: 12px 14px;
  width: 84%;
}

ul.cp_option li:nth-of-type(1) {
  margin: 0 10px 0 0;
}

ul.cp_option li img {
  border: 1px #d5dceb solid;
}

/* button
--------------------------------------------------------- */
.btn-def {
  box-sizing: border-box;
  display: block;
  width: 300px;
  border-radius: 50px;
  box-shadow: 0px 2px 4px 0px #00000040;
  padding: 13px 10px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-family: Noto Sans JP;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

.btn-def:hover {
  text-decoration: none;
  color: #fff;
}

.btn-black-border {
  background: #fff;
  border: 1px solid #333;
  color: #333 !important;
}

.btn-green-border {
  background: #fff;
  border: 1px solid #0CA795;
  color: #0CA795 !important;
  padding: 12px 10px;
}

a.btn-top-green {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #0ca795;
  border: 1px solid #0ca795;
  border-radius: 50px;
  box-shadow: 10px 10px 20px rgba(57, 48, 109, 0.13);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 13px 12px;
  text-decoration: none;
}

a.btn-top-green-border {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #0ca795;
  border-radius: 50px;
  box-shadow: 10px 10px 20px rgba(57, 48, 109, 0.13);
  color: #0ca795;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 13px 12px;
  text-decoration: none;
}

.guest-btn-area {
  padding: 20px;
  box-sizing: border-box;
}

@media screen and (max-width: 320px) {
  .btn-def {
    font-size: 16px;
    padding: 8px;
  }
}

/* トップページ：ページ内登録＋ログインボタン
--------------------------------------------------------- */
.guest-btn-area.login {
  padding: 0 30px 44px;
}

.guest-btn-area .lead-text {
  color: #ee3255;
  font-size: 13px;
  font-weight: bold;
  text-shadow:
    1px 1px 0 #fff,
    -1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px -1px 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff,
    -1px 0 0 #fff,
    1px 0 0 #fff;
  margin: 12px 0 0;
  text-align: center;
}

.guest-btn-area .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.guest-btn-area .grid>li {
  width: 45%;
}

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

  a.btn-top-green,
  a.btn-top-green-border {
    font-size: 14px;
  }
}

@media screen and (min-width: 414px) {
  .guest-btn-area.login {
    padding: 0 30px 50px;
  }
}

/* メニュー
--------------------------------------------------------- */
#global-navi {
  position: sticky;
  top: 0;
  z-index: 2;
}

#menu-wrap ul {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  background-color: #f1fffa;
  box-shadow: 0 4px 4px rgba(78, 81, 90, 0.1);
}

#menu-wrap ul li {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

#menu-wrap ul li a {
  display: block;
  padding: 6px 0;
  font-size: 10px;
  color: #135f53;
  text-decoration: none;
}

/* 閲覧履歴・お気に入り・新着・プログラムから探す
--------------------------------------------------------- */
ul.group-list {
  font-size: 0;
  margin: 6px 10px 18px;
}

ul.group-list li {
  width: 22%;
  text-align: center;
  display: inline-block;
  margin: 0 5px;
}

ul.group-list li img {
  width: 100%;
}

.debut ul.group-list {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 320px) {
  ul.group-list li {
    margin: 0 4px;
  }

  ul.group-list li img {
    background-color: #fff;
    vertical-align: bottom;
  }
}

.debut ul.group-list li a {
  line-height: 160%;
  box-shadow: none;
}

ul.group-list li a p.name {
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 5px 0 0 0;
  text-decoration: underline;
}

ul.group-list li a p.date {
  color: #000;
  font-size: 10px;
  font-weight: normal;
  text-decoration: none;
  margin-bottom: 5px;
}

/* ビギナーサポート対象カウンセラー
--------------------------------------------------------- */
.beginner-support ul.group-list {
  display: flex;
  flex-wrap: wrap;
}

.beginner-support ul.group-list li a {
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 72px;
  height: auto;
  line-height: 1.9;
  letter-spacing: 0;
}

.beginner-support ul.group-list li a p.photo {
  width: 70px;
  height: 70px;
  border: 1px #d5dceb solid;
  border-radius: 999em;
  overflow: hidden;
}

.beginner-support ul.group-list li a p.date {
  margin-bottom: 0;
}

/* プログラムから探す（top）
--------------------------------------------------------- */
.counselingprogram-entrance ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.counselingprogram-entrance ul::after {
  content: "";
  display: block;
  width: 30%;
}

.counselingprogram-entrance ul li {
  margin: 0 0 14px;
  width: 30%;
}

.counselingprogram-entrance a {
  border: 1px #d5dceb solid;
  border-radius: 10px;
  box-shadow: 0 3px 3px rgba(32, 33, 36, 0.2);
  color: #333;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.counselingprogram-entrance a span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 40px;
  line-height: 120%;
}

.counselingprogram-entrance a img {
  border-radius: 9px 9px 0 0;
  display: block;
  height: auto;
  width: 100%;
}

/* プログラムから探す（prof）
--------------------------------------------------------- */
.counselingprogram-entrance-prof {
  background-color: #f3f7ff;
  margin: 10px auto;
  padding: 15px 0 5px;
  width: 100%;
}

.counselingprogram-entrance-prof-inner {
  padding: 0 15px;
}

.counselingprogram-entrance-prof h2 {
  color: #5e7cb7;
  font-size: 18px;
  padding: 0 0 5px 20px;
  position: relative;
}

.counselingprogram-entrance-prof h2 a {
  position: absolute;
  top: 3px;
  right: 10px;
  font-size: 13px;
}

.counselingprogram-entrance-prof ul {
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 15px 15px 10px;
  margin: 0 -15px 0;
}

.counselingprogram-entrance-prof ul li {
  margin: 0 25px 0 0;
}

.counselingprogram-entrance-prof ul li:last-child {
  margin: 0 10px 0 0;
}

.counselingprogram-entrance-prof ul li a {
  display: inline-block;
  color: #333;
  font-size: 12px;
  text-align: center;
}

.counselingprogram-entrance-prof ul li a img {
  width: 80px;
  height: 80px;
}

.counselingprogram-entrance-prof ul li a span {
  display: block;
  line-height: 120%;
  white-space: nowrap;
}

.counselingprogram-entrance-prof p {
  font-size: 14px;
  padding: 0 20px;
}

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

  .counselingprogram-entrance-prof ul li {
    margin: 0 10px 0 0;
  }
}

@media screen and (min-width: 414px) {
  .counselingprogram-entrance-prof ul li {
    margin: 0 12px 0 0;
  }
}

/* トップページ：お試し無料相談
--------------------------------------------------------- */
.spec {
  color: #bbb;
  font-size: 11px;
  text-align: right;
}

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

div.spec dl {
  padding-bottom: 5px;
  text-align: right;
}

div.spec dl dt,
div.spec dl dd {
  display: inline;
  padding: 0 5px;
  border-right: 1px dotted #cbc8c2;
}

div.spec dl dd:last-child {
  border-right: none;
  padding-right: 0;
}

/* カウンセラーの状態（LP）
--------------------------------------------------------- */
.status-wrap {
  display: block;
}

.status {
  display: block;
  margin-bottom: 3px;
}

.status span {
  font-size: 11px;
  height: 18px;
  line-height: 18px;
  border: 1px solid #dededa;
  background-color: #fff;
  border-radius: 5px;
  min-width: 86px;
  text-align: center;
  display: inline-block;
  letter-spacing: 0.1em;
}

.status span.staStd {
  /* 待機 */
  color: #66bb6a;
  border: 1px solid #a1bda2;
}

.status span.staOn-normal {
  /* 相談中 */
  color: #55c1e7;
  border: 1px solid #b0ced8;
}

.status span.staOn {
  /* 相談中（ラベルver.） */
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  padding: 0;
  width: 48px;
  height: 48px;
  background: none;
  text-align: left;
}

.status span.staRe {
  /* 予約受付中 */
  color: #ffa726;
  border: 1px solid #ffa726;
}

.status span.staOut {
  /* 退席中 */
  color: #78909c;
  border: 1px solid #c8d5dc;
}

/* プロフ詳細
--------------------------------------------------------- */
.member-detail {
  width: 90%;
  margin: 20px auto 20px;
  position: relative;
}

.member-detail-name {
  font-size: 20px;
  font-weight: bold;
  margin: -14px 0 0;
}

.member-detail-name a {
  color: #000;
  display: inline-flex;
  text-decoration: underline;
}

.member-detail-caption-area {
  display: flex;
  margin: 18px 0 0;
}

.member-detail-caption-area .busy-outline {
  border: 1px #ea4b69 solid !important;
  box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.2);
  position: relative;
}

/* プロフ詳細下部のつぶやきとステータス
--------------------------------------------------------- */
.member-detail-caption-area-under {
  border: 5px #eee solid;
  width: 82%;
  margin: 15px auto;
  border-radius: 12px;
  padding: 8px 14px 0;
}

.member-detail-caption-area-under .member-detail-caption-area {
  display: flex;
  align-items: center;
  margin: 6px 0 0;
}

.member-detail-murmur {
  position: relative;
  padding: 7px 10px;
  margin: 0 0 10px;
  color: #333;
  font-size: 12px;
  background: #f4f6fa;
  border-radius: 5px;
}

.member-detail-murmur::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 12%;
  margin-left: -10px;
  border: 6px solid transparent;
  border-top: 10px solid #f4f6fa;
}

.member-detail-murmur p {
  margin: 0;
  padding: 0;
}

ul.member-detail-murmur-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

ul.member-detail-murmur-date li:nth-of-type(1) {
  color: #999;
  font-size: 10px;
  margin: 0 0 5px;
}

ul.member-detail-murmur-date li:nth-of-type(2) {
  margin: 0 0 10px;
}

.member-detail-caption-area-under .member-detail-img {
  width: 66px;
  height: 66px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #d5dceb;
  margin: 0 0 8px;
}

.member-detail-caption-area-under .member-detail-img .photo img {
  width: 100%;
  height: 100%;
}

.member-detail-img,
.member-inner .member-img {
  width: 90px;
  height: 90px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #d5dceb;
}

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

  .member-detail-img,
  .member-inner .member-img {
    width: 82px;
    height: 82px;
  }
}

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

  .member-detail-img,
  .member-inner .member-img {
    height: 60px;
    width: 68px;
  }
}

.member-detail-img img,
.member-inner .member-img .photo img {
  width: 100%;
  height: auto;
}

.member-detail-img .photo {
  width: 100%;
  vertical-align: bottom;
  position: relative;
}

.member-detail-txt {
  margin: 0 0 0 14px;
  width: 70%;
}

@media screen and (max-width: 320px) {
  .member-detail-txt {
    margin: 0 0 0 16px;
    width: 80%;
  }
}

ul.member-detail-txt-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 92%;
}

ul.member-detail-txt-status li {
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 5px;
  margin: 0 7px 0 0;
}

ul.member-detail-txt-status li:last-child {
  margin-right: 0;
}

@media screen and (max-width: 320px) {
  ul.member-detail-txt-status li {
    font-size: 10px;
    margin-right: 5px;
    padding: 0 4px;
  }
}

.member-detail-caption-area-under ul.member-detail-txt-status li,
.area-answer ul.member-detail-txt-status li {
  font-size: 10px;
  padding: 0 5px;
  margin: 0 6px 6px 0;
}

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

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

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

.status-label-staRe,
.status-label-mail {
  background: #fff;
  border: 1px #555 solid;
  color: #555;
}

.status-label-beginner {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px #fe6422 solid;
  color: #dd5000;
}

.status-label-beginner::before {
  content: "";
  display: block;
  width: 11px;
  height: 13px;
  background: url("../images/help/beginner/icon-beginner.svg") no-repeat;
  padding-right: 3px;
}

.member-detail-date {
  font-size: 13px;
  color: #888;
}

.member-detail-price {
  margin: 10px 0;
}

.member-detail-price ul li {
  display: flex;
  align-items: center;
  font-size: 14px;
}

@media screen and (max-width: 320px) {
  .member-detail-price ul li {
    font-size: 12px;
  }
}

.member-detail-price ul li .type-select {
  width: 76px;
}

.member-detail-price ul li .type-select-nomail {
  padding: 0 0 0 3px;
}

ul.price-list li p span.type-select-nomail {
  padding: 0 0 0 5px;
}

/* プロフ詳細 口コミカルーセル */
.rev-carousel-wrap {
  background: #f3f7ff;
  padding: 20px 20px 0;
}

.rev-carousel-wrap h2 {
  font-size: 20px;
}

.rev-carousel-wrap .rev-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rev-carousel-wrap .rev-head .ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.rev-carousel-wrap .rev-head .prof-ttl {
  margin-bottom: 0;
}

.total-star {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #666;
  font-size: 11px;
  margin-left: 10px;
}

.total-star .area-star-rating {
  margin-left: 7px;
}

.total-star .star-rating-ready {
  margin-right: 0;
}

.rev-carousel-list {
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding-right: 20px;
  margin-right: -20px;
}

.rev-carousel-list>li {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 10px 10px 20px rgba(57, 48, 109, 0.13);
  font-size: 14px;
  margin-bottom: 24px;
  padding: 12px;
  width: 190px;
}

.rev-carousel-list>li+li {
  margin-left: 15px;
}

.box-carousel-rev .rev-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  white-space: normal;
  min-height: 105px;
  margin-bottom: 5px;
}

.box-carousel-rev .lower {
  color: #777;
  font-size: 11px;
  margin-top: 5px;
}

@media screen and (max-width: 320px) {
  .rev-carousel-wrap .rev-head {
    justify-content: flex-end;
  }

  .rev-carousel-wrap .rev-head .ttl {
    width: 100%;
    margin-bottom: 2px;
  }
}

ul.prf-date li p {
  padding: 10px 14px;
  word-wrap: break-word;
}

.prf-date-sentence p {
  word-wrap: break-word;
}

.prof-ttl {
  display: flex;
  align-items: center;
  color: #07b097;
  font-size: 16px;
  margin-bottom: 10px;
}

.prof-ttl>span {
  margin-left: 8px;
}

/* fav-wrap */
.fav-wrap input {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.fav-wrap {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 0;
}

.favorite-toggle {
  opacity: 0;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
}

.fav-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../images/icon/icon-fav-off.svg") no-repeat center;
  background-size: 24px auto;
  transition: all 0.2s;
}

.favorite-toggle:checked+.fav-icon {
  background: url("../images/icon/icon-fav-on.svg") no-repeat top center;
  background-size: 24px auto;
}

/* ふりがな
--------------------------------------------------------- */
ruby {
  display: inline-table;
  white-space: nowrap;
  text-indent: 0;
  margin: 0;
}

ruby>rb {
  display: table-row-group;
  text-align: center;
}

ruby>rt {
  display: table-header-group;
  font-size: 50%;
  line-height: 0.5;
  letter-spacing: 0;
}

rtc>rt {
  display: table-cell;
  letter-spacing: 0;
  text-align: center;
}

rtc>rt[rbspan] {
  display: table-caption;
  text-align: center;
}

rp {
  display: none;
}

.area-content {
  margin: 0 auto;
  width: 92%;
}

/* 予約
--------------------------------------------------------- */
ul.explanation-schedule-icon {
  display: flex;
  margin: 15px 0 5px;
}

ul.explanation-schedule-icon li {
  padding: 0 18px 0 0;
  background: none;
  border-top: none;
}

/* スケジュール スクロールヒント 表示位置調整 */
.scroll-hint-icon-wrap {
  height: 20%;
}

.schedule_wrap_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.schedule_wrap_scroll>.schedule_wrap {
  width: 1300px;
}

table.rsv {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

table.rsv thead tr {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

table.rsv thead th {
  border-top: 1px solid #666;
}

table.rsv tbody:last-child tr {
  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.2);
}

table.rsv tbody:last-child th {
  border-bottom: 1px solid #666;
}

table.rsv th {
  border-bottom: solid 1px #dededa;
  border-left: solid 1px #ccc;
  background-color: #fff;
  color: #333;
  font-size: 11px;
  line-height: 160%;
  margin: 0;
  padding: 7px 2px;
  text-align: center;
  width: 14%;
}

table.rsv th:first-child {
  width: 30px;
  background: #666;
  border-left: none;
  color: #fff;
  font-weight: normal;
}

table.rsv th.nbsp {
  color: #666;
  padding: 0 4px;
  position: sticky;
  top: 0;
  left: 0;
}

table.rsv th.week p span {
  padding: 0 8px;
  white-space: nowrap;
}

table.rsv td {
  border-bottom: solid 1px #dededa;
  border-left: solid 1px #dededa;
  margin: 0;
  padding: 2px;
}

table.rsv th:last-child,
table.rsv td:last-child {
  border-right: solid 1px #666;
}

table.rsv th.hour {
  font-size: 12px;
  height: 25px;
  line-height: 100%;
  position: sticky;
  top: 0;
  left: 0;
}

.icon-reOn,
.icon-reOff {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px 3px 0;
}

table.rsv tr td .icon-reOn {
  width: 35px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  margin: 4px 0 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(65, 65, 65, 0.1);
}

table.rsv tr td .icon-reOff {
  width: 27px;
  height: 27px;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

@media screen and (max-width: 320px) {
  table.rsv th {
    border-bottom: solid 1px #dededa;
    border-left: solid 1px #dededa;
    background-color: #fff;
    margin: 0;
    padding: 7px 1px;
    font-weight: normal;
    text-align: center;
    font-size: 10px;
  }

  table.rsv tr td .icon-reOn {
    width: 32px;
  }
}

.reOn {
  background: url(../images/icon-reOn.svg) no-repeat;
  background-size: 86%;
  background-position: 3px 4px;
}

.reOff {
  background: url(../images/icon-reOff.svg) no-repeat;
  background-size: 68%;
  background-position: 7px 5px;
}

.sat_nostr {
  color: #408ae2;
}

.sun_nostr {
  color: #d65656;
}

/* 予約アコーディオン調整 */
.ac-standby-schedule {
  position: relative;
}

.ac-standby-schedule .acd-label {
  display: block;
  border: 1px solid #666;
  border-radius: 999em;
  color: #666;
  font-size: 14px;
  font-weight: bold;
  width: 45%;
  padding: 13px 15px;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.ac-standby-schedule .acd-label::after {
  display: none;
}

.ac-standby-schedule .acd-check:checked+.acd-label {
  bottom: 0;
}

.ac-standby-schedule .acd-label>span {
  padding: 0;
}

.ac-standby-schedule .acd-label>span::before {
  content: "すべて見る";
}

.ac-standby-schedule .acd-check:checked+.acd-label>span::before {
  content: "閉じる";
}

.ac-standby-schedule .acd-label>span::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../images/icon/icon-plus-gray.svg") no-repeat center;
  background-size: cover;
  margin-left: 10px;
  vertical-align: -1px;
}

.ac-standby-schedule .acd-check:checked+.acd-label>span::after {
  background: url("../images/icon/icon-minus-gray.svg") no-repeat center;
  background-size: cover;
}

.ac-standby-schedule .acd-content {
  height: 450px;
  opacity: 1;
  visibility: initial;
  position: relative;
}

.ac-standby-schedule .acd-content::after {
  content: "";
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
}

.ac-standby-schedule .acd-check:checked+.acd-label+.acd-content::after {
  display: none;
}

.ac-standby-schedule .acd-check:checked+.acd-label+.acd-content .acd-content-schedule {
  padding-bottom: 70px;
}

/* 待機予定
--------------------------------------------------------- */
#standby_schedule td {
  text-align: center;
  width: 14%;
}

table.rsv tr td.schedule-area-standby {
  background: #d8e9fd;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}

/* カテゴリー
--------------------------------------------------------- */
.keyword-wrap {
  overflow: hidden;
  width: 92%;
  margin: 14px auto 0;
  border-radius: 5px;
}

ul.category-list {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
}

ul.category-list li {
  width: calc((100% / 3) - 14px);
  margin: 7px;
}

ul.category-list.col-2 li {
  width: calc((100% / 2) - 14px);
}

ul.category-list li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #ddeffa;
  border-radius: 5px;
  text-decoration: none;
  box-sizing: border-box;
  padding: 5px;
}

ul.category-list li a.is-green {
  background: #dcf5f0;
}

ul.category-list li a span {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  line-height: 1.1;
}

ul.category-list li .icon {
  min-height: 45px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

ul.category-list li a.cat-health span {
  font-size: 11px;
  line-height: 1.4;
}

ul.category-list li a.cat-health .icon {
  min-height: 40px;
}

ul.category-list.col-2 li .icon {
  width: 52px;
  margin-right: 5px;
}

ul.category-list.col-2 li .icon img {
  max-width: 100%;
}

ul.category-list.col-2 li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 10px;
}

ul.category-list.col-2 li span {
  width: calc(100% - 70px);
  font-size: 13px;
  text-align: left;
}

@media screen and (max-width: 320px) {
  ul.category-list li {
    width: calc((100% / 3) - 10px);
    margin: 5px;
  }

  ul.category-list li a span {
    font-size: 11px;
  }

  ul.category-list.col-2 li .icon {
    width: 35px;
  }

  ul.category-list.col-2 li .icon img {
    max-height: 28px;
  }

  ul.category-list.col-2 li span {
    width: calc(100% - 45px);
    font-size: 11px;
  }
}

.category-box div,
.category-box h3 {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  color: #000;
}

.category-box h3 {
  text-decoration: underline;
}

.category-list p {
  text-decoration: none;
  font-size: 12px;
  color: #000;
  line-height: 1.6;
  margin-top: 5px;
  height: 75px;
}

@media screen and (max-width: 320px) {
  div.category-icon {
    margin: 0 2px 0 0;
  }

  .category-box div,
  .category-box h3 {
    font-size: 11px;
  }

  .category-list p {
    height: 80px;
  }
}

/* カウンセラーのつぶやき
--------------------------------------------------------- */
ul.list.tweet {
  margin-bottom: 20px;
}

ul.list.tweet li {
  border-top: none;
  border-bottom: 1px solid #e5eafc;
  position: relative;
  padding: 14px 0;
}

ul.list.tweet a::after {
  display: none;
}

.murmurPhoto {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #dededa;
  position: relative;
  top: 0;
  left: 0;
  float: left;
}

.murmurPhoto img {
  height: auto;
  width: 100%;
  vertical-align: bottom;
}

.murmurPhoto a {
  padding: 0 !important;
}

.murmurDate {
  padding-left: 60px;
  line-height: 1.3;
  margin: 5px;
}

.murmurDate .murmurName {
  display: flex;
  font-weight: bold;
  margin-bottom: 5px;
}

.murmurDate .murmurName a {
  padding: 0;
  flex-grow: 2;
  line-height: 22px;
  text-decoration: underline;
}

.murmurDate .murmurName .murmurTime {
  display: block;
  font-size: 10px;
  color: #766e6b;
  line-height: 22px;
  font-weight: 500;
}

.murmurDate .murmurTxt {
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.6;
  position: relative;
}

.murmurDate .murmurTxt a {
  padding: 0 20px 0 0;
}

.murmurDate .murmurTxt a::before {
  position: absolute;
  top: 40%;
  right: 5px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid #a1d1bc;
  border-right: 2px solid #a1d1bc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* カウンセラーのつぶやき（吹き出し）
--------------------------------------------------------- */
.tweet_group {
  position: relative;
  padding: 10px;
}

.tweet_group .bubble {
  padding: 10px;
  margin: 0 0 10px 70px;
}

.tweet_group .bubble .murmurTxt {
  font-size: 12px;
  line-height: 1.6;
}

.tweet_group .bubble .murmurTxt,
.tweet_group .bubble .murmurDate {
  padding: 0;
  margin-top: 0;
}

.tweet_group .bubble .murmurDate {
  margin-top: 10px;
  text-align: right;
}

.tweet_group a .bubble {
  color: #000 !important;
}

.tweet_group a {
  text-decoration: none;
}

.tweet_group .murmurDate .murmurTime {
  position: relative;
  top: 0;
  right: 0;
}

/* 吹き出し
--------------------------------------------------------- */
div.bubble {
  position: relative;
  margin: 5px 10px 0 60px;
  border: 1px solid #e0d9ca;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
  word-wrap: break-word;
}

div.bubble::after,
.bubble::before {
  position: absolute;
  content: " ";
  height: 0;
  width: 0;
}

/* 口コミ
--------------------------------------------------------- */
ul.rev-comment {
  margin-bottom: 20px;
}

.rev-comment li {
  position: relative;
  padding: 0 0 20px;
}

.rev-comment li:last-child {
  position: relative;
  padding: 0;
}

.rev-comment-inner {
  background: #f3f7ff;
  border-radius: 12px;
  margin: 0 auto;
  padding: 16px;
}

.rev-comment-counselor a {
  display: flex;
  align-items: center;
  border-bottom: 1px #ccc dotted;
  border-radius: 5px;
  color: #222;
  padding: 0 0 10px 0;
  margin: 0 0 15px;
  text-decoration: none;
  position: relative;
}

.rev-comment-counselor a::before {
  content: "";
  background: url("../images/icon/icon-link-arr-right-black.svg") no-repeat;
  position: absolute;
  right: 0;
  width: 12px;
  height: 12px;
}

.rev-counselor-photo {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #dededa;
  margin: 0 5px 0 0;
}

.rev-counselor-photo img {
  height: auto;
  width: 100%;
  vertical-align: bottom;
}

.rev-counselor-name {
  font-size: 10px;
  font-weight: normal;
  margin: 0 5px 0 0;
}

.rev-counselor-name-main {
  font-size: 13px;
  font-weight: bold;
}

.star-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0 0;
}

.notice-card-campaign {
  background: #fff2f4;
  padding: 16px;
  text-align: center;
}

.notice-card-campaign .marker {
  background: linear-gradient(transparent 40%, #ffdbe1 45%);
}

/* 満足度
--------------------------------------------------------- */

/* -- 集計あり -- */
.star-rating {
  color: #f2b31b;
  font-size: 13px;
  position: relative;
  display: table;
}

.star-rating img {
  margin: 0 -1px;
}

.filled-star {
  position: absolute;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* -- 集計中 -- */
.star-rating-ready {
  color: #ccc;
  font-size: 13px;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 15px 0 0;
}

.star-rating-ready span {
  font-size: 12px;
  margin: 0 0 0 2px;
}

/* 無料相談
--------------------------------------------------------- */
.area-answer {
  background: #fff;
}

.area-answer h2.ttl {
  z-index: auto;
}

.area-answer ul.member-list-wrap .member-list {
  margin: 0;
}

.freec .member-list-wrap .member-detail {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.freec .member-list-wrap .member-list .member-inner {
  padding-top: 10px;
}

.freec-list {
  border-radius: 5px;
}

.freec-list .freec-list-inner {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  margin: 0 0 15px;
}

.freec-ttl {
  padding: 10px;
  border-radius: 12px 12px 0 0;
  border-bottom: solid 1px #e5e5e5;
  background-color: #fafafa;
  overflow: hidden;
}

.freec-ttl h2,
.freec-ttl h3 {
  font-size: 16px;
}

.read {
  padding: 10px;
}

.spec-date {
  font-size: 12px;
  text-align: right;
  margin-top: 10px;
}

.more {
  text-decoration: underline !important;
  margin-top: 5px;
  text-align: right;
}

.comment-icon-flex {
  display: inline-flex;
  align-items: center;
}

.comment-icon-flex span:first-child::before {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  height: 16px;
  width: 20px;
  margin: 0 4px 0 0;
}

.comment-icon-flex span.f::before {
  background: url("../images/icon/icon-comment-pink.svg") no-repeat;
}

.comment-icon-flex span.m::before {
  background: url("../images/icon/icon-comment-blue.svg") no-repeat;
}

.comment-icon-flex span.x::before {
  background: url("../images/icon/icon-comment-gray.svg") no-repeat;
}

div.freec {
  padding: 20px;
}

div.freec h1 {
  color: #000;
  font-size: 18px;
  text-align: left;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.freec-comments {
  border: 2px #0cbaa0 solid;
  border-radius: 12px;
  padding: 15px;
}

.freec-comments .ttl-answer {
  border-bottom: 1px dotted #ccc;
  font-size: 16px;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.freec-counselor-top {
  margin-bottom: 20px;
}

.freec-counselor-top>.upper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.freec-counselor-top>.upper a {
  color: #333;
}

.freec-counselor-top>.upper .photo {
  border: 1px solid #d5dceb;
  border-radius: 999em;
  width: 63px;
  height: 63px;
  overflow: hidden;
  margin-right: 10px;
}

.freec-counselor-top>.upper .photo img {
  width: 100%;
  height: auto;
}

.freec-counselor-top>.upper .content {
  width: calc(100% - 75px);
}

.freec-counselor-top .list-licence {
  font-size: 11px;
  line-height: 1.6;
  margin-top: 4px;
}

.freec-counselor-top .career {
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.6;
}

.freec-counselor-top .link-more a {
  font-size: 12px;
  color: #666;
}

div.freec-ttl p.spec-date span.ctgname {
  display: inline-block;
  color: #766e6b;
  margin: 0 10px 0 0;
  padding: 0 10px;
  background-color: #fff;
  border: 1px solid #dededa;
  border-radius: 20px;
}

div.freec-ttl p.spec-date span.ctgname a {
  text-decoration: none;
}

.noWordWrap {
  word-wrap: break-word;
  display: block;
}

.freec-regist {
  text-align: center;
}

.freec-regist p {
  color: #666;
  font-size: 12px;
  margin-bottom: 10px;
}

.area-banner {
  margin: 20px auto;
  text-align: center;
}

.area-banner a {
  display: block;
}

.area-banner a img {
  border-radius: 5px;
  width: 92%;
}

.keyword-inflow {
  background: #e7f8f4;
  border-radius: 4px;
  color: #28c7af;
  margin: 15px 0 20px;
  padding: 13px;
}

.keyword-inflow ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.keyword-inflow ul li:nth-of-type(1) {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #dededa;
  margin: 0 5px 0 0;
  position: relative;
}

.keyword-inflow ul li:nth-of-type(1) img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
}

.keyword-inflow ul li:nth-of-type(2) p {
  font-weight: bold;
  line-height: 160%;
  padding: 0 0 6px;
  text-align: right;
}

.keyword-inflow ul li:nth-of-type(2) a {
  display: block;
  text-align: right;
}

@media screen and (max-width: 320px) {
  .keyword-inflow {
    font-size: 12px;
  }

  .keyword-inflow ul li:nth-of-type(1) {
    width: 70px;
    height: 70px;
  }
}

/* ---------------------------------------------------------
新規会員登録フォーム
-------------------------------------------------------- */

/* 新規会員登録フォーム：フォーム共通 */
.area-form .read {
  font-weight: bold;
  color: #07b097;
  padding: 0 0 12px 0;
}

.card-bg {
  background: #f5f6fa;
  padding: 20px;
}

.card-bg ul {
  background: #fff;
  border-radius: 12px;
  margin: 0 0 20px;
  padding: 20px;
  box-shadow: 10px 10px 20px rgba(57, 48, 109, 0.13);
}

.card-bg ul:last-child {
  margin: 0;
}

/**
 * ttl : title の略語 (HTMLに title 要素があるのでそれと被らないようにしている)
 */
.ttl-card {
  position: relative;
  font-size: 18px;
  margin: 0 0 16px;
  padding: 0 0 0 15px;
  line-height: 170%;
}

.ttl-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
  width: 6px;
  height: 100%;
  background: #0cbaa0;
}

.ttl-card-black {
  position: relative;
  font-size: 18px;
  margin: 0 0 16px;
  padding: 0 0 0 15px;
  line-height: 170%;
}

.ttl-card-black::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
  width: 6px;
  height: 100%;
  background: #333;
}

.ttl-card span {
  background: #ea4b69;
  border-radius: 20px;
  color: #fff;
  font-size: 11px;
  margin: -2px 0 0 10px;
  padding: 0 10px;
  display: inline-table;
  vertical-align: middle;
  line-height: 170%;
}

/* アンカーリンクで遷移した際にトップのメニューとかぶらないようにするための処置 */
.card-bg #contact_address_form {
  padding-top: 60px;
  margin-top: -60px;
}

.card-bg #connection_type_form {
  padding-top: 60px;
  margin-top: -60px;
}

@media screen and (max-width: 320px) {
  .card-bg ul h2 {
    font-size: 15px;
  }
}

.card-bg ul h3.ttl-green {
  color: #07b097;
}

.card-bg ul li .form {
  margin: 0 0 20px;
}

.card-bg ul li .form input.form {
  margin: 5px 0;
}

.card-bg ul .phone-num {
  font-size: 16px;
}

.phone-num .verify-label {
  display: inline-block;
  border: 1px solid #0cbaa0;
  border-radius: 3px;
  color: #0cbaa0;
  font-size: 12px;
  padding: 0 5px;
  line-height: 1.5;
  vertical-align: middle;
  margin-left: 8px;
}

.phone-num .verify-label.is-none {
  border-color: #ee3255;
  color: #ee3255;
}

.card-bg .form-item-wrap {
  position: relative;
}

.card-bg .form-item-wrap+.form-item-wrap {
  padding-top: 20px;
  margin-top: 20px;
}

.card-bg .form-item-wrap+.form-item-wrap::before {
  content: "";
  width: calc(100% + 40px);
  height: 1px;
  background: #ddd;
  position: absolute;
  top: 0;
  left: -20px;
}

/* 登録情報変更 スイッチボタン */
.card-bg .form-switch {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
}

.card-bg .switch-btn-wrap input {
  display: none;
}

.card-bg .switch-btn-wrap label {
  display: block;
  width: 57px;
  height: 25px;
  background: #d6d6d6;
  border: none;
  border-radius: 999em;
  position: relative;
  cursor: pointer;
}

.card-bg .switch-btn-wrap label::before {
  content: "";
  display: inline-block;
  width: 23px;
  height: 23px;
  background: #fff;
  border-radius: 999em;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all 0.2s;
}

.card-bg .switch-btn-wrap input:checked+label {
  background: #0cbaa0;
}

.card-bg .switch-btn-wrap input:checked+label::before {
  box-shadow: -2px 0 3px rgba(0, 0, 0, 0.2);
  left: calc(100% - 24px);
}

@media screen and (max-width: 320px) {
  .card-bg .form-switch {
    font-size: 12px;
  }

  .card-bg .switch-btn-wrap label {
    width: 50px;
  }
}

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

div.form input.input-gender+label {
  display: inline-block;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  color: #999;
  width: calc((100% / 3) - 20px);
  padding: 6px 0 5px;
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
}

/* 男性選択時 */
div.form input.input-gender:checked+label {
  border-color: #07b097;
  color: #07b097;
}

/* 新規会員登録フォーム：生年月日 */
.card-bg ul li .birth-date {
  display: flex;
}

.card-bg ul li .birth-date .form select:nth-of-type(1) {
  width: 80px;
  margin: 0 5px 0 0;
  padding: 10px;
}

.card-bg ul li .birth-date .form select:nth-of-type(2),
.birth-date .form select:nth-of-type(3) {
  width: 49px;
  margin: 0 5px 0 0;
  padding: 10px;
}

.card-bg ul li .birth-date .form span {
  font-size: 13px;
  margin: 0 16px 0 0;
}

.card-bg ul li .birth-date .form span:nth-of-type(3) {
  margin-right: 0;
}

@media screen and (max-width: 320px) {
  .card-bg ul li .birth-date .form select:nth-of-type(1) {
    width: 70px;
  }

  .card-bg ul li .birth-date .form:nth-of-type(2) select,
  .birth-date .form:nth-of-type(3) select {
    width: 40px;
  }

  .card-bg ul li .birth-date .form span {
    margin: 0 5px 0 0;
  }
}

/* 新規会員登録フォーム：ご登録について */
.card-bg ul.attention-regist {
  border-radius: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.card-bg ul.attention-regist>li {
  font-size: 14px;
  line-height: 170%;
}

.card-bg ul.attention-regist>li+li {
  margin-top: 10px;
}

/* 新規会員登録フォーム：ビギナーサポートエリア */
.card-bg .img-bnr {
  margin: 5px 0 15px;
}

.card-bg .img-bnr img {
  width: 100%;
  height: auto;
}

/* 新規会員登録フォーム：ボタンエリア */
.card-bg-btn {
  text-align: center;
  padding: 0 0 10px;
}

.card-bg-btn p {
  padding: 0 20px;
  text-align: left;
}

/* 新規会員登録フォーム：利用規約同意チェックボックス */
.register_disable input.disable-color {
  background: #ccc;
  pointer-events: none;
}

.agreement-area label {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.agreement-area input {
  transform: scale(1.5);
}

.agreement-area-text {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 0 10px;
}

@media screen and (max-width: 320px) {
  .agreement-area input {
    transform: none;
  }

  .agreement-area-text {
    font-size: 13px;
    letter-spacing: -1px;
    margin: 0 0 0 5px;
  }
}

/* 新規会員登録フォーム：秘密の質問 */
.select-secret select {
  width: 100%;
  height: 40px;
  margin: 5px 0 20px;
  padding: 10px;
}

/* 新規会員登録フォーム：ログイン方法 */
.regist-login-explan {
  padding: 10px 0 20px;
}

.regist-login-explan p {
  color: #07b097;
  margin: 0 0 5px;
}

.regist-login-explan p:nth-of-type(1) span,
.regist-login-explan p:nth-of-type(3) span {
  border: 1px solid #0cbaa0;
  border-radius: 20px;
  font-size: 12px;
  padding: 5px 10px;
}

.regist-login-howto-wrap {
  background: #f8f8f8;
  border: 1px solid #333;
  border-radius: 12px;
  margin: 0 0 15px;
  padding: 16px 16px 0;
}

.regist-login-howto {
  display: flex;
  align-items: center;
}

.regist-login-howto p {
  font-weight: bold;
  margin: 0 0 0 5px;
}

input.regist-login-howto-mail {
  border: none !important;
  background: #f8f8f8;
}

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

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

.radio-item .radio-text::before {
  content: "";
  width: 18px;
  height: 18px;
  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: #0cbaa0;
}

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

/* 新規会員登録フォーム：エラー文言 */
::placeholder {
  color: #ccc;
  font-weight: normal;
}

.errorArea {
  color: #ee3255;
  font-size: 12px;
  font-weight: bold;
}

/* 新規会員登録フォーム：エラー枠 */
.js_css_regist_validation_error>select {
  border: 1px solid #ea4b69 !important;
}

.js_css_regist_validation_error>input {
  border: 1px solid #ea4b69 !important;
}

.js_css_none_display_regist_validation_error {
  display: none;
}

/* フォーム（新規登録フォーム以外）
--------------------------------------------------------- */
div.form-wrap>ul li {
  padding: 14px;
  border-top: 1px dashed #c0cde9;
}

div.form-wrap>ul li:last-child {
  border-bottom: 1px dashed #c0cde9;
}

div.form-wrap>ul li:first-child {
  border: none;
}

div.form input {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  -webkit-tap-highlight-color: rgba(65, 65, 65, 0.1);
}

div.form input:focus {
  outline: none;
}

div.form-wrap textarea {
  /* -- 口コミ記入ページで枠消えていたので追加 -- */
  width: 95%;
  border: 1px #ccc solid;
}

textarea {
  width: 97%;
  font-size: 14px;
  color: #333;
  border: solid 1px #ccc;
  margin: 5px 0;
  padding: 8px;
  border-radius: 12px;
}

label.women {
  background: none repeat scroll 0 0 #fb99b6;
  padding: 7px;
  width: 45%;
  float: left;
}

label.men {
  background: none repeat scroll 0 0 #b0e0e6;
  padding: 7px;
  width: 45%;
  float: left;
}

input.button-form {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  width: 86%;
  height: 60px;
  line-height: 60px;
  margin: 10px auto 30px;
  background-color: #0ca795;
  padding: 0;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: 1px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.button-form-half input {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  width: 84%;
  height: 50px;
  line-height: 50px;
  margin: 20px auto 30px;
  background-color: #0ca795;
  padding: 0;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: 1px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.button-form-half-border input {
  display: block;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #0ca795 !important;
  color: #0ca795;
  width: 84%;
  height: 55px;
  line-height: 50px;
  margin: 20px auto 30px;
  background-color: #fff;
  padding: 0;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: 1px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.p_wid {
  font-size: smaller;
}

/* 電話番号認証
--------------------------------------------------------- */
.regist-form-inner {
  background: #f8f8f8;
  padding: 20px;
}

.regist-form-inner h1 {
  font-size: 22px;
  margin: 0 0 20px;
  text-align: center;
}

.regist-form-inner .box-form {
  background: #fff;
  border-radius: 12px;
  box-shadow: 10px 10px 20px rgba(57, 48, 109, 0.13);
  padding: 20px;
}

.form-inner-bg {
  background: #f5f8fe;
  border-radius: 5px;
  padding: 17px;
}

.form-inner-bg .form {
  margin: 0 auto;
}

.head-alert {
  color: #ee3255;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
}

.head-alert.sr {
  font-size: 12px;
}

input.text-link-icon-arr {
  background: url("../images/icon/icon-link-arr-right-blue.svg") no-repeat right center;
  color: #0e82ed;
  padding-right: 12px;
}

/* /recruit/のラジオボタン表示させるため
--------------------------------------------------------- */
input[type="radio"] {
  -webkit-appearance: radio;
  transform: scale(1.5);
  margin: 0 5px 0;
}

/* /my/profile/　通話方法ラジオボタン
--------------------------------------------------------- */
.area-connection {
  display: block;
  padding: 5px 0 8px 0;
}

.area-connection input:disabled+label {
  color: #aaa;
}

/* /my/profile/　登録完了
--------------------------------------------------------- */
.action-connection-app {
  padding: 0 20px 20px;
}

/* セレクトボックス
--------------------------------------------------------- */
.form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  background: #fff url(../images/arrow.png) no-repeat right 3px center;
  background-size: 10px auto;
  border-radius: 8px;
  color: #000;
  padding: 5px 10px 5px 5px;
  min-height: 33px;
}

.form select:focus {
  outline: none;
}

/* ページトップ
--------------------------------------------------------- */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 10px;
  font-size: 77%;
  z-index: 200;
}

#page-top a {
  background: #fff;
  border: 1px #333 solid;
  opacity: 0.7;
  text-decoration: none;
  width: 40px;
  padding: 12px 4px 11px;
  text-align: center;
  display: block;
  border-radius: 50px;
  box-shadow: 2px 2px 4px #ccc;
}

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

.alert-danger {
  position: relative;
  background-color: #fff6f6;
  border: 1px #ee3255 solid;
  border-radius: 12px;
  color: #ee3255;
  font-size: 13px;
  padding: 14px;
  margin: 14px 0;
}

.alert-danger img {
  position: absolute;
  top: 17px;
}

.alert-danger p {
  padding: 0 !important;
  text-indent: 1.4em;
}

.alert-danger .icon-no-alert {
  text-indent: 0;
}

.alert-danger .icon-no-alert img {
  position: static;
}

.alert-danger-noborder {
  background-color: #fff5f4;
  border-radius: 5px;
  padding: 10px;
  margin: 14px 0;
  display: flex;
  align-items: center;
}

.alert-danger-noborder p {
  position: relative;
  color: #ee3255;
  font-size: 13px;
  font-weight: bold;
  text-indent: 1.5em;
}

.alert-danger-noborder p::before {
  content: '';
  background: url(../images/icon/icon-alert-triangle-border.svg) no-repeat;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 5px;
}

.alert-danger-txt {
  color: #ee3255;
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 25px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 320px) {
  .alert-danger-txt {
    font-size: 12px;
  }
}

ul.profile-emphasis {
  display: flex;
  background: #fff;
  border: 1px #c0cde9 solid;
  border-radius: 8px;
  font-size: 13px;
}

ul.profile-emphasis li {
  padding: 8px;
}

ul.profile-emphasis li:nth-of-type(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f6fa;
  border-radius: 8px 0 0 8px;
  color: #555;
  text-align: center;
  width: 27%;
  white-space: nowrap;
}

ul.profile-emphasis li:nth-of-type(2) {
  display: flex;
  justify-content: space-between;
  width: 70%;
  font-size: 14px;
  word-break: break-word;
}

@media screen and (max-width: 320px) {
  ul.profile-emphasis {
    font-size: 12px;
  }

  ul.profile-emphasis li:nth-of-type(1) {
    font-size: 10px;
    letter-spacing: -0.05em;
  }

  ul.profile-emphasis li:nth-of-type(2) {
    font-size: 12px;
  }
}

.btn-secondary {
  background: #0ca795;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 50px;
  color: #fff !important;
  font-size: 18px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
  position: relative;
}

a.btn-secondary:hover {
  text-decoration: none;
  cursor: pointer;
}

.btn-secondary-outline {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  border: 1px #0ca795 solid;
  border-radius: 50px;
  color: #0ca795 !important;
  font-size: 18px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
  position: relative;
}

.btn-secondary-outline:hover {
  text-decoration: none;
  cursor: pointer;
}

.btn-alert {
  background: #fff0f0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  border: 1px #ef2929 solid;
  border-radius: 50px;
  color: #ef2929 !important;
  font-size: 14px;
  font-weight: bold;
  display: block;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
}

.btn-inactive {
  background: #ccc;
  border-radius: 50px;
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
  position: relative;
}

input.btn-line {
  display: block;
  background: #06c755;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
}

ul.alert-unpaid li {
  display: flex;
  align-items: center;
  background: #fff0f0;
  color: #f74242;
  font-size: 13px;
  padding: 10px;
}

ul.alert-unpaid li a {
  color: #f74242;
  text-decoration: underline;
}

.alert-icon {
  background: #f55d5d;
  border-radius: 20px;
  color: #fff;
  font-size: 10px;
  padding: 3px 5px;
  text-align: center;
  margin: 0 3px 0;
}

/* マイページ
--------------------------------------------------------- */

/* message-badge */
.message_new_badge_menu {
  width: 9px;
  height: 9px;
  background: #ea4b69;
  border: 1px solid #fff;
  border-radius: 999em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 4px;
  right: 4px;
}

/* 所持コイン（トップ）
--------------------------------------------------------- */
.area-coin {
  background: #f4f6fa;
  border-bottom: 1px solid #e2e8f4;
  position: relative;
}

.area-coin .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0;
}

.area-coin .inner a {
  color: #666;
}

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

.area-coin .inner p {
  font-size: 17px;
  font-weight: bold;
  padding: 2px 0 0 0;
}

.area-coin .balloon {
  position: absolute;
  max-width: 190px;
  border: 2px #f2185a solid;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  padding: 5px 10px;
  color: #f2185a;
  font-size: 11px;
  font-weight: bold;
  line-height: 140%;
  top: -46px;
  right: 20px;
  margin: auto;
  box-shadow: 2px 2px 4px #ccc;
}

.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: 100%;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  border-width: 10px;
}

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

.area-coin .balloon::after {
  border-top-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: 376px) and (max-width: 767px) {

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

@media screen and (max-width: 320px) {
  .area-coin .balloon {
    font-size: 10px;
    top: -43px;
  }
}

/* 法人利用可能額
--------------------------------------------------------- */
.area-biz-available {
  background: #f4f6fa;
  border-bottom: 1px solid #e2e8f4;
  position: relative;
}

.area-biz-available .inner {
  padding: 2px 0;
}

.biz-available-amount {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.biz-available-amount>img {
  display: block;
  margin-right: 5px;
}

.biz-available-amount>span {
  font-size: 18px;
}

.biz-available-amount .unit {
  font-size: 12px;
}

/* 待機リクエスト
--------------------------------------------------------- */
.standbyRequestModal {
  background-color: #fff;
  border-radius: 10px;
  width: 260px;
  padding: 20px 20px;
}

#standbyRequestErrorModal {
  z-index: 3;
  position: fixed;
}

.standbyRequestModal .subject {
  text-align: center;
  width: 80%;
  margin: 0 auto;
}

.standbyRequestSubmit {
  text-align: center;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5px;
}

.staRequest {
  border-radius: 12px;
  border: 1px dashed #465384;
  color: #465384;
  font-size: 13px;
  padding: 16px;
  margin: 20px 0 30px;
  text-align: center;
}

.staRequest>p {
  color: #465384;
}

.staRequest>a {
  font-size: 13px;
  display: inline-block;
  margin: 10px 0 15px;
}

.staRequest-att {
  color: #666;
  font-size: 10px;
  letter-spacing: -0.05em;
  line-height: 140%;
  text-align: left;
}

/* モーダルポジション関連（待機リクエストのモーダルで使用中） */
#modal_overlay {
  z-index: 5;
  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: 6;
  position: fixed;
  text-align: center;
}

.modal_content .explain ul li {
  display: inline-block;
  line-height: 160%;
  padding: 0 0 15px 0;
  text-align: left;
}

/* ヘルプ
--------------------------------------------------------- */
ul.tokusyoho {
  margin: 0;
}

ul.tokusyoho li {
  padding: 20px 0;
  border-bottom: 1px solid #e5eafc;
}

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

ul.tokusyoho li h2 {
  margin-bottom: 5px;
}

/* disclaimer */
ul#disclaimer h2 {
  font-size: larger;
  font-weight: bold;
  padding-top: 15px;
}

ul#disclaimer>li {
  list-style-type: none;
  padding-bottom: 15px;
}

ul#disclaimer>ol>li {
  list-style-type: decimal;
  margin: 0 1em 0.7em 2em;
}

ol.disclaimer_etc {
  padding-left: 1.5em;
  word-break: break-word;
}

ol.disclaimer_etc>li {
  list-style-type: none;
  margin: 0 1em 0.7em 2em;
}

ul.disclaimer_ul>li {
  list-style-type: none;
  margin: 0 1em 0.7em 2em;
}

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

/* お知らせ
--------------------------------------------------------- */
.top-area-info {
  font-size: 16px;
  margin: 0 0 10px;
}

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

.top-area-info-day {
  color: #999;
  font-size: 11px;
  margin: 0 0 2px;
}

/* お知らせ（内容）
--------------------------------------------------------- */
.info-data {
  padding: 18px;
}

.info-data img {
  width: 100%;
  padding: 0 0 5px;
}

span.info-data-ft {
  display: block;
  margin: 20px 0 0;
  text-align: right;
}

/* TOPキービジュアル
--------------------------------------------------------- */
.kv-area .key-visual {
  margin: 0;
  border-bottom: 1px solid #ddd;
  position: relative;
  height: 264px;
}

.kv-area .key-visual-img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 320px) {
  .kv-area .key-visual {
    height: 220px;
  }
}

/* Index 無料カウンセリング
--------------------------------------------------------- */
.free_counseling_list {
  margin-bottom: 20px;
}

.free_counseling_list li {
  border-bottom: 1px solid #e5eafc;
}

.free_counseling_list li a {
  display: block;
  padding-top: 15px;
  color: #000;
  text-decoration: none;
}

.free_counseling_list li a h3 {
  text-decoration: underline;
}

.free_counseling_list li a p.free_counseling_text {
  overflow: hidden;
  margin-top: 5px;
}

.free_counseling_list li a p.free_counseling_text span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.ctgname {
  display: inline-block;
  font-size: 10px;
  color: #766e6b;
  margin: 10px 5px;
  padding: 0 10px;
  background-color: #fff;
  border: 1px solid #dededa;
  border-radius: 20px;
}

/* ステータスボタン
--------------------------------------------------------- */
ul.status-btn {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

ul.status-prf {
  width: 92%;
  margin: 0 auto;
}

ul.status-btn li>a,
ul.status-btn li.staOn span,
ul.status-prf li>a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 50px;
  margin: 5px 0;
  border-radius: 50px;
}

ul.group-list li a {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 40px;
  margin: 5px 0;
  overflow: hidden;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  border: 1px #d5dceb solid;
}

.debut ul.group-list li a:nth-of-type(2) {
  display: block !important;
  border: none !important;
  border-radius: 0;
  letter-spacing: -0.01em;
  height: auto;
}

ul.group-list li .staStd a,
ul.group-list li div.staOn a,
ul.group-list li div.staRe a,
ul.group-list li div.staOut a {
  border: none;
  border-radius: 4px !important;
  font-size: 12px;
  height: 40px !important;
}

ul.status-btn li.staStd a,
ul.status-prf li.staStd a,
div.staStd a {
  background-color: #0ca795;
  border: 1px #0ca795 solid;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

ul.status-btn li.staOn a,
ul.status-prf li.staOn a,
div.staOn a {
  background-color: #ea4b69;
  color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

ul.status-btn li.staOn span,
ul.status-prf li.staOn span {
  display: block;
  background-color: #ea4b69;
  color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

ul.status-btn li.staRe a,
ul.status-prf li.staRe a,
div.staRe a {
  background-color: #ffbf66;
  color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/* トップページランキング、閲覧したカウンセラーで使用されている */
ul.status-btn li.staOut a,
ul.status-prf li.staOut a,
div.staOut a {
  background-color: #eaeaea;
  color: #999;
}

/* お断りされている場合に退席中を表示
--------------------------------------------------------- */
.staOut .turn-down {
  background-color: #eaeaea;
  border-radius: 5px;
  color: #999;
  display: block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 50px;
  margin: 5px 0;
  text-align: center;
}

/* LINEで待機通知を受け取る関連のsvgアイコン
--------------------------------------------------------- */
.notification-bell::before {
  content: '';
  display: inline-block;
  background: url("../images/icon/icon-bell.svg") no-repeat;
  vertical-align: text-top;
  height: 16px;
  width: 16px;
  margin: 0 4px;
}

.notification-check::before {
  content: '';
  display: inline-block;
  background: url("../images/icon/icon-check.svg") no-repeat;
  vertical-align: text-top;
  height: 16px;
  width: 16px;
  margin: 0 4px;
}

/* 待機通知を受け取るモーダルボタン
--------------------------------------------------------- */
li.staOut-notification>button {
  background-color: #fff;
  border: 1px solid #0ca795;
  color: #0ca795;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  letter-spacing: 1px;
  line-height: 50px;
  margin: 5px 0;
  border-radius: 50px;
  width: 100%;
}

li.staOut-notification>button img {
  width: 16px;
  height: auto;
  margin: 0 4px 0 0;
}

.staOut-notification-text {
  color: #707070;
  font-size: 10px;
  text-align: center;
}

.btn-status {
  box-sizing: border-box;
  position: inherit;
  bottom: 0;
  left: 0;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #fff;
}

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

  ul.status-prf li.staRequest a,
  ul.status-prf li.staRequest span {
    font-size: 11px;
  }
}

/* top ランキング
--------------------------------------------------------- */
.ttl-rank-category {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #333;
  font-size: 16px;
  margin-bottom: 15px;
}

.ttl-rank-category>.link-text {
  font-size: 13px;
  font-weight: normal;
}

.rank_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-bottom: 30px;
}

.rank_list ul li {
  width: calc((100% / 3) - 7px);
}

.rank_list ul li:not(:first-child) {
  margin-left: 10px;
}

.rank_list ul li a {
  text-decoration: none;
}

@media screen and (max-width: 320px) {
  .rank_list ul li a {
    font-size: 12px !important;
  }
}

.rank_list ul li a div.photo {
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #dededa;
  margin: 0 auto;
}

.rank_list ul li a div.photo img {
  width: 100%;
  height: auto;
}

.rank_list ul li a p.name {
  color: #333;
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline;
  margin: 5px 0 0 0;
}

.rank_list ul li a p.date {
  color: #333;
  font-size: 10px;
  text-decoration: none;
  margin-bottom: 5px;
}

.rank_list .member-btn a {
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  display: block;
  font-size: 13px;
  font-weight: bold;
  margin: 0 auto;
  padding: 8px;
  width: 80%;
}

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

.audio {
  position: absolute;
  left: 5px;
  top: 138px;
}

.audio_button_start,
.audio_button_pause {
  background: #fff;
  border: 1px #333 solid;
  border-radius: 50px;
  color: #333;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 6px;
  text-align: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

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

  .audio_button_start,
  .audio_button_pause {
    font-size: 10px;
  }
}

.audio-icon-up::before {
  content: '';
  display: inline-block;
  background: url("../images/icon/icon-voice.svg") no-repeat;
  vertical-align: text-top;
  height: 14px;
  width: 14px;
  margin: 0 4px;
}

.audio-icon-stop::before {
  content: '';
  display: inline-block;
  background: url("../images/icon/icon-voice-stop.svg") no-repeat;
  vertical-align: text-top;
  height: 14px;
  width: 14px;
  margin: 0 4px;
}

.audio_hidden {
  display: none;
}

.audio_confirmation {
  display: flex;
  justify-content: space-around;
  margin: 15px auto 0;
  text-align: center;
  width: 90%;
}

.audio_confirmation .btn-no {
  display: block;
  background: #fff;
  border: 1px #465384 solid;
  border-radius: 6px;
  color: #465384;
  font-size: 13px;
  padding: 10px;
  margin: 0 10px;
  width: 100%;
}

.audio_confirmation .btn-yes {
  display: block;
  background: #465384;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  margin: 0 10px;
  width: 100%;
}

@media screen and (min-width: 390px) {
  .audio {
    position: absolute;
    left: 5px;
    top: 138px;
  }
}

@media screen and (max-width: 320px) {
  .audio {
    position: absolute;
    left: 0;
    top: 110px;
  }
}

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

.breadcrumbs li {
  display: flex;
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  align-items: center;
}

.breadcrumbs li a {
  display: flex;
  align-items: center;
  color: #000;
  font-size: 12px;
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  text-decoration: none;
}

.breadcrumbs li::after {
  content: "";
  background: url("../img/item/icon-link-arr-right-gray.svg") no-repeat;
  width: 7px;
  height: 10px;
  margin: 0 9px;
}

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

/* テーブル
--------------------------------------------------------- */
table.formWrap {
  border-collapse: collapse;
  width: 100%;
}

table.formWrap th,
table.formWrap td {
  border: 1px solid #dbe1e8;
  padding: 8px;
}

table.formWrap th {
  background: #f9fafc;
  text-align: left;
  width: 120px;
}

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

  table.formWrap tr,
  table.formWrap th,
  table.formWrap td {
    display: block;
    width: auto;
  }

  table.formWrap tr:first-child {
    border-top: 1px solid #dbe1e8;
  }

  table.formWrap th,
  table.formWrap td {
    border-top: none;
  }
}

.form {
  position: relative;
  font-family: Arial, sans-serif;
  color: #000;
  margin: 5px auto;
  border-radius: 3px;
}

label.label {
  background: none repeat scroll 0 0 #fff;
  padding: 7px;
}

label.box {
  background: none repeat scroll 0 0 #fff;
  height: 10px;
}

label.box input {
  margin: 0 0 0 5px;
  padding: 10px;
  -webkit-appearance: checkbox;
}

.indispensable {
  background-color: #e0403e;
  color: #fff;
  padding: 5px 8px;
  border-radius: 3px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
}

.indispensable-label {
  display: inline-block;
  margin-left: 7px;
  background: #ea4b69;
  border-radius: 999em;
  color: #fff;
  font-size: 11px;
  padding: 0 10px;
  vertical-align: middle;
  line-height: 170%;
}

input.formBtn,
.regPayBtn input {
  display: block;
  font-size: 18px;
  font-weight: 700;
  background-color: #0ca795;
  color: #fff;
  width: 80%;
  height: 50px;
  line-height: 50px;
  margin: 10px auto;
  padding: 0;
  border: none;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
}

input.formBtn:hover,
.regPayBtn input:hover {
  background-color: #0ca795;
}

div.formbtn {
  padding: 10px 0;
}

div.formbtn ul {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

div.formbtn ul li {
  display: table-cell;
  vertical-align: middle;
}

input.submitRegCommitBtn {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  width: 90%;
  height: 50px;
  line-height: 50px;
  background-color: #0ca795;
  margin: 10px auto 20px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
}

input.submitRegCommitBtn:hover {
  opacity: 0.9;
}

input.submitRegRewriteBtn {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #0ca795;
  width: 90%;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  margin: 10px auto;
  padding: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #0ca795;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
}

input.submitRegRewriteBtn:hover {
  opacity: 0.9;
}

.regPayBtn {
  text-align: center;
}

/* スケジュール一覧（/schedule/）
--------------------------------------------------------- */
#all-schedule {
  margin: 0 auto 50px;
}

#all-schedule h2 {
  font-size: 16px;
  font-weight: normal;
}

#all-schedule .attention {
  color: #555;
  font-size: 11px;
  line-height: 140%;
  margin: 20px 0 5px;
}

.schedule-switch-day {
  display: flex;
  margin: 5px auto 20px;
  border: 2px #999 solid;
}

.schedule-switch-day li {
  border-right: 2px #999 solid;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

.schedule-switch-day li:last-child {
  border-right: none;
}

.schedule-switch-day li a {
  color: #333;
  display: block;
  padding: 5px 0;
  text-decoration: none;
}

.schedule-switch-day li a.active {
  background: #0cbaa0;
  color: #fff;
}

.schedule-switch-day li a span+span {
  display: block;
  font-size: 11px;
  font-weight: normal;
}

.schedule-switch li {
  background: #eee;
  border-radius: 5px;
  display: flex;
  margin: 0 auto 10px;
  padding: 5px;
}

.schedule-switch li button {
  color: #333;
  display: block;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 0;
  text-decoration: none;
  width: 50%;
}

.schedule-switch li button.active {
  background: #0cbaa0;
  border-radius: 3px;
  color: #fff;
}

.schedule-switch+a {
  display: block;
  margin: 0 0 20px;
  text-align: right;
}

.schedule-switch-link {
  display: flex;
  justify-content: end;
  margin: 0 0 20px;
}

#all-schedule .scroll-table {
  border: 2px #ccc solid;
  overflow: auto;
  white-space: nowrap;
}

#all-schedule table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
}

#all-schedule table tbody {
  display: block;
}

#all-schedule table th:first-child {
  border-left: none;
}

#all-schedule table th:last-child {
  border-right: none !important;
}

#all-schedule .table-sticky {
  /* 固定エリア */
  background: #eee !important;
  border-right: 2px #ccc solid !important;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}

#all-schedule div.schedules-teller-prof-photo {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px #ccc solid;
  border-radius: 50%;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#all-schedule td.schedules-teller-prof img {
  border-radius: 50%;
  left: -100%;
  right: -100%;
  margin: auto;
  width: 100%;
  height: auto;
  top: -5px;
}

#all-schedule div.schedules-teller-prof-name {
  font-size: 11px;
  width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#all-schedule table.sch tr th {
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 7px 2px;
}

#all-schedule table.sch tr td {
  padding: 2px 10px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

#all-schedule table.sch tr:first-child th {
  border-top: none;
}

#all-schedule table.sch tr td:last-child {
  border-right: none;
}

#reserve-display td.reserve-on {
  background: url(../images/icon-en-on.svg) no-repeat center;
}

#reserve-display td.reserved-on {
  background: url(../images/icon-en-off.svg) no-repeat center;
}

#standby-display td.standby-on {
  background: url(../images/icon-en-wite.svg) no-repeat center;
}

th.time-selected {
  background: #e6e1c9 !important;
}

.coinInfo {
  color: #e74c3c;
  font-weight: bold;
  font-size: 12px;
}

/* マイページ下層ナビ
--------------------------------------------------------- */
.my-menu-area ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.my-menu-area ul li {
  display: inline-block;
  height: 120px;
  width: 33.09%;
  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 + 4) {
  border-top: none;
}

.my-menu-area ul li a {
  display: block;
  height: 120px;
  color: #333;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.my-menu-area ul li a img {
  padding: 20px 0 0 0;
}

@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 {
  padding: 10px 0;
}

#regist-area a.btn-secondary {
  background: #0ca795;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 50px;
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
  margin: 20px auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
  position: relative;
}

#regist-area a.btn-secondary:hover {
  text-decoration: none;
  cursor: pointer;
}

#regist-area a.btn-secondary-outline {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  border: 1px #333 solid;
  border-radius: 50px;
  color: #333 !important;
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
  margin: 20px auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
  position: relative;
}

#regist-area a.btn-secondary-outline:hover {
  text-decoration: none;
  cursor: pointer;
}

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

#regist-area .title-my h1 {
  padding: 28px 0;
}

#regist-area .recommended-text {
  margin: 30px 0 20px;
  text-align: center;
}

#regist-area .recommended-text h2 {
  font-size: 20px;
  margin-bottom: 17px;
  line-height: 1.6;
}

#regist-area .recommended-text+img {
  width: 84%;
  height: auto;
  display: block;
  margin: 0 auto 30px;
}

#regist-area .recommended-text .ttl-beginner {
  padding: 53px 0 13px;
  position: relative;
}

#regist-area .recommended-text .ttl-beginner::before {
  content: "";
  display: inline-block;
  width: 90%;
  height: 44px;
  background: url("../images/img-regist-counselor-head.svg") no-repeat center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

#regist-area .recommended-text .ttl-beginner::after {
  content: "";
  display: inline-block;
  width: 75%;
  max-width: 345px;
  border-top: 1px solid #231815;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#regist-area .prof-inner-wrap {
  border-top: 1px #c7d1e5 solid;
}

#regist-area .prof-inner {
  border-bottom: 12px #e9ecf2 solid;
}

#regist-area .prof-inner .member-list {
  border-bottom: 0;
  border-top: 0;
}

#regist-area .member-list .ac-grad-wrap {
  margin-top: 5px;
}

#regist-area .member-list .ac-grad-wrap+.ac-grad-wrap {
  margin-top: 20px;
}

#regist-area .star-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 5px;
}

#regist-area .star-rating {
  color: #f2b31b;
  font-size: 13px;
  position: relative;
  display: table;
  margin: 0 5px 0 0;
}

/* 登録完了（biz調整用） */
#regist-area.is-biz .area-match-jump-btn {
  margin-top: 0;
}

@media screen and (max-width: 360px) {
  #regist-area .recommended-text h2 {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  #regist-area .member-list-wrap .member-list .name {
    font-size: 16px;
  }
}

/* 完了ページの特定カウンセラーに相談するボタン
--------------------------------------------------------- */
#regist-area .area-counselor-jump-btn {
  margin-bottom: 30px;
}

#regist-area .area-counselor-jump-btn a.btn-secondary {
  margin: 0 auto;
}

#regist-area .area-counselor-jump-btn p {
  color: #999;
  font-size: 12px;
}

/* 完了ページのLINE連携
--------------------------------------------------------- */
#regist-area .area-line-jump-btn {
  margin: 30px 0 40px;
  font-size: 13px;
}

.area-line-jump-btn .area-line-jump-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.area-line-jump-ttl img {
  margin-right: 5px;
}

.area-line-jump-ttl p {
  color: #02c755;
  font-size: 20px;
  font-weight: bold;
}

.area-line-jump-btn a {
  background: #06c755;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  border-radius: 50px;
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
  position: relative;
}

.area-line-jump-btn p {
  line-height: 160%;
}

.area-line-jump-weight {
  font-weight: bold;
  font-size: 15px;
}

/* 完了ページのマッチング診断
--------------------------------------------------------- */
#regist-area .area-match-jump-btn {
  margin: 30px 0 40px;
  font-size: 13px;
}

.area-match-jump-btn .area-match-jump-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.area-match-jump-ttl img {
  margin-right: 5px;
}

.area-match-jump-ttl p {
  color: #494fce;
  font-size: 20px;
  font-weight: bold;
}

.area-match-jump-btn a {
  background: #5e63cc;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  border-radius: 50px;
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 84%;
  position: relative;
}

.area-match-jump-btn p {
  line-height: 160%;
}

/* 完了ページのビギサポ制度
--------------------------------------------------------- */
#regist-area .area-beginner-support {
  text-align: center;
}

#regist-area .area-beginner-support img.img-about {
  width: 86%;
  height: auto;
}

/* 完了ページの法人会員
--------------------------------------------------------- */
#regist-area .area-biz-regist-done {
  width: 86%;
  background: #f4f9ff;
  border: 1px solid #257de3;
  border-radius: 12px;
  padding: 20px;
  margin: 0 auto 40px;
  box-sizing: border-box;
}

#regist-area .area-biz-regist-done>.head {
  font-size: 19px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

#regist-area .area-biz-regist-done>.head::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url("../images/icon-user-biz.svg") no-repeat;
  margin-right: 5px;
  vertical-align: -0.3em;
}

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

a.line-bnr img {
  width: 90%;
  height: auto;
}

/* キャンペーンコイン付与表示 */
.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;
}

/* バナーエリア
--------------------------------------------------------- */
.bnr-area img {
  max-width: 100%;
}

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

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

.summary-title span {
  display: inline-block;
  text-indent: 1.6em;
}

/* トップページ：KV内ボタン（共通）
--------------------------------------------------------- */
a.btn-top-green-one {
  display: block;
  width: 60%;
  box-sizing: border-box;
  background: linear-gradient(to right, #0ca795, #2fb886);
  border-radius: 50px;
  box-shadow: 14px 14px 28px rgba(83, 98, 92, 0.18);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  padding: 12px 0 10px;
  text-decoration: none;
  margin: 0 auto;
  line-height: 160%;
}

a.btn-top-green-one span:nth-of-type(1) {
  font-size: 20px;
  display: block;
}

a.btn-top-green-one span:nth-of-type(2) {
  font-size: 12px;
}

@media screen and (max-width: 320px) {
  a.btn-top-green-one span:nth-of-type(1) {
    font-size: 16px;
  }
}

/* トップページ：KV周り（ログイン中）
--------------------------------------------------------- */
.top-btn-area {
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  top: 150px;
}

@media screen and (max-width: 320px) {
  .top-btn-area {
    top: 120px;
  }
}

/* トップページ：KV内ボタン（未ログイン）
--------------------------------------------------------- */
.top-btn-area-guest {
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  top: 110px;
  z-index: 1;
}

.top-btn-area-guest .count-box {
  margin: 0 auto;
  text-align: center;
}

.top-btn-area-guest .count-box-inner {
  position: relative;
  display: inline-block;
  margin: 0 0 24px;
  padding: 10px 16px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  background: #fff;
  border: 1px #333 solid;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 3px 3px 4px rgba(57, 48, 109, 0.25);
}

.top-btn-area-guest .count-box-inner::before {
  content: "";
  position: absolute;
  bottom: -21px;
  left: 52%;
  margin-left: -17px;
  border: 10px solid transparent;
  border-top: 13px #fff solid;
  z-index: 2;
}

.top-btn-area-guest .count-box-inner::after {
  content: "";
  position: absolute;
  bottom: -23px;
  left: 52%;
  margin-left: -17px;
  border: 10px solid transparent;
  border-top: 13px #333 solid;
  z-index: 1;
}

.top-btn-area-guest .count-box-inner p {
  line-height: 160%;
}

.top-btn-area-guest .count-box-inner span {
  color: #fd520c;
  font-size: 20px;
  font-weight: bold;
}

.top-btn-area-guest .count-box-inner span .number-word {
  font-size: 15px;
}

a.lead-link-expo2025 {
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: 84px;
}

a.lead-link-expo2025 img {
  width: 60%;
  height: auto;
}

a.lead-link {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  bottom: 20px;
  color: #333;
  font-size: 13px;
  letter-spacing: -0.2px;
  margin: 0 20px;
  padding: 10px;
  display: flex;
  align-items: center;
  text-decoration: none;
  width: 85%;
}

a.lead-link img {
  padding-right: 5px;
}

@media screen and (max-width: 430px) {
  .top-btn-area-guest {
    top: 110px;
  }

  a.lead-link-expo2025 {
    bottom: 94px;
  }
}

@media screen and (max-width: 390px) {
  .top-btn-area-guest {
    top: 100px;
  }

  a.lead-link-expo2025 {
    bottom: 84px;
  }
}

@media screen and (max-width: 360px) {
  a.lead-link-expo2025 {
    bottom: 74px;
  }

  a.lead-link {
    font-size: 12px;
  }
}

@media screen and (max-width: 320px) {
  .top-btn-area-guest {
    top: 86px;
  }

  .top-btn-area-guest .count-box-inner {
    font-size: 13px;
  }

  .top-btn-area-guest .count-box a span:nth-of-type(1) {
    font-size: 18px;
  }

  a.lead-link {
    font-size: 11px;
  }
}

/* トップページ：KV
--------------------------------------------------------- */
.kv-area {
  position: relative;
  /* background: linear-gradient(#fff 82%, #dff0e6); */
}

.kv-area .img-catch,
.kv-area .img-catch-sub {
  display: flex;
  justify-content: center;
}

.kv-area .img-woman {
  position: absolute;
  bottom: 0;
}

.kv-area .img-woman img,
.kv-area .img-catch img {
  display: block;
  width: 100%;
  height: auto;
}

.kv-area .img-catch-sub img {
  display: block;
  width: 50%;
  height: auto;
}

/* トップページ：KV（guest）
--------------------------------------------------------- */
.kv-area-guest {
  position: relative;
  background: linear-gradient(#fff 82%, #dff0e6);
}

.kv-area-guest .img-catch {
  display: block;
  width: 100%;
  height: auto;
  padding-top: 20px;
}

.kv-area-guest .img-woman {
  display: block;
  width: 100%;
  height: auto;
  padding-top: 120px;
}

.kv-area-guest .img-woman img,
.kv-area-guest .img-catch img {
  display: block;
  width: 100%;
  height: auto;
}

/* トップページ：ビギナーサポート制度実施中リンク
--------------------------------------------------------- */
.top-link-beginner-support {
  position: absolute;
  top: 145px;
  left: 0;
  right: 0;
  text-align: center;
}

.top-link-beginner-support a {
  text-decoration: none;
  color: #fe6422;
  font-size: 13px;
  font-weight: bold;
}

.top-link-beginner-support a img {
  margin-right: 3px;
}

.top-link-beginner-support .mark-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.top-beginner-support-limit {
  background: #fe6422;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px 0;
  margin: 10px auto;
  text-align: center;
  width: 60%;
  max-width: 200px;
  position: relative;
}

.top-beginner-support-limit::before {
  content: "";
  border: 5px solid transparent;
  border-bottom: 7px solid #fe6422;
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
}

.top-link-beginner-support-detail {
  text-decoration: underline;
  font-weight: normal;
}

@media screen and (max-width: 320px) {
  .top-btn-area-beginner-support {
    padding: 0 15px 8px;
  }

  .top-link-beginner-support {
    top: 120px;
  }

  .top-link-beginner-support a,
  .top-beginner-support-limit {
    font-size: 11px;
  }

  .top-link-beginner-support a img {
    width: 9px;
    height: auto;
  }
}

/* トップページ：共通
--------------------------------------------------------- */
.ttl-top-sec img {
  height: auto;
  max-width: 94%;
}

/* トップページ：top-point-area
--------------------------------------------------------- */
.top-point-area {
  background: #ecfaf7;
  padding: 30px 15px;
}

.top-point-summery {
  margin: 20px 0 25px;
}

.top-point-category {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5px;
}

.top-point-category>li {
  display: inline-block;
  background: #cdeee5;
  border-radius: 999em;
  font-size: 13px;
  padding: 2px 15px;
  margin: 5px;
}

@media screen and (max-width: 320px) {
  .top-point-category>li {
    font-size: 12px;
    margin: 4px;
  }
}

.top-point-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
}

.top-point-item>li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 98px;
  height: 98px;
  background: #fff;
  border: 1px solid #ee3255;
  border-radius: 999em;
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}

.top-point-item>li+li {
  margin-left: 15px;
}

.top-point-item>li .lead {
  color: #ee3255;
  font-size: 17px;
  font-weight: bold;
}

.top-point-item>li .lead .sub {
  font-size: 12px;
}

@media screen and (max-width: 360px) {
  .top-point-item>li {
    width: 92px;
    height: 92px;
    font-size: 11px;
  }

  .top-point-item>li .lead {
    font-size: 15px;
  }
}

@media screen and (max-width: 320px) {
  .top-point-item>li {
    width: 83px;
    height: 83px;
    font-size: 11px;
  }

  .top-point-item>li+li {
    margin-left: 10px;
  }

  .top-point-item>li .lead {
    font-size: 14px;
  }
}

/* トップページ：top-feature-area
--------------------------------------------------------- */
.top-feature-area {
  padding: 30px 15px 15px;
}

.top-feature-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.top-feature-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.top-feature-list>.box-top-feature {
  width: 48%;
  border: 4px solid #eee;
  border-radius: 10px;
  font-size: 13px;
  padding: 15px 12px;
  box-sizing: border-box;
  position: relative;
}

.top-feature-list>.box-top-feature:first-child {
  width: 100%;
  margin-bottom: 15px;
}

.top-feature-list>.box-top-feature:first-child .icon-item {
  position: absolute;
  top: 10px;
  right: 15px;
}

.top-feature-list>.box-top-feature .ttl {
  margin-bottom: 10px;
}

.top-feature-list>.box-top-feature .text {
  margin-top: 10px;
  line-height: 1.5;
}

@media screen and (max-width: 320px) {
  .top-feature-list>.box-top-feature:first-child .icon-item img {
    width: 33px;
  }
}

/* トップページ：top-rev-area
--------------------------------------------------------- */
.top-rev-area {
  background: #fcefef;
  padding: 30px 15px 15px;
}

.top-rev-list {
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 15px 10px;
  margin: 0 -15px 20px;
}

.top-rev-list>li {
  flex: 0 0 auto;
  width: 160px;
  margin-right: 15px;
}

.top-rev-list>li:last-child {
  padding-right: 15px;
}

.top-rev-list>li .star-rating img {
  margin: 0 -1px 0 0;
}

.top-rev-list .area-star-list {
  margin: 0;
}

a.box-top-rev {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 10px 10px 16px rgba(57, 48, 109, 0.1);
  color: #333;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
  text-decoration: none;
}

a.box-top-rev .rev-text {
  white-space: normal;
  min-height: 126px;
  margin-bottom: 5px;
  line-height: 160%;
}

a.box-top-rev .lower {
  color: #777;
  margin-top: 5px;
}

.top-rev-area .note {
  color: #6c6b68;
  font-size: 10px;
  padding: 30px 0 0;
  text-align: right;
}

@media screen and (max-width: 320px) {
  .top-rev-area .note {
    letter-spacing: -0.5px;
  }
}

/* トップページ：top-counselor-area
--------------------------------------------------------- */
.top-counselor-area {
  padding: 30px 20px 15px;
}

.top-counselor-area .label-lead {
  margin: 20px 0;
  text-align: center;
}

.top-counselor-area .label-lead>span {
  display: inline-block;
  background: #f4f6fa;
  border-radius: 999em;
  color: #6c80a7;
  font-size: 13px;
  font-weight: bold;
  padding: 2px 20px;
  text-align: center;
}

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

.top-counselor-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.top-counselor-list>li {
  width: 48%;
}

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

a.box-top-counselor {
  display: block;
  background: #fff;
  border: 1px solid #e8edf8;
  box-shadow: 10px 10px 16px rgba(57, 48, 109, 0.1);
  border-radius: 12px;
  color: #333;
  text-decoration: none;
  box-sizing: border-box;
}

a.box-top-counselor ul.member-detail-txt-status {
  padding: 9px 0 0 11px;
}

a.box-top-counselor .busy-outline {
  border: 1px #ea4b69 solid !important;
  box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.2);
  position: relative;
}

a.box-top-counselor .photo {
  border: 1px solid #d5dceb;
  border-radius: 999em;
  width: 70px;
  height: 70px;
  margin: 10px auto 5px;
  overflow: hidden;
}

a.box-top-counselor .photo img {
  max-width: 100%;
  height: auto;
}

a.box-top-counselor .name {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

a.box-top-counselor .price-list>li {
  display: flex;
  align-items: center;
  font-size: 13px;
  padding: 0 0 0 9px;
}

a.box-top-counselor .price-list li img {
  margin-right: 3px;
}

a.box-top-counselor .specialty {
  background: #f4f6fa;
  border-radius: 0 0 12px 12px;
  font-size: 11px;
  margin: 10px 0 0;
  height: 57px;
  text-indent: 0;
  padding: 8px 10px 3px;
}

a.box-top-counselor .specialty p img {
  vertical-align: -5px;
  margin-right: 3px;
}

.top-counselor-wrap .icon-explain {
  display: flex;
  align-items: center;
  font-size: 11px;
}

.top-counselor-wrap .icon-explain img {
  margin-right: 3px;
}

.top-counselor-area .note {
  color: #6c6b68;
  font-size: 10px;
  padding: 30px 0 0;
  text-align: right;
}

@media screen and (max-width: 320px) {
  a.box-top-counselor ul.member-detail-txt-status li {
    padding: 0 2px;
    margin-right: 4px;
  }

  a.box-top-counselor .price li {
    font-size: 12px;
  }
}

/* トップページ：top-counselor-area（横スクロール）
--------------------------------------------------------- */
.top-counselor-list-scroll-x {
  display: flex;
  overflow-x: scroll;
  padding: 0 15px 20px 0;
}

.top-counselor-list-scroll-x li {
  margin: 0 14px 0 0;
}

.top-counselor-list-scroll-x li a {
  width: 140px;
  border: 1px solid #e8edf8;
}

.top-counselor-list-scroll-x li a .prof-data {
  white-space: nowrap;
}

.top-counselor-list-scroll-x li a.box-top-counselor .price-list>li {
  justify-content: center;
}

/* 横スクロールシンプル版（お気に入りエリア） */
.top-counselor-list-scroll-x.is-simple li {
  margin-right: 20px;
}

.top-counselor-list-scroll-x.is-simple li a {
  width: 90px;
  border: none;
  box-shadow: none;
}

.top-counselor-list-scroll-x.is-simple a.box-top-counselor .photo {
  width: 90px;
  height: 90px;
  box-shadow: 3px 3px 16px rgba(57, 48, 109, 0.1);
  margin-top: 0;
}

.top-counselor-list-scroll-x.is-simple a.box-top-counselor ul.member-detail-txt-status {
  justify-content: center;
  padding: 8px 0 6px;
  width: 100%;
}

/* top-beginner-area */
.top-beginner-wrap {
  background: #fff5f1;
  padding: 20px;
}

.top-beginner-wrap .top-counselor-wrap {
  margin: 0 0 5px;
}

.top-beginner-wrap h2 {
  color: #fe6422;
  font-size: 18px;
}

.top-beginner-wrap p.top-beginner-wrap-explan {
  color: #fe6422;
  font-size: 16px;
}

.top-beginner-wrap a.top-counselor-wrap-more {
  background: #fff;
  border: 1px #fe6422 solid;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  color: #fe6422;
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 50px;
  margin: 0 auto;
  text-decoration: none;
  width: 70%;
}

@media screen and (max-width: 320px) {
  .top-beginner-wrap {
    background: #fff5f1;
    padding: 16px;
  }

  .top-beginner-wrap h2 {
    font-size: 15px;
  }

  .top-beginner-wrap p.top-beginner-wrap-explan {
    font-size: 14px;
  }
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  cursor: pointer;
  border: none;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}

/* ePayログインの追加分 リファクタリング後に別CSSに移動予定
--------------------------------------------------------- */
.title-area h1,
.title-area h2 {
  margin: 20px 0;
  font-size: 22px;
}

button.button-form {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  width: 86%;
  line-height: 50px;
  margin: 20px auto;
  background-color: #0ca795;
  padding: 0;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: 1px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

a.btn-line {
  background: #06c755;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-weight: bold;
  margin: 20px auto;
  text-decoration: none;
  width: 300px;
}

.area-sns a {
  position: relative;
  display: flex;
  align-items: center;
}

.area-sns a img {
  position: absolute;
  left: 10px;
}

@media screen and (max-width: 320px) {
  .area-sns a img {
    display: none;
  }
}

.area-sns a span {
  margin: 0 auto;
}

.btn-link-inner a {
  display: block;
  background: #0ca795;
  border: 1px solid #0ca795;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-weight: bold;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 86%;
}

.btn-link-inner-border a {
  display: block;
  background-color: #fff;
  border: 1px solid #0ca795;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #0ca795;
  font-weight: 700;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 86%;
}

.btn-border-black {
  display: block;
  background-color: #fff;
  border: 1px solid #666;
  border-radius: 50px;
  color: #333 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 50px;
  margin: 20px auto 10px;
  text-align: center;
  text-decoration: none;
  width: 86%;
}

/* ログインID照会 */
.inquiry-id {
  background: #fff;
  border: 1px solid #afafaf;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0 20px;
  padding: 10px 15px;
  overflow-x: scroll;
}

.inquiry-id-bg {
  background: #f5f8fe;
  border-radius: 5px;
  margin: 10px 0 15px;
  padding: 14px;
}

/* 新規会員登録メニュー
--------------------------------------------------------- */
.view-height {
  min-height: calc(100vh - 99px);
}

.kv-beginner-support {
  background: #fff0ef url("../images/help/beginner/img-regist-woman.png") no-repeat right bottom;
  background-size: 30% auto;
  font-size: 13px;
  padding: 16px 15px;
}

.kv-beginner-support>.head {
  color: #ee3255;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.regist-menu {
  padding: 35px 20px;
}

.regist-menu .ttl-page {
  font-size: 22px;
  margin-bottom: 33px;
  text-align: center;
}

.regist-menu .area-sns a {
  font-size: 16px;
  line-height: 60px;
  box-sizing: border-box;
}

.regist-menu a.btn-line {
  padding-left: 10px;
}

.regist-menu .link-login {
  margin-top: 40px;
  text-align: center;
}

.regist-menu .link-login a {
  color: #333;
}

@media screen and (max-width: 360px) {
  .regist-menu .area-sns a {
    font-size: 15px;
  }
}

@media screen and (max-width: 320px) {
  .kv-beginner-support>.head {
    font-size: 14px;
  }

  .regist-menu a.btn-line {
    padding-left: 0;
  }
}

/* 各種バナーエリア
--------------------------------------------------------- */
.top-counselor-topics-scroll-x {
  display: flex;
  overflow-x: scroll;
  padding: 0 15px 0 0;
}

.top-counselor-topics-scroll-x li {
  margin: 0 14px 0 0;
  padding-bottom: 5px;
}

.primary-bnr-area a {
  display: block;
}

.primary-bnr-area img {
  box-shadow: 8px 0 12px rgba(57, 48, 109, 0.15);
  width: 130px;
  height: 130px;
}

.secondary-bnr-area {
  background: #f3f7ff;
  margin: 20px auto 0;
  padding: 20px 20px 15px;
}

.secondary-bnr-area .bnr img,
.secondary-bnr-area-nonlogin .bnr img {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  width: 90%;
  height: auto;
}

.secondary-bnr-area .bnr .text,
.secondary-bnr-area-nonlogin .bnr .text {
  color: #ea7b59;
  display: inline-block;
  font-weight: bold;
  font-size: 13px;
  padding: 0 0 6px;
  letter-spacing: -0.03em;
}

.secondary-bnr-area .bnr .text-small {
  /* /my/の診断バナーテキスト */
  font-size: 12px !important;
}

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

  .secondary-bnr-area .bnr .text,
  .secondary-bnr-area-nonlogin .bnr .text {
    font-size: 11px;
  }
}

/* 特集・コラム 記事関連一覧（トップ）
--------------------------------------------------------- */
.article-wrap+.article-wrap {
  border-top: 1px solid #ddd;
}

.list-article {
  margin-top: 20px;
}

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

.list-article li img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
}

a.article-link-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  color: #333;
  text-decoration: none;
}

a.article-link-top .label-new {
  background: #ee3255;
  color: #fff;
  padding: 2px;
  margin-left: 6px;
  border-radius: 3px;
  font-size: 12px;
  width: 35px;
  height: 18px;
  display: inline-block;
  text-align: center;
}

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

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

a.article-link-top>.text .date {
  color: #666;
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0%;
}

@media screen and (max-width: 320px) {
  a.article-link-top>.text {
    font-size: 13px;
  }
}

/* テキストリンクのarrowアイコン
--------------------------------------------------------- */
a.link-with-after-right-arrow {
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 14px;
}

a.right-arrow-blue::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 13px;
  background: url("../images/icon/icon-link-arr-right-blue.svg") no-repeat center / cover;
  margin-left: 5px;
}

.c .link-with-after-right-arrow {
  justify-content: center;
}

.r .link-with-after-right-arrow {
  justify-content: flex-end;
}

.link-icon-arr-right {
  display: flex;
  align-items: center;
  font-size: 14px;
  text-decoration: none;
}

.c .link-icon-arr-right {
  justify-content: center;
}

.link-icon-arr-right img,
.link-icon-arr-right-r img {
  margin: 0 5px;
  height: 13px;
  width: 8px;
}

.link-icon-arr-right-r {
  display: flex;
  align-items: center;
  text-decoration: none;
  justify-content: flex-end;
}

.link-icon-flex {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.link-icon-flex img {
  margin: 0 3px;
  width: 13px;
  height: auto;
}

@media screen and (max-width: 320px) {
  .link-icon-arr-right {
    font-size: 12px;
  }

  .link-icon-flex {
    font-size: 12px;
  }
}

/* ヒント
--------------------------------------------------------- */
.area-hint {
  background: #fff4ed;
  border: 1px #ed715d solid;
  border-radius: 10px;
  margin: 0 auto;
  padding: 16px 14px;
  position: relative;
}

.area-hint-noborder,
.area-hint-noborder-slim {
  background: #fff4ed;
  border-radius: 10px;
  margin: 0 auto;
  padding: 16px 14px;
  position: relative;
}

.area-hint p {
  color: #da442c;
  line-height: 170%;
}

.area-hint-note {
  color: #333 !important;
}

.area-hint>img {
  position: absolute;
  top: -18px;
  left: 5px;
}

.area-hint-noborder ul {
  color: #d75a44;
  display: flex;
  font-weight: bold;
  margin: 0 0 5px;
}

.area-hint-noborder-slim ul {
  color: #d75a44;
  display: block;
  font-weight: bold;
  margin: 0 0 5px;
}

.area-hint-noborder ul li:nth-of-type(2) {
  margin: 0 0 0 5px;
}

.area-hint-noborder ul li:last-child {
  margin-left: auto;
}

@media screen and (max-width: 320px) {
  .area-hint-noborder ul {
    display: flex;
    flex-wrap: wrap;
  }

  .area-hint-noborder ul li:last-child {
    margin-left: 0;
    padding: 8px 0 0;
  }
}

/* excite通話アプリ
--------------------------------------------------------- */
.bn-inline a {
  display: inline;
  margin: 0 10px 0 0;
}

.bn-inline a img {
  width: 40%;
  height: auto;
}

img.logo-all {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.howto-app-ttl {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #0cbaa0;
  margin: 0 0 10px;
}

.howto-app-ttl img {
  width: 18px;
  height: 18px;
}

.howto-app-ttl span {
  margin: 0 0 0 5px;
}

@media screen and (max-width: 320px) {
  .howto-app-ttl {
    display: block;
  }
}

.exite-app-note {
  background: #f4f6fa;
  padding: 25px 16px;
}

.app-support {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px auto 25px;
}

.app-support-detail {
  margin: 0 0 0 10px;
}

.app-support-detail small {
  font-size: 10px;
}

.app-dl p {
  font-size: 13px;
}

.app-support-slim {
  background: #f4f6fa;
  border-radius: 10px;
  display: flex;
  padding: 14px;
}

/* my/call/の相談終了後エリア（発信型リリース後削除予定）
--------------------------------------------------------- */
.area-call-after-statement {
  border: 1px #333 solid;
  border-radius: 5px;
  font-size: 13px;
  margin: 0 auto 25px;
  padding: 14px;
  text-align: left;
  width: 82%;
}

.area-call-after-statement p {
  line-height: 160%;
}

/* ビギナーサポート制度マーク
--------------------------------------------------------- */
.mark-beginner-support {
  margin: 10px 0 15px;
}

.mark-beginner-support .mark-flex {
  display: flex;
  align-items: center;
}

.mark-beginner-support .mark-flex a {
  margin: 0 0 0 10px;
}

/* 404 not found
--------------------------------------------------------- */
.not-found-head {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0;
  letter-spacing: 1px;
  text-align: center;
}

.not-found-head>span {
  display: inline-block;
  padding: 0 70px;
  position: relative;
}

.not-found-head>span::before {
  content: "";
  width: 40px;
  height: 45px;
  background: url("../images/img-not-found-illust_01.svg") no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.not-found-head>span::after {
  content: "";
  width: 42px;
  height: 55px;
  background: url("../images/img-not-found-illust_02.svg") no-repeat;
  background-size: cover;
  position: absolute;
  top: calc(50% + 5px);
  right: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 320px) {
  .not-found-head>span {
    padding: 0 50px;
  }

  .not-found-head>span::before {
    width: 34px;
    height: 38px;
  }

  .not-found-head>span::after {
    width: 35px;
    height: 46px;
  }
}

/* chatbot btn
--------------------------------------------------------- */
@media screen and (min-width: 0) and (max-width: 768px) {
  #chat_badge_ai {
    right: 5px !important;
    bottom: 80px !important;
  }
}

/* 相談終了後 初再訪時モーダル（お気に入り増）
--------------------------------------------------------- */
.about-call-done-fav-modal {
  background: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  color: #333;
  font-size: 14px;
  font-weight: normal;
  width: 85%;
  height: auto;
  padding: 0;
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  line-height: 1.6;
  z-index: 1000;
}

.about-call-done-fav-modal .modal_content_header {
  background: #0cbaa0;
  border-radius: 12px 12px 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 18px 15px 16px;
  text-align: center;
}

.about-call-done-fav-modal .modal_content_inner {
  padding: 20px 15px;
  max-height: 75vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.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 .area-star-list {
  margin: 0;
}

.about-call-done-fav-modal .btn-secondary {
  width: 90%;
  font-size: 16px;
  padding: 16px 0 14px;
}

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

.about-call-done-fav-modal button.close-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #fff;
  border: none;
  box-shadow: none;
  border-radius: 999em;
  position: absolute;
  top: -5px;
  right: -5px;
}

.about-call-done-fav-modal button.close-btn img {
  max-width: 11px;
  width: 11px;
  height: 11px;
}

/* 初再訪時モーダルの背景 */
.modal_overlay_fav {
  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) {
  .about-call-done-fav-modal .modal_content_header {
    font-size: 15px;
  }

  .about-call-done-fav-modal .counselor-info>.photo {
    width: 75px;
    height: 75px;
  }

  .about-call-done-fav-modal .counselor-info .name {
    font-size: 15px;
  }
}

/* ご利用上の注意事項
--------------------------------------------------------- */
.attention {
  border-top: 1px #ccc solid;
  padding: 20px;
  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;
  position: relative;
}

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

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

.top-counselor-coupon-scroll-x {
  display: flex;
  overflow-x: scroll;
  padding: 0 15px 0 0;
}

.top-counselor-coupon-scroll-x li {
  margin: 0 23px 0 0;
}

ul.top-counselor-coupon-scroll-x li a {
  display: block;
  text-decoration: none;
}

ul.top-counselor-coupon-scroll-x .coupon-list-detail {
  display: flex;
  padding-bottom: 10px;
}

ul.top-counselor-coupon-scroll-x .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: 144px;
  position: relative;
}

ul.top-counselor-coupon-scroll-x .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;
}

ul.top-counselor-coupon-scroll-x .coupon-list-detail .coupon-data .coupon-name {
  color: #333;
  line-height: 150%;
  padding-top: 5px;
}

ul.top-counselor-coupon-scroll-x .coupon-list-detail .coupon-img,
ul.top-counselor-coupon-scroll-x .coupon-list-detail .coupon-img img {
  width: 84px;
  height: 84px;
}

ul.top-counselor-coupon-scroll-x .coupon-list-detail .coupon-data .coupon-available {
  color: #576574;
  font-size: 10px;
}

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

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

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

/* ここから追加 */

.contents-body .counselor-list {
  display: flex;
  margin-bottom: 30px;
  gap: 0 15px;
  overflow-x: auto;
  margin-top: 0;
  padding-bottom: 20px;
}

.contents-body .counselor-list li {
  border: 1px #E8EDF8 solid;
  border-radius: 16px;
  box-shadow: 10px 10px 16px 0px #39306D1A;
  text-align: center;
  min-width: 140px;
  padding: 0;
  overflow: hidden;
}

.counselor-list .photo-date {
  margin-top: 15px;
}

p.counselor-title {
  font-family: Roboto;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  margin-top: 30px;
  margin-bottom: 15px;
}

.icon-talk {
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-right: 5px;
}

.icon-talk:before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(../img/item/icon-talk.svg) no-repeat center center/cover;
  position: absolute;
  left: 0;
  top: 0;
}

.category {
  padding: 9px 12px 8px;
  background: #F5F6FA;
  font-family: Noto Sans JP;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 12px;
}

.counselor-list .name {
  font-family: Noto Sans JP;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  margin-top: 15px;
}

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

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

.counselor-list li img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #D5DCEB;
  box-sizing: border-box;
}

.single .contents-body h2 {
  font-family: Roboto;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  margin-top: 50px;
  margin-bottom: 20px;
  position: relative;
  padding-top: 10px;
}

.single .contents-body h2:before {
  content: "";
  width: 100%;
  height: 2px;
  background: #E5EAFC;
  position: absolute;
  left: 0;
  top: 0;
}

.single .contents-body h2:after {
  content: "";
  width: 89px;
  height: 2px;
  background: #0CBAA0;
  position: absolute;
  left: 0;
  top: 0;
}

.single .contents-body h3 {
  font-family: Roboto;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  padding-left: 16px;
  margin-top: 40px;
  margin-bottom: 20px;
  position: relative;
}

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

.single .contents-body h4 {
  font-family: Roboto;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  margin-top: 20px;
  padding: 4px 7px 3px;
  margin-bottom: 15px;
  background: #F4F7FF;
}

.media-page .alignnone {
  width: 335px;
  height: auto;
  text-align: center;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
}

.text-link {
  font-family: Roboto;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
  text-decoration: none;
  position: relative;
  margin-top: 20px;
  display: inline-block;
}

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


.media-list .ttl-lead-border {
  color: #333;
  font-family: Roboto;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  position: relative;
  padding-left: 16px;
}

.media-list .ttl-lead-border:before {
  content: "";
  width: 6px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #333;
  border-radius: 10px;
}

.media-list {
  margin: 60px 0 15px;
  padding: 0 20px;
}

.error404 {
  padding: 37px 0 50px;
}

.error404 .btn-wrap a {
  width: 294px;
  margin: 20px auto 0;
}

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

.media-page .contents-title {
  font-family: Roboto;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
}

.media-page .date {
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  text-align: right;
  color: #666;
  margin-top: 10px;
}

.media-page .kv-area {
  max-width: 345px;
  margin: 10px auto 20px;
  border-radius: 16px;
  overflow: hidden;
}

.media-page .kv-area img {
  width: 100%;
  height: auto;
  display: block;
}

.media-page {
  padding: 24px 20px 0;
}

.media-page p {
  margin-top: 20px;
}

.btn-green {
  background: #0CA795;
}

.article-section {
  padding: 24px 20px 0;
}

.article-cta a {
  width: 300px;
}

.article-section-title {
  font-family: Roboto;
  font-weight: 700;
  font-size: 22px;
  line-height: 160%;
  letter-spacing: 0%;
}

.article-cta-catch {
  margin-top: 12px;
  text-align: center;
  margin-bottom: 27px;
}

.article-cta-sub {
  font-family: Roboto;
  font-weight: 700;
  font-size: 10px;
  line-height: 160%;
  text-align: center;
  display: block;
  color: #F13970;
  position: relative;
}

.article-cta-sub:before {
  content: "＼";
  position: absolute;
  transform: translateX(-13px);
}

.article-cta-sub:after {
  content: "／";
  position: absolute;
  transform: translateX(2px);
}

.article-cta-title {
  margin-top: 3px;
  font-family: Roboto;
  font-weight: 700;
  font-size: 13px;
  line-height: 160%;
  display: block;
  color: #F13970;
}

/* カスタム投稿コンポーネント */

.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: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: #212121;
  position: relative;
  padding-left: 12px;
}

.contents-body ul li:before {
  content: "";
  position: absolute;
  top: 12px;
  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 {}

.article-table th {
  padding: 9px 0;
  background: #3F5AB9;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  width: 100%;
  display: block;
}

.article-table td {
  background: #F3F7FF;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
  padding: 15px;
  font-weight: 400;
  display: block;
}

.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: 16px;
  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: #ee3255;
}

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

.voice-charge-img {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px solid #D5DCEB;
  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;
  text-decoration: none;
}

.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;
}

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

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

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

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

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

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

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

.article-supervisor-prof-url {
  font-size: 14px;
  color: #0b8aff;
  transition: all .3s;
  position: relative;
  padding-right: 5px;
  display: inline-block;
  margin-top: 6px;
  color: #0E82ED;
  text-decoration: none;
  font-weight: 700;
  line-height: 20px;
}

/* .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: -4px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  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: #F3F7FF;
  padding: 20px;
  border-radius: 10px;
}

.single .contents-body .mokuji-catch-title {
  margin: 0;
  border-bottom: none;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  padding-bottom: 15px;
  color: #3F5AB9;
}

.single .contents-body .mokuji-list-title {
  font-family: Roboto;
  font-weight: 700;
  font-size: 16px;
  margin-top: 15px;
  color: #3F5AB9;
  line-height: 1.8;
  padding: 0;
  margin-bottom: 5px;
  background: none;
  display: block;
  text-decoration: none;
}

.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 #C9CDE1;
  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: #333;
  text-decoration: none;
  font-family: Roboto;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
}

.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: #3F5AB9;
  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: 15px;
  position: relative;
  color: #3F5AB9;
}

.mokuji .mokuji-toggle:before {
  content: "";
  position: absolute;
  right: 50%;
  top: 3px;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-top: 3px solid #3F5AB9;
  border-right: 3px solid #3F5AB9;
  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;
}