@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 figure {
  padding: 0;
  margin: 0;
  font-size: 100%;
  zoom: 1;
}

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

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  min-width: 1100px;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

img {
  border: 0;
  vertical-align: baseline;
}

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

figure {
  padding: 0;
  margin: 0;
}

/* clearfix
--------------------------------------------------------- */

/* 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; }
.mT50 { margin-top: 50px; }
.mB5 { margin-bottom: 5px; }
.mB10 { margin-bottom: 10px; }
.mB15 { margin-bottom: 15px; }
.mB20 { margin-bottom: 20px; }
.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; }
.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; }
.lr { font-size: larger; }
.xr { font-size: x-large; }
.xl { font-size: xx-large; }
.sr { font-size: smaller; }
.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; }
.fs8 { font-size: 8px; }
.fs10 { font-size: 10px; }
.fs14 { font-size: 14px; }

/* color
--------------------------------------------------------- */
.red { color: #ee3255 !important; }
.blue { color: #2980b9 !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;
}

.alert-wrap {
  background: #f3f7ff;
  border-left: 6px #8292b3 solid;
  font-size: 12px;
  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%;
}

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

/* link
--------------------------------------------------------- */
a:link {
  color: #0e82ed;
  text-decoration: underline;
}

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

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

a.hover:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

/* 角丸ラベル
--------------------------------------------------------- */
.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;
}

/* etc
--------------------------------------------------------- */
.arrow01 {
  position: relative;
  display: inline-block;
  padding: 0 0 0 19px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}

.arrow01::before,
.arrow01::after {
  position: absolute;
  top: 0;
  bottom: 1px;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.chevron-circle-right::before {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ccb898;
}

.chevron-circle-right::after {
  left: 4px;
  width: 4px;
  height: 4px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 矢印つきリンク
--------------------------------------------------------- */

a.link-with-after-right-arrow {
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: normal;
  font-size: 14px;
}

a.link-with-after-right-arrow-xl {
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: normal;
  font-size: 16px;
}

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

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

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

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

/* iconfonts
--------------------------------------------------------- */
ul.member-list li.nothing {
  width: 100%;
}

.call_back {
  display: none;
}

/* Header Footer
--------------------------------------------------------- */
#exHeader {
  width: 100%;
  height: 44px;
  background: #fff;
  border-bottom: solid 1px #dededa;
  overflow: hidden;
  font-size: 12px;
}

#exHeaderInner {
  width: 1100px;
  margin: 0 auto;
  position: relative;
}

#exSiteID {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
}

#exLogo {
  float: left;
}

#exLogo li {
  display: inline;
}

#exDescription {
  line-height: 2.8;
  margin-left: 10px;
}

#exDescription.is-biz {
  top: 4px !important;
  left: 230px !important;
}

#exControl {
  position: absolute;
  top: 4px;
  right: 0;
  float: right;
  display: flex;
  align-items: baseline;
}

#exControl a {
  text-decoration: none;
  color: #333;
}

#exControl a:hover {
  text-decoration: underline;
}

.icon-contact-mail:hover {
  opacity: 0.8;
}

#exControl li.home {
  padding-left: 22px;
  border: none;
  background: url(//image.excite.co.jp/jp/share/images/icon_home.gif) no-repeat left top;
  font-weight: bold;
}

#logoExcite {
  position: absolute;
  top: 2px;
  left: 0;
}

#logoExcite .logo-default {
  width: 170px;
  height: auto;
}

.hList li {
  display: block;
  float: left;
  margin-left: 18px;
}

.hList li.hList-biz {
  margin-right: 10px;
  position: relative;
  top: -13px;
}

#exControl.hList li.hList-biz a {
  border: 1px solid #656565;
  color: #656565;
  font-size: 11px;
  font-weight: normal;
  padding: 3px 8px 2px;
}

#exControl.hList li.hList-biz a:hover {
  opacity: 0.8;
}

#rich_footer_wrapper {
  width: 100%;
  border-top: solid 1px #dededa;
}

#rich_footer_inner {
  width: 1050px;
  margin: 0 auto;
  font-size: 12px;
}

#rich_footer_inner ul {
  width: 150px;
  float: left;
  overflow: hidden;
  padding: 20px 0 40px 0;
}

#rich_footer_inner ul li {
  padding: 2px 0;
}

#rich_footer_inner ul li a {
  color: #000;
}

#rich_footer_inner ul li .ttl {
  font-weight: bold;
  position: relative;
  padding: 0.75em 1em;
}

#rich_footer_inner ul li .ttl::after {
  position: absolute;
  left: 0;
  content: '';
  width: 6px;
  height: -webkit-calc(85% - 1em);
  height: calc(85% - 1em);
  background-color: #0cbaa0;
  border-radius: 4px;
}

#exFooter {
  background: #0cbaa0;
  border-top: solid 1px #dededa;
  clear: both;
  color: #fff;
  padding: 0 0 20px;
  text-align: center;
}

#exFooter_ex {
  border-top: solid 1px #dededa;
  padding: 30px 0;
  clear: both;
  text-align: center;
  width: 100%;
  position: relative;
  bottom: 0;
}

#exFooter_ex address {
  font-style: normal;
  font-size: 11px;
  padding: 10px 0 0;
  text-align: center;
}

#exFooter address {
  color: #dafdee;
  font-style: normal;
  font-size: 11px;
  padding: 10px 0 0;
  text-align: center;
}

#exFooter a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

#exFooter a:hover {
  text-decoration: underline !important;
}

.footer-telephone {
  background: #effdf7;
  color: #333;
  width: 100%;
  padding: 20px 0;
  margin: 0 0 20px;
}

.footer-telephone-inner {
  width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.footer-telephone-inner > .head {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

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

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

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

.footer-telephone .contact-wrap .text-contact-tel {
  font-size: 22px;
  font-weight: bold;
}

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

.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 !important;
  font-weight: bold;
  padding: 12px 20px;
  line-height: 1.2;
}

.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-weight: normal;
}

#excite-link {
  width: 1100px;
  padding: 0 0 10px;
  margin: 0 auto;
  text-align: left;
}

#excite-link > a {
  margin: 0;
}

#excite-link > a + a {
  margin-left: 10px;
}

#companyinfo {
  font-size: 11px;
  color: #dafdee;
  padding: 20px 0 0;
}

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

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

/* 共通フッター
--------------------------------------------------------- */
.footer-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 1100px;
  margin: 0 auto;
  border-bottom: 1px solid #96e4d9;
  padding-bottom: 10px;
}

.footer-text-link {
  text-align: center;
  letter-spacing: -0.4em;
}

.footer-text-link li {
  display: inline-block;
  line-height: 1.5;
  letter-spacing: normal;
}

.footer-text-link li + li {
  margin-left: 10px;
}

.footer-text-link a {
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #000;
}

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

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

/* 上部アラートリンク（相談開始や通話かけ直しはこちらから/アプリ再認証）
--------------------------------------------------------- */
.notice-header-alert a {
  color: #ee3255;
  display: block;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  background: #ffedf0;
  padding: 10px 0;
  width: 100%;
}

.notice-header-alert a:hover {
  opacity: 0.9;
}

.notice-header-alert .link-icon-arr-right {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  justify-content: center;
}

.notice-header-alert .alert-btn {
  display: inline-block;
  border: 1px solid #ee3255;
  border-radius: 3px;
  padding: 0 8px;
  margin-left: 16px;
}

.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: -1px;
}

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

/* アプリ再認証モーダル */
.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: 50%;
  height: auto;
  padding: 0;
  position: fixed;
  top: calc(50% + 20px) !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: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

.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: 12px;
  padding: 10px;
  width: 80%;
  margin: 12px auto 0;
  border-radius: 10px;
}

.notice-card a,
.notice-follow-message a {
  display: block;
  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: 3px;
  vertical-align: -5px;
}

.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: 3px;
  vertical-align: -5px;
}

/* 未払いがある方向け
--------------------------------------------------------- */
.notice-card-unpaid {
  margin-top: 12px;
}

.notice-card-unpaid a {
  display: block;
  border-radius: 10px;
  background: #ee3255;
  color: #fff;
  font-size: 12px;
  padding: 7px 10px;
  text-decoration: none;
  margin: 0 auto;
  width: 80%;
}

.notice-card-unpaid a span {
  display: block;
  text-align: center;
}

.notice-card-unpaid .alert-text::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../images/icon/icon-error-outline-white.svg") no-repeat;
  margin-right: 3px;
  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;
}

/* 共通レイアウト
--------------------------------------------------------- */
#wrapper {
  width: 100%;
  background-color: #fff;
}

#contents {
  width: 1100px;
  margin: 0 auto 2em;
  text-align: left;
  overflow: hidden;
}

#main-contents {
  float: right;
  width: 850px;
  margin: 25px 0 50px 0;
  position: relative;
}

#main-contents-ex {
  float: right;
  width: 1000px;
  margin: 25px 0 0 0;
}

#main-contents .one_column {
  width: 100%;
}

#main-contents .topic-path {
  line-height: 2em;
  margin-bottom: 1em;
}

.bn_category {
  padding-top: 15px;
}

.option {
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  margin: 10px 5px;
  font-size: 12px;
}

/* 注釈
--------------------------------------------------------- */
.note {
  font-size: 12px;
  padding: 10px 15px;
}

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

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

/* GlobalNavi
--------------------------------------------------------- */
div#global-navi {
  width: 100%;
}

div#menu-wrap {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #f7fffc;
  position: relative;
  opacity: 0.95;
}

div#menu-wrap ul {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 1100px;
  margin: 0 auto;
}

div#menu-wrap ul li {
  display: table-cell;
  vertical-align: middle;
  height: 60px;
}

div#menu-wrap ul li a {
  width: 100%;
  position: relative;
  display: block;
  transition: 0.3s;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #4a4544;
  letter-spacing: 0.5px;
  line-height: 60px;
}

div#menu-wrap ul li a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 4px;
  background-color: #18525a;
  transition: 0.3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

div#menu-wrap.animation_on ul li a:hover::after {
  width: 100%;
}

div#menu-wrap ul li.feature {
  position: relative;
}

div.hr {
  width: 100%;
  height: 4px;
  background-color: #0cbaa0;
  position: absolute;
  bottom: 0;
}

span.current {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #18525a;
  position: absolute;
  bottom: 0;
}

.fixed {
  position: fixed;
  top: 0;
  z-index: 9999;
}

/* hGroups
--------------------------------------------------------- */
.ttl-area {
  position: relative;
  display: flex;
  align-items: center;
  border-top: 2px #e5eafc solid;
  margin: 48px 0 0;
  padding: 10px 0;
}

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

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

.ttl-area.in-link > .link-text {
  font-size: 13px;
}

.ttl-area-short {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px #ccc solid;
  margin: 16px 0;
}

.ttl-area-short::after {
  position: absolute;
  display: block;
  content: " ";
  border-bottom: 2px #0cbaa0 solid;
  bottom: -1px;
  width: 20%;
}

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .ttl-area::after { border: none; } /* IE11 ONLY */
  *::-ms-backdrop,
  .ttl-area-short::after { border: none; } /* IE11 ONLY */
}

.ttl-disc {
  color: #333;
  font-size: 10px;
  padding: 0 0 0 15px;
  position: absolute;
  right: 0;
}

.ttl-disc-under {
  margin: 0 0 25px;
}

.ttl-seo {
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
}

.title {
  font-size: 22px;
  font-weight: bold;
  padding: 24px 0 0;
}

h2.ttl {
  font-size: 20px;
  white-space: nowrap;
}

h2.ttl.nospace {
  margin: 0 0 20px;
}

h3.subttl {
  font-size: 16px;
  border-bottom: 1px dotted #bfbfbf;
  margin: 10px 0;
}

div.ttl {
  position: relative;
  margin: 20px 0;
  padding: 0.5em 1em 0.5em 1.5em;
  font-size: 16px;
  color: #fff;
  background-color: #8a817e;
  border-radius: 5px;
  letter-spacing: 1px;
  font-weight: bold;
}

div.ttl::after {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #ada6a4;
  border-radius: 4px;
}

div.ttl.nospace {
  margin: 0 0 20px;
}

span.iconQ,
span.iconA {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: #f0647f;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px 5px 0;
}

/* お知らせ
--------------------------------------------------------- */
.top-area-info-wrap {
  padding: 0 0 10px 5px;
}

.top-area-info {
  font-size: 14px;
  margin: 0 0 10px;
}

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

.top-area-info a:hover {
  color: #0cbaa0;
  transition-duration: 0.3s;
}

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

/* button
--------------------------------------------------------- */
button {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-def {
  display: block;
  width: 90%;
  max-width: 450px;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
}

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

a.btn-top-green {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #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: 14px 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: 0 4px 4px rgba(0, 0, 0, 0.1);
  color: #0ca795;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 14px 12px;
  text-decoration: none;
}

a.btn-top-green:hover,
a.btn-top-green-border:hover {
  opacity: 0.8;
}

/* pager
--------------------------------------------------------- */
ul.pager {
  margin: 20px auto;
}

ul.pager li {
  float: left;
}

ul.pager li a {
  display: block;
  text-align: center;
  margin: 0 2px;
  padding: 5px 12px;
  border: 1px #d9d9d9 solid;
  background-color: #fafafa;
  color: #000;
  border-radius: 3px;
}

ul.pager li.next,
ul.pager li.prev {
  margin: 0 10px;
}

ul.pager li a:link,
ul.pager li a:visited {
  text-decoration: none;
}

ul.pager li a:hover,
ul.pager li a:active {
  border: 1px #0cbaa0 solid;
  background-color: #0cbaa0;
  color: #fff;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
}

ul.pager li span.curr {
  display: block;
  text-align: center;
  margin: 0 2px;
  padding: 5px 12px;
  border: 1px #0cbaa0 solid;
  background-color: #0cbaa0;
  color: #fff;
  border-radius: 3px;
}

.flex {
  display: flex;
  justify-content: center;
}

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

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

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

/* PageTop
--------------------------------------------------------- */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 26px;
  font-size: 77%;
}

#page-top a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px #333 solid;
  border-radius: 40px;
  box-shadow: 2px 2px 4px #ccc;
  width: 65px;
  height: 65px;
  text-align: center;
  opacity: 0.7;
}

#page-top a:hover {
  opacity: 0.9;
}

#page-top a img {
  width: 26px;
  height: 26px;
}

/* 検索ボックス
--------------------------------------------------------- */
#keyword-wrap-bg {
  background: #f5f5f5;
  border-radius: 5px;
  margin: 0 0 20px;
  padding: 14px;
}

#keyword-wrap {
  width: 100%;
}

input.search {
  width: 90%;
  height: 53px;
  padding: 0 0 0 40px;
  border: 2px solid #c6d1e9;
  border-right: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background: url(../images/icon/icon-search-gray.svg) no-repeat 10px 15px #fff;
  font-size: 14px;
}

#btnSearch {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

input.search::placeholder {
  color: #c6d1e9;
}

.keyword-tag {
  margin: 20px 0;
  overflow: hidden;
}

.keyword-tag li {
  float: left;
  font-size: 11px;
}

.keyword-tag li span.tag a {
  float: left;
  display: block;
  color: #0ca795;
  margin: 5px;
  padding: 4px 15px;
  background-color: #fff;
  border: 1px solid #0ca795;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.2s linear;
}

.keyword-tag li span.tag a:hover {
  background: #0ca795;
  border: 1px solid #0ca795;
  color: #fff;
}

.keyword-tag li span a.tag_hover {
  float: left;
  display: block;
  color: #fff;
  margin: 2px;
  padding: 4px 15px;
  background-color: #8a817e;
  border: 1px solid #8a817e;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.2s linear;
}

.keyword-tag p.tag-ttl,
.select p.tag-ttl {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 2px;
}

/* 絞り込みプルダウン
--------------------------------------------------------- */
.tag-pulldown.narrow-down {
  width: 40%;
  float: left;
}

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

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

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

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 + 8px), calc(100% - 14px) calc(10px + 8px), calc(100% - 28px) 5px;
  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;
}

/* お気に入りカウンセラー（TOP）
--------------------------------------------------------- */
.top-counselor-wrap {
  margin-bottom: 20px;
}

.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;
  height: 100%;
  background: #fff;
  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 .member-inner {
  padding: 0 !important;
}

a.box-top-counselor .member-detail-caption-area {
  padding: 0 10px;
}

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 ul.member-detail-txt-status {
  padding: 9px 0 0 11px;
}

a.box-top-counselor .busy-outline .specialty {
  height: 35px;
}

a.box-top-counselor .photo img {
  max-width: 100%;
  height: auto;
}

a.box-top-counselor .name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

a.box-top-counselor .price-list > li {
  display: flex;
  align-items: center;
  font-size: 13px;
}

a.box-top-counselor .price-list li img {
  margin-right: 3px;
}

a.box-top-counselor .specialty {
  border-radius: 0 0 4px 4px;
  margin: 5px 0 0;
  text-indent: 0;
  background: #f4f6fa;
  color: #666;
  font-size: 11px;
  padding: 6px 10px;
  height: 33px;
  line-height: 150%;
}

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

/* top-counselor-area（横スクロール） */
.top-counselor-list-scroll-x {
  display: flex;
  overflow-x: scroll;
  padding: 0 0 18px;
}

.top-counselor-list-scroll-x li {
  margin: 0 14px 0 0;
}

.top-counselor-list-scroll-x li a {
  width: 148px;
  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 .name {
  text-align: center;
}

.top-counselor-list-scroll-x li a.box-top-counselor .price-list > li {
  display: flex;
  justify-content: center;
  padding: 0 0 0 9px;
}

.top-counselor-list-scroll-x li a.box-top-counselor .photo {
  border: 1px solid #d5dceb;
  border-radius: 999em;
  width: 70px;
  height: 70px;
  margin: 10px auto 5px;
  overflow: hidden;
}

.top-counselor-list-scroll-x li a.box-top-counselor .specialty {
  background: #f5f6fa;
  border-radius: 0 0 4px 4px;
  margin: 10px 0 0;
  height: 53px;
  text-indent: 0;
  padding: 8px 10px 5px;
}

.top-counselor-list-scroll-x li a.box-top-counselor .specialty p {
  height: 50px;
}

/* 横スクロールシンプル版（お気に入りエリア） */
.top-counselor-list-scroll-x.is-simple li {
  margin-right: 20px;
}

.top-counselor-list-scroll-x.is-simple li a {
  width: 100px;
  border: none;
  box-shadow: none;
  overflow: initial;
}

.top-counselor-list-scroll-x.is-simple a.box-top-counselor .photo {
  width: 100px;
  height: 100px;
  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;
}

/* top-beginner-area */
.top-beginner-wrap {
  background: #fff5f1;
  margin: 15px 0;
  padding: 0 0 0 15px;
}

.top-beginner-wrap h2 {
  color: #fe6422;
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.top-beginner-wrap .ttl-disc-under {
  color: #fe6422;
}

.top-beginner-wrap a.top-counselor-wrap-more {
  background: #fff;
  border: 1px #fe6422 solid;
  border-radius: 5px;
  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: 60%;
}

/* 新着カウンセラー/ビギナーサポート対象（TOP）
--------------------------------------------------------- */
.new-ans-box,
.beginner-support-ans-box {
  text-align: center;
}

ul.new-ans-list,
ul.beginner-support-ans-list {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

ul.new-ans-list li,
ul.beginner-support-ans-list li {
  padding: 0 15px 15px;
  text-align: center;
}

ul.new-ans-list li:nth-child(1),
ul.beginner-support-ans-list li:nth-child(1) {
  padding-left: 0;
}

ul.new-ans-list li a,
ul.beginner-support-ans-list li a {
  display: block;
  text-decoration: none;
  max-width: 90px;
}

ul.new-ans-list li a:hover,
ul.beginner-support-ans-list li a:hover {
  opacity: 0.9;
}

ul.new-ans-list li a img,
ul.beginner-support-ans-list li a img {
  border: 1px solid #dededa;
  padding: 2px;
  width: 90%;
}

ul.new-ans-list li a p.name,
ul.beginner-support-ans-list li a p.name {
  color: #000;
  font-size: 12px;
  margin: 5px 0 0 0;
  text-decoration: underline;
}

ul.new-ans-list li a p.date,
ul.beginner-support-ans-list li a p.date {
  color: #000;
  font-size: 12px;
  font-weight: normal;
  margin: 0 0 5px;
  text-decoration: none;
}

.member-btn {
  display: block;
  text-align: center;
  width: 100%;
}

.member-btn a {
  display: flex;
  justify-content: center;
  text-decoration: none;
  font-weight: bold;
  line-height: 40px;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  width: 94%;
}

.member-btn .staStd a {
  background-color: #0ca795;
  border: 1px solid #0ca795;
  color: #fff;
}

.member-btn .staOn a {
  background-color: #ea4b69;
  color: #fff;
}

.member-btn .staOut a {
  background-color: #fff;
  color: #0ca795;
  border: 1px #0ca795 solid;
  font-weight: bold;
  font-size: 15px;
}

.member-btn .staRe a {
  background-color: #ffbf66;
  color: #fff;
}

.member-btn .staRequest a {
  display: block;
  color: #8a817e;
  font-weight: 700;
  text-decoration: none;
  background-color: #fff;
  box-shadow: 0 3px 0 #dededa;
  letter-spacing: 0;
}

.area-star-list {
  display: flex;
  align-items: center;
  margin: 0 0 0 3px;
}

.area-star-list a {
  font-size: 12px;
  margin: 0 0 0 5px;
}

.member-inner-upper .area-star-list a {
  position: relative;
  z-index: 1;
}

/* 情報 */
p.prf-date {
  font-size: 10px;
  margin-top: -2px;
}

/* メッセージ */
ul.price-list li {
  font-size: 12px;
  display: inline-block;
}

ul.price-list li:first-child {
  padding-right: 8px;
  display: inline-block;
}

ul.price-list li:last-child {
  border-right: none;
  padding-right: 0;
}

ul.price-list li:nth-child(3) {
  width: 100%;
  display: block;
}

ul.price-list li p {
  display: inline-block;
}

.msg_box {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 5px;
}

.member-name a {
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.price {
  position: absolute;
  top: 40px;
  left: 0;
  padding-left: 3px;
}

/* 一覧ステータスボタン
--------------------------------------------------------- */
.btnSta {
  margin: 10px 0 5px;
}

.btnSta a {
  display: block;
  line-height: 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  transition: 0.2s linear;
}

.btnSta.large a,
.btnSta.large span {
  font-size: 16px;
  height: 48px;
  line-height: 48px;
}

a.staStd {
  background-color: #a1d36e;
  box-shadow: 0 3px 0 #8eb961;
  text-shadow: 0 1px 0 #8eb961;
}

a.staStd:hover {
  background-color: #b4dc8b;
  box-shadow: 0 3px 0 #a5c781;
  text-shadow: 0 1px 0 #a5c781;
}

a.staRe {
  background-color: #ffbf66;
  box-shadow: 0 3px 0 #e8a068;
  text-shadow: 0 1px 0 #e8a068;
}

a.staRe:hover {
  background-color: #ffcc85;
  box-shadow: 0 3px 0 #edb386;
  text-shadow: 0 1px 0 #edb386;
}

a.staOn {
  background-color: #55c1e7;
  box-shadow: 0 3px 0 #4caccd;
  text-shadow: 0 1px 0 #4caccd;
}

a.staOn:hover {
  background-color: #77cdec;
  box-shadow: 0 3px 0 #70bdd7;
  text-shadow: 0 1px 0 #70bdd7;
}

a.staOut {
  background-color: #ccd1d9;
  box-shadow: 0 3px 0 #b4b8bf;
  text-shadow: 0 1px 0 #b4b8bf;
}

a.staOut:hover {
  background-color: #d6dae1;
  box-shadow: 0 3px 0 #c3c6cc;
  text-shadow: 0 1px 0 #c3c6cc;
}

/* カウンセラーの状態
--------------------------------------------------------- */
ul.member-detail-txt-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

ul.member-detail-txt-status li {
  border-radius: 3px;
  font-size: 10px !important;
  margin: 0 6px 0 0;
  padding: 0 5px !important;
  width: auto !important;
}

ul.member-detail-txt-status li:last-child {
  margin-right: 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 #999 solid;
}

ul.categoryList {
  margin-top: 10px;
}

ul.categoryList li {
  float: left;
  text-align: center;
  margin: 10px;
}

ul.categoryList li img {
  border: 1px solid #ccc;
}

ul.categoryList li p {
  margin-top: 5px;
}

ul.categoryList li p a:link {
  text-decoration: none;
}

ul.categoryList li p a:visited {
  color: #119dbb;
  text-decoration: underline;
}

ul.categoryList li p a:hover {
  color: #119dbb;
  text-decoration: underline;
}

/* プロフィール詳細
--------------------------------------------------------- */
.member-detail-inner {
  display: flex;
  justify-content: space-around;
  margin: 10px 0 0;
  position: relative;
}

.member-detail-inner .member-detail-inner-date {
  width: 50%;
}

.member-detail-inner .member-detail-inner-btn {
  width: 50%;
}

.member-detail-inner .member-detail-inner-btn .member-list {
  padding: 10px 0;
}

.member-detail-inner .member-detail {
  width: 96%;
  margin: 0 auto;
  position: relative;
}

.member-detail-inner .member-detail-name-wrap {
  display: flex;
}

.member-detail-inner .member-detail-name {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  position: relative;
  display: flex;
}

.member-detail-inner .member-detail-name a {
  color: #000;
}

.member-detail-inner .member-detail-caption-area {
  display: flex;
  align-items: center;
  margin: 14px 0 5px;
}

.member-detail-inner .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-inner .member-detail-img {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #d5dce8;
  text-align: center;
  margin: 0 auto;
}

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

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

/* プロフィール詳細（満足度）
--------------------------------------------------------- */
.area-star {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 3px 0;
}

.area-star > .link-review {
  margin-left: 10px;
}

.area-star p {
  color: #ccc;
  font-size: 12px;
  margin: 0 0 0 5px;
}

/* プロフィール詳細（相談件数）
--------------------------------------------------------- */
.member-detail-date {
  color: #888;
  font-size: 13px;
  margin-bottom: 5px;
}

/* プロフィール詳細（料金）
--------------------------------------------------------- */
.member-detail-price {
  background: #f6f6f6;
  border-radius: 12px;
}

.member-detail-price .price-txt {
  font-size: 13px;
  font-weight: bold;
}

.member-detail-price ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.member-detail-price ul li {
  padding: 10px 0;
}

.member-detail-price ul li:nth-of-type(2) {
  border-left: 1px #e5e5e5 solid;
  margin: 0 0 0 10px;
  padding: 0 0 0 10px;
}

.member-detail-price ul li span:nth-of-type(1) {
  padding: 0 5px 0 0;
}

/* /my/mail/send/で使用
--------------------------------------------------------- */
#profile {
  width: inherit;
  overflow: hidden;
  position: relative;
}

#profile ul li.prf-photo {
  float: left;
  margin-right: 10px;
}

#profile ul li.prf-photo img {
  border: solid 1px #dededa;
  margin-bottom: 10px;
  padding: 3px;
}

#profile ul li.prf-date {
  padding-left: 185px;
}

#profile ul li.prf-date-ex {
  padding-left: 120px;
  position: relative;
}

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

.name a {
  color: #000;
}

.name-call {
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px dotted #8a817e;
  margin-bottom: 10px;
  margin-left: 120px;
}

.msg {
  font-size: smaller;
}

dl.date {
  margin: 10px 5px 0 0;
}

dl.date dt {
  float: left;
  display: block;
  background: #a1d1bc;
  width: 85px;
  height: 25px;
  line-height: 25px;
  font-size: 10px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  margin-right: 10px;
}

dl.date dd {
  display: block;
  height: 25px;
  padding-top: 3px;
}

dl.date dd > p > span.call_time_min {
  line-height: 12px;
}

dl.date dd > p > span.call_time_caution {
  font-size: 12px;
}

/* CP所属
--------------------------------------------------------- */
div.option {
  display: flex;
  align-items: center;
  background: #f4f6fa;
  margin: 20px 0 30px;
  padding: 8px;
  border-radius: 4px;
  border: none;
  color: #666;
}

div.option-flex {
  display: flex;
  justify-content: space-between;
  border: 1px solid #dededa;
  background-color: #fff;
  margin: 0 0 30px;
  padding: 15px;
  border-radius: 7px;
}

div.option img {
  float: left;
  margin-right: 10px;
}

div.option span.txt {
  font-size: 11px;
  line-height: 140%;
}

/* プロフィール詳細お気に入りボタン（prof/detailとfreec/detail共通）
--------------------------------------------------------- */
.fav-wrap input {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

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

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

/* プロフィール詳細お気に入りボタン（revのみ）
--------------------------------------------------------- */
.inner-date-rev .fav-wrap {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: -124px;
}

/* プロフィール一覧のお気に入りボタン
--------------------------------------------------------- */
.member-btn-favorite .fav-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/icon/icon-fav-off.svg") no-repeat center;
  background-size: 20px auto;
  transition: all 0.2s;
}

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

/* プロフィール詳細音声プロフィール
--------------------------------------------------------- */
.audio_button_start,
.audio_button_pause {
  background: #fff;
  border: 1px #333 solid;
  border-radius: 50px;
  color: #333;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  text-align: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.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: 1px #465384 solid;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  margin: 0 10px;
  width: 100%;
}

/* ふりがな
--------------------------------------------------------- */
ruby {
  display: inline-table;
  text-align: center;
  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: 1;
  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;
}

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

ul.status-prf {
  display: table;
  table-layout: fixed;
  width: 100%;
}

ul.status-btn li,
ul.status-prf li {
  margin: 20px 0;
}

ul.status-btn li:first-child,
ul.status-prf li:first-child {
  padding-left: 0;
}

ul.status-btn li:last-child,
ul.status-prf li:last-child {
  padding-right: 0;
}

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

ul.status-btn li a:hover,
ul.status-prf li a:hover,
ul.group-list li a:hover {
  opacity: 0.9;
}

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

ul.status-btn li.staOn a,
ul.status-prf li.staOn a,
div.staOn a {
  background-color: #55c1e7;
  color: #fff;
}

ul.status-btn li.staOn span,
ul.status-prf li.staOn span {
  display: block;
  background-color: #55c1e7;
  color: #fff;
}

ul.status-btn li.staRe a,
ul.status-prf li.staRe a,
div.staRe a {
  background-color: #ffbf66;
  color: #fff;
}

/* お断りされている場合に退席中を表示
--------------------------------------------------------- */
.staOut .turn-down {
  background-color: #eaeaea;
  border-radius: 50px;
  color: #999;
  display: block;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 40px;
  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: 16px;
  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%;
  cursor: pointer; /* PCのみ */
  outline: none; /* PCのみ */
}

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

li.staRequest a {
  display: block;
  font-weight: bold;
  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;
  }
}

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

.staRequest > p {
  color: #465384;
}

.staRequest-att {
  color: #666;
  font-size: 10px;
  letter-spacing: -0.05em;
}

/* tabmenu（不要なら削除）
--------------------------------------------------------- */
ul#nav {
  display: table;
  table-layout: fixed;
  font-size: 12px;
  text-align: center;
  border-collapse: separate;
  border-spacing: 10px 0;
  width: 100%;
  background-color: #f5f5f4;
  padding: 10px 0;
  border-radius: 7px;
}

ul#nav li {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid #dededa;
  background-color: #fff;
  padding: 8px 0;
  border-radius: 7px;
}

ul#nav li span {
  display: block;
}

#nav li.tabCurrent {
  background: #a1d1bc;
  border: 1px solid #a1d1bc;
  color: #fff;
}

/* 予約
--------------------------------------------------------- */
table.schedule {
  background-color: #fff;
  border-top: #dededa 3px double;
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

table.schedule th {
  border-bottom: #dededa 1px solid;
  text-align: center;
}

table.schedule th.t_top01 {
  border-bottom: #dededa 1px solid;
  background-color: #f5f5f4;
  text-align: center;
  width: 25px;
}

table.schedule td.t_line01 {
  text-align: center;
  padding: 5px 0;
  vertical-align: top;
  border: #dededa 1px solid;
}

table.schedule th.day {
  width: 60px;
  text-align: center;
}

table.schedule th.time {
  text-align: center;
  font-weight: bold;
  line-height: 12px;
  padding: 5px 0;
}

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

table.standby_schedule tr td .icon-reOn {
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  margin: 4px 0 0;
  cursor: pointer;
}

table.standby_schedule tr td .icon-reOn:hover {
  opacity: 0.7;
}

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

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

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

/* 待機予定
--------------------------------------------------------- */
.schedule_wrap_scroll {
  border: 1px solid #d9d9d9;
  border-top-width: 2px;
  margin: 10px 0;
  height: 300px;
  overflow-y: scroll;
}

table.standby_schedule {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-right: solid 1px #d9d9d9;
}

table.standby_schedule tr.time {
  position: sticky;
  top: 0;
  left: 0;
}

table.standby_schedule tr.time th {
  text-align: center;
  font-weight: bold;
  line-height: 12px;
  padding: 5px 0;
  background: #f4f6fa;
  width: 25px;
  font-size: 11px;
  white-space: nowrap;
}

table.standby_schedule th {
  background: #f4f6fa;
  border-bottom: solid 1px #d9d9d9;
  border-left: solid 1px #d9d9d9;
  margin: 0;
  font-weight: 400;
  font-size: 11px;
  text-align: center;
}

table.standby_schedule td {
  border-bottom: solid 1px #d9d9d9;
  border-left: solid 1px #d9d9d9;
  margin: 0;
  text-align: center;
  width: 25px;
  height: 25px;
}

table.standby_schedule th.week {
  font-size: 11px;
  font-weight: 400;
  line-height: 140%;
}

.explanation-schedule-icon {
  display: flex;
  margin: 15px 0 5px;
}

ul.explanation-schedule-icon li {
  padding: 0 18px 0 0;
}

.schedule-area-standby {
  background: #d8e9fd;
}

.sat_nostr {
  color: #408ae2;
}

.sun_nostr {
  color: #d65656;
}

/* 口コミ
--------------------------------------------------------- */
.rev-comment li {
  position: relative;
  padding: 0 0 16px;
}

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

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

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

.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-comment-counselor a:hover {
  color: #0cbaa0;
  border-bottom: 1px #0cbaa0 dotted;
  transition-duration: 0.3s;
}

.rev-comment-inner .star-day {
  position: relative;
}

.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;
  margin: 0 0 0 5px;
}

.spec {
  color: #bbb;
  font-size: 12px;
  margin: 5px 0 0 0;
  text-align: right;
}

/* 満足度
--------------------------------------------------------- */
.star-day {
  text-align: right;
}

/* 満足度（集計あり）
--------------------------------------------------------- */
.rev-comment-inner .star-rating { /* -- 口コミの星 -- */
  color: #f2b31b;
  font-size: 12px;
  position: absolute;
  display: table;
}

.star-rating {
  color: #f2b31b;
  font-size: 12px;
  position: relative;
  display: table;
}

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

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

/* 満足度（集計中）
--------------------------------------------------------- */
.rev-comment-inner .star-rating-ready { /* -- 口コミの星 -- */
  color: #ccc;
  font-size: 13px;
  position: absolute;
  display: flex;
  align-items: center;
}

.star-rating-ready {
  color: #ccc;
  font-size: 13px;
  position: relative;
  display: flex;
  align-items: center;
}

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

/* 無料カウンセリング
--------------------------------------------------------- */
.freec-post-list > li + li {
  border-top: 1px dotted #dededa;
  padding-top: 15px;
  margin-top: 15px;
}

.freec-post-list h2,
.freec-post-list h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.freec-post-list h2 a,
.freec-post-list h3 a {
  color: #000;
}

.freec-detail-ttl {
  font-size: 16px;
  margin: 20px 0;
}

.freec-post-data {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 12px;
  color: #999;
}

.freec-post-data > p + p {
  border-left: 1px dotted #999;
  padding-left: 10px;
  margin-left: 10px;
}

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

.comment-icon-flex span.f::before,
.comment-icon-flex span.m::before,
.comment-icon-flex span.x::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;
}

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

.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.counselor span.ctgname {
  display: inline-block;
  color: #766e6b;
  margin-right: 10px;
  padding: 0 10px;
  background-color: #fff;
  border: 1px solid #dededa;
  border-radius: 20px;
  font-size: 13px;
}

div.counselor span.ctgname a {
  text-decoration: none;
}

/* あなたの感想
--------------------------------------------------------- */
.notice-card-campaign {
  background: #fff2f4;
  border-radius: 6px;
  margin: 20px auto;
  padding: 20px 0;
  text-align: center;
}

/* カウンセラーのつぶやき（サイドエリア）
--------------------------------------------------------- */
.murmur_side_tweet {
  padding: 10px;
}

.murmur_side_tweet > ul > li {
  background: #fff;
  padding: 10px;
  word-wrap: break-word;
}

.murmur_side_tweet > ul > li + li {
  margin-top: 10px;
}

.murmur_side_group a {
  color: #333;
}

.murmur_side_upper {
  display: flex;
  flex-wrap: wrap;
}

.murmur_side_photo {
  width: 42px;
  height: 42px;
  border: 1px solid #dededa;
  border-radius: 999em;
  margin-right: 8px;
  overflow: hidden;
}

.murmur_side_photo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.murmur_side_txt {
  width: calc(100% - 52px);
}

.murmur_side_txt .name {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 5px;
}

.murmur_side_txt .time {
  font-size: 10px;
  color: #666;
}

.murmur_side_txt_tweet {
  border-top: 1px dotted #dededa;
  font-size: 12px;
  padding-top: 8px;
  margin-top: 8px;
  line-height: 1.6;
}

.murmur_side_txt_tweet a {
  display: block;
  padding-right: 15px;
  text-decoration: none;
  position: relative;
}

.murmur_side_txt_tweet a:hover {
  opacity: 0.6;
}

.murmur_side_txt_tweet a::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #2f3f64;
  border-right: 2px solid #2f3f64;
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%) rotate(45deg);
}

.tweet_more {
  padding: 5px 10px 15px;
}

/* つぶやきページ
--------------------------------------------------------- */
.tweet_group {
  position: relative;
  padding: 10px 0 5px;
}

.tweet_photo {
  width: 75px;
  height: auto;
  float: left;
}

.tweet_photo img {
  width: 100%;
  height: auto;
  border: solid 1px #dededa;
  padding: 3px;
}

.tweet_txt {
  display: block;
}

.tweet_txt a {
  color: #000;
}

.tweet_txt .spec dt,
.tweet_txt .spec dd {
  overflow: hidden;
  line-height: 1.8;
  color: #756e6b;
}

.tweet_txt .tweet_text_detail {
  line-height: 1.5;
  color: #212121;
}

.tweet_txt .time {
  font-size: 12px;
  overflow: hidden;
  line-height: 1.8;
  color: #756e6b;
  display: block;
  text-align: right;
  margin-top: 4px;
}

.tweet_txt .name {
  color: #000;
}

.tweet_group div.bubble {
  margin: 0 0 0 105px;
}

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

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

div.bubble-half-left::after,
.bubble-half-left::before {
  right: 100%;
  top: 20px;
}

div.bubble-half-left::after {
  border-top: 10px solid #fff;
  border-left: 10px solid transparent;
}

div.bubble-half-left::before {
  border-left: 12px solid transparent;
  border-top: 12px solid #e0d9ca;
  margin-top: -1px;
}

div.bubble div.spec {
  margin-top: 15px;
  min-height: 20px;
  position: relative;
}

div.bubble div.spec dl {
  text-align: center;
  display: table;
  table-layout: fixed;
  position: absolute;
  right: 0;
}

div.bubble div.spec dl dt,
div.bubble div.spec dl dd {
  border-right: 1px dotted #cbc8c2;
  display: table-cell;
  padding: 0 10px;
}

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

.counselor {
  margin: 1px 0 10px;
  text-align: right;
}

/* カテゴリー
--------------------------------------------------------- */
ul.catKey {
  margin: 5px 0 20px;
  overflow: hidden;
}

ul.catKey li a {
  float: left;
  font-size: 12px;
  color: #07b097;
  border: 1px solid #0cbaa0;
  background-color: #fff;
  margin: 0 10px 10px 0;
  padding: 2px 10px;
  text-decoration: none;
  border-radius: 20px;
  transition: 0.2s linear;
}

ul.catKey li a:hover {
  background: #0cbaa0;
  border: 1px solid #0cbaa0;
  color: #fff;
}

ul.catKey li.selected a {
  float: left;
  color: #fff;
  border: 1px solid #0cbaa0;
  background-color: #0cbaa0;
  border-radius: 20px;
  margin: 0 10px 10px 0;
  padding: 2px 10px;
  text-decoration: none;
}

ul.list-category {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  background-color: #f5f5f4;
  padding: 20px;
  border-radius: 7px;
  overflow: hidden;
}

ul.list-category li a {
  float: left;
  display: block;
  width: 195px;
  height: 150px;
  margin: 5px;
  padding: 15px;
  border: 1px solid #dededa;
  background-color: #fff;
  color: #4a4544;
  text-align: center;
  text-decoration: none;
  border-radius: 7px;
}

ul.list-category li a h3 {
  font-size: 16px;
  text-decoration: none;
  color: #000;
  padding-bottom: 3px;
}

ul.list-category li a p {
  font-size: 12px;
  text-decoration: none;
  text-align: left;
  color: #666;
  line-height: 1.6;
}

ul.list-category li a img {
  padding-bottom: 3px;
}

ul.button_category li {
  width: 100%;
}

/* マイページ
--------------------------------------------------------- */
div#my-menu {
  background-color: #f5f5f4;
  border-radius: 7px;
  margin: 15px 0 30px;
  padding: 10px;
  width: 730px;
}

div#my-menu ul {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

div#my-menu ul li {
  display: table-cell;
  vertical-align: middle;
}

div#my-menu ul li a {
  display: block;
  border: 1px solid #dededa;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  margin: 5px;
  padding: 8px 0;
  border-radius: 7px;
}

table.inbox {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: solid 1px #dededa;
  border-right: solid 1px #dededa;
}

table.inbox th {
  border-bottom: solid 1px #dededa;
  border-left: solid 1px #dededa;
  margin: 0;
  padding: 5px;
  text-align: left;
  background-color: #f8f7f3;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.1em;
}

table.inbox td {
  border-bottom: solid 1px #dededa;
  border-left: solid 1px #dededa;
  margin: 0;
  padding: 5px;
  background-color: #fff;
  line-height: 20px;
}

table.statement {
  width: 100%;
  margin: 30px 0 10px 0;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: solid 1px #e7e7e7;
  border-right: solid 1px #e7e7e7;
}

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

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

/* 所持コイン（トップ）
--------------------------------------------------------- */
.area-coin {
  position: relative;
  border-top: 2px solid #fff;
  margin: 10px 0 0 0;
  padding: 15px 0 0 0;
}

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

.area-coin a {
  color: #666;
  font-size: 12px;
}

.area-coin a:hover {
  color: #0cbaa0;
}

.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: relative;
  border: 2px #f2185a solid;
  border-radius: 8px;
  background: #fff;
  padding: 10px 5px;
  color: #f2185a;
  font-size: 10px;
  font-weight: bold;
  line-height: 140%;
  margin: 0 auto 16px;
  box-shadow: 2px 2px 4px #ccc;
  width: 80%;
}

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

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

/* 法人利用可能額
--------------------------------------------------------- */
.area-biz-available {
  position: relative;
  border-top: 2px solid #fff;
  color: #666;
  font-size: 12px;
  margin: 10px 0 0 0;
  padding: 15px 0 0 0;
}

.biz-available-amount {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 19px;
}

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

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

/* 所持コイン（マイページ）
--------------------------------------------------------- */
.area-coin-my-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 96%;
}

.area-coin-my-alert {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e74c3c;
  font-weight: bold;
  text-align: center;
  margin: 20px auto;
}

.area-coin-my-alert p {
  padding: 2px 0 0 0;
}

/* マイページトップ（for 後払い改修）
--------------------------------------------------------- */
.title-sub {
  position: relative;
  font-size: 18px;
  margin: 0 0 16px;
  padding: 0 0 0 15px;
  line-height: 170%;
}

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

.area-coin-my ul {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.area-coin-my ul li {
  display: flex;
  align-items: center;
}

.area-coin-my ul li:nth-of-type(2) {
  font-size: 18px;
}

.area-coin-my ul li:nth-of-type(2) img {
  margin: 0 5px;
}

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

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

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

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

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

.btn-secondary {
  background: #0ca795;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  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 !important;
  width: 40%;
  position: relative;
  overflow: visible; /* 個別メッセージの未読ラベルが隠れるため追加 */
}

a.btn-secondary:hover {
  display: block;
  opacity: 0.9;
  cursor: pointer !important;
}

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

a.btn-secondary-outline:hover {
  display: block;
  opacity: 0.9;
  cursor: pointer !important;
}

.bg-wide .btn-secondary,
.bg-wide .btn-secondary-outline,
.bg-wide .btn-inactive {
  width: 50%;
}

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

a.btn-alert:hover {
  display: block;
  opacity: 0.9;
  cursor: pointer !important;
}

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

.icon-flex {
  display: flex;
  align-items: center;
  color: #999;
}

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

ul.alert-unpaid li {
  display: flex;
  align-items: center;
  background: #fff0f0;
  color: #ee3255;
  padding: 10px;
  margin: 0 0 20px;
}

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

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

/* フォーム
--------------------------------------------------------- */
table.formWrap {
  margin-bottom: 25px;
  border-collapse: collapse;
  border-spacing: 0;
}

table.formWrap th {
  border-top: solid 1px #fff;
  font-weight: bold;
  text-align: left;
  padding: 5px 10px;
  background-color: #f5f5f5;
  width: 200px;
  height: 40px;
}

table.formWrap th div {
  position: relative;
}

table.formWrap td {
  margin: 0;
  padding: 14px;
  background-color: #fff;
  border: 1px solid #f5f5f5;
  width: 550px;
}

table.formWrap td .noWordWrap {
  width: 540px;
  word-wrap: break-word;
  display: block;
}

table.formWrap td.days select {
  width: 25%;
}

.form {
  position: relative;
  padding: 10px;
  color: #000;
  border: solid 1px #dededa;
  margin: 5px 10px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
}

textarea {
  width: 98%;
  border: 0;
  color: #000;
  margin: 5px;
}

.textarea-wrap textarea {
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #dededa;
  border-radius: 12px;
  color: #333;
  padding: 10px;
  margin: 0;
}

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

label.women {
  background: none repeat scroll 0 0 #fb99b6;
  margin-left: 10px;
  padding: 7px;
}

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

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

.indispensable {
  background-color: #e0403e;
  color: #fff;
  padding: 5px;
  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[type="submit"],
input[type="button"] {
  box-sizing: border-box;
  cursor: pointer;
  border: none;
}

input.formBtn,
button.formBtn,
.regPayBtn input {
  display: block;
  font-size: 16px;
  font-weight: 700;
  background-color: #0ca795;
  color: #fff;
  width: 60%;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  padding: 0;
  border: none;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  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 {
  opacity: 0.9;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

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: 80%;
  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: 80%;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  margin: 10px auto 20px;
  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;
}

input.submitRegCommitBtn.col1,
input.submitRegRewriteBtn.col1 {
  width: 60%;
}

.regPayBtn {
  text-align: center;
}

/* select
--------------------------------------------------------- */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 100%;
  height: 33px;
  font-weight: bold;
  color: black;
  background-color: #fff;
  border: solid 1px #ded8d3;
  cursor: pointer;
  padding: 5px 15px 5px 5px;
  background-image: url(../images/arrow.png);
  background-repeat: no-repeat;
  background-size: 14px auto;
  background-position: right 3px center;
  vertical-align: baseline;
}

ul.select {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-top: 5px;
}

ul.select li {
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px 0 0;
}

.birth-date {
  display: flex;
}

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

.birth-date select {
  margin-right: 3px;
}

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

.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 {
  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;
  height: auto;
  font-weight: normal;
}

/* sidebar
--------------------------------------------------------- */
#sidebar {
  float: left;
  width: 220px;
  margin: 5px 10px 10px 0;
  background-color: #f4f6fa;
  color: #333;
  border-radius: 8px;
  position: relative;
}

#sidebar div.side-ttl {
  position: relative;
  padding: 0.55em 1em 0.5em 1.6em;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  color: #2f3f64;
  font-weight: bold;
}

#sidebar div.side-ttl:first-child {
  border-top: none;
}

#sidebar div.side-ttl::after {
  position: absolute;
  top: 10px;
  left: 10px;
  content: '';
  width: 6px;
  height: -webkit-calc(85% - 1em);
  height: calc(85% - 1em);
  background-color: #2f3f64;
  border-radius: 2px;
}

a.side-ttl-bnr-expo2025 {
  display: block;
}

a.side-ttl-bnr-expo2025:hover {
  opacity: 0.9;
}

a.side-ttl-bnr-expo2025 img {
  width: 100%;
  height: auto;
}

#side-area {
  text-align: center;
  padding: 20px 0;
}

.category-tag {
  overflow: hidden;
  padding: 5px;
}

.category-tag a {
  float: left;
  display: block;
  font-size: 10px;
  color: #766e6b;
  margin: 3px 2px;
  padding: 4px 12px;
  background-color: #fff;
  border: 1px solid #dededa;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.2s linear;
}

.category-tag a:hover {
  background: #a1d1bc;
  border: 1px solid #a1d1bc;
  color: #fff;
}

ul.local-navi {
  padding: 10px;
}

ul.local-navi li {
  position: relative;
}

ul.local-navi li a {
  display: flex;
  align-items: center;
  color: #333;
  padding: 5px 0;
  text-decoration: none;
  line-height: 160%;
  cursor: pointer;
}

ul.local-navi li a:hover {
  color: #0cbaa0;
  text-decoration: underline;
}

ul.local-navi li a img {
  width: 16px;
  height: 16px;
  padding: 5px;
}

div#btn-group {
  width: 220px;
  margin-top: 25px;
}

a.btn-signup {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  width: 100%;
  height: 70px;
  line-height: 70px;
  margin-bottom: 10px;
  padding: 0;
  background-color: #0ca795;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(32, 33, 36, 0.2);
  letter-spacing: 1px;
  border-radius: 8px;
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  position: relative;
}

a.btn-signup:hover {
  opacity: 0.9;
}

a.btn-login {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #0ca795;
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin-bottom: 10px;
  padding: 0;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(32, 33, 36, 0.2);
  letter-spacing: 1px;
  border: 1px solid #0ca795;
  border-radius: 8px;
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
}

a.btn-login:hover {
  opacity: 0.9;
}

a.btn-signup p.main-txt {
  letter-spacing: 1px;
}

#sidebar-mypage {
  width: 220px;
  margin: 25px 10px 10px 0;
  background-color: #f4f6fa;
  color: #333;
  border-radius: 8px;
  position: relative;
}

.login_name {
  text-align: center;
  padding: 15px 10px;
  border-bottom: 2px solid #fff;
}

.login_guest_name {
  text-align: center;
  padding: 10px;
}

#sidebar-mypage .line-bnr-side img {
  width: 85%;
  height: auto;
}

ul.anshistory-list {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

ul.anshistory-list li {
  display: inline-block;
  width: 42px;
  height: 42px;
  border: 1px solid #dededa;
  border-radius: 999em;
  margin: 4px;
  overflow: hidden;
}

ul.anshistory-list li img {
  max-width: 100%;
  height: auto;
}

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

ul#disclaimer {
  padding-left: 2.5em;
}

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

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

/* 特商法
--------------------------------------------------------- */
table.tokusyoho {
  width: 750px;
  margin: 20px 0;
  border-collapse: collapse;
  border-spacing: 0;
}

table.tokusyoho th {
  border-bottom: solid 1px #e5eafc;
  border-left: solid 1px #e5eafc;
  border-top: solid 1px #e5eafc;
  font-weight: bold;
  text-align: left;
  padding: 10px;
  background-color: #fbfbff;
  width: 200px;
}

table.tokusyoho td {
  border-bottom: solid 1px #e5eafc;
  border-left: solid 1px #e5eafc;
  border-right: solid 1px #e5eafc;
  margin: 0;
  padding: 10px;
  background-color: #fff;
  width: 550px;
}

/* 待機リクエスト
--------------------------------------------------------- */
.standbyRequest {
  text-align: right;
  padding: 5px 0;
}

.requestPhoto img {
  border: solid 1px #dededa;
  margin-bottom: 10px;
  padding: 3px;
}

.standbyRequest ruby {
  display: inline-table;
  text-align: center;
  white-space: nowrap;
  text-indent: 0;
  margin: 0;
}

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

a.standbyRequestYet {
  width: 223px;
  height: 40px;
  text-align: center;
  line-height: 42px;
  font-weight: bold;
  font-size: 16px;
  display: block;
  background-color: #fff;
  color: #595959;
  border: 1px solid #d9d9d9;
  box-shadow: 0 2px 0 #d9d9d9;
  border-radius: 3px;
}

.standbyReqested {
  display: block;
  color: #ccc !important;
  text-decoration: none;
  pointer-events: none;
}

a.standbyRequestYet:hover {
  background-color: #fff;
  color: #22abb2;
  border: 1px solid #d9d9d9;
  box-shadow: 0 2px 0 #d9d9d9;
}

.standbyRequestModal {
  background-color: #fff;
  border-radius: 10px;
  width: 640px;
  padding: 20px 20px;
}

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

.standbyRequestModal .subject {
  text-align: center;
  width: 90%;
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;
}

.standbyRequestModal .explain {
  width: 100%;
  margin: 0 0 20px;
}

.standbyRequestModal .explain div.name {
  border-bottom: 1px dotted #404040;
  margin-bottom: 20px;
}

.standbyRequestModal .explain div.name p {
  font-size: 20px;
  font-weight: bold;
  color: #404040;
  margin-bottom: 10px;
}

.standbyRequestModal .explain .notice {
  line-height: 26px;
}

#staBtn .standbyRequestModal .explain div {
  float: none;
}

.standbyRequestSubmit {
  margin: 30px 0 0;
}

#staBtn .standbyRequestSubmit {
  width: 100%;
}

/* 待機リクエスト（モーダル）
--------------------------------------------------------- */
#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_open {
  cursor: pointer;
}

.modal_close {
  right: 0;
  cursor: pointer;
}

.modal_content {
  display: none;
  z-index: 6;
  position: fixed;
  text-align: center;
}

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

/* TOPメインビジュアル
--------------------------------------------------------- */
.main-visual {
  text-align: center;
}

.regist-guest-wap .btn-secondary {
  font-size: 16px;
  width: 60%;
}

/* Index ランキング
--------------------------------------------------------- */
.rank-top-wrap + .rank-top-wrap {
  margin-top: 35px;
}

.ttl-rank-category {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  border-bottom: 1px solid #333;
  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%;
}

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

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

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

.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 {
  height: auto;
  width: 100%;
}

.rank_list ul li a p.name {
  border-bottom: none;
  font-weight: bold;
  text-decoration: underline;
  margin: 5px 0 0 0;
}

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

.rank_list .member-btn a {
  display: block;
  margin: 0 auto;
}

/* メッセージ
--------------------------------------------------------- */

/* message-badge */
.message_new_badge {
  width: 8px;
  height: 8px;
  background: #ea4b69;
  border: 1px solid #f4f6fa;
  border-radius: 999em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 6px;
  left: 1px;
}

/* パンくずリスト
--------------------------------------------------------- */
.breadcrumbs {
  color: #333;
  font-size: 13px;
  display: flex;
  align-items: center;
}

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

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

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

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

/* スケジュール一覧（/schedule/）
--------------------------------------------------------- */
#all-schedule {
  width: 92%;
  margin: 14px auto;
}

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

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

.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 {
  background: #eee;
  border-radius: 3px;
  border: none;
  color: #333;
  display: block;
  font-size: 13px;
  font-weight: bold;
  margin: 0 2px;
  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;
}

#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 td {
  padding: 8px 10px;
}

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

.schedules-interval-titles th {
  background-color: #fafafa;
  padding: 5px 0 !important;
  text-align: center !important;
}

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

.my-menu-area ul li {
  display: inline-block;
  height: 130px;
  width: calc(100% / 6);
  text-align: center;
  border: 1px #ccc solid;
}

.my-menu-area ul li:not(:last-child) {
  border-right: none;
}

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

.my-menu-area ul li a:hover {
  color: #07b097;
  cursor: pointer;
}

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

.sidearea_id_name {
  margin: 5px 0 0 0;
}

.sidearea_id_name span {
  color: #8c8c8c;
  font-size: 0.6rem;
  background: #ededed;
  border-radius: 50px;
  padding: 7px 10px;
}

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

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

.area-form img.img-bnr {
  width: 400px;
  height: auto;
}

.card-bg {
  background: #f5f6fa;
  border-radius: 12px;
  padding: 40px 20px 40px;
  width: 70%;
  margin: 0 auto;
}

.card-bg-wide {
  background: #f5f6fa;
  border-radius: 12px;
  padding: 20px 80px 40px;
  margin: 0 auto;
}

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

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

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

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

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

.card-bg .list-preview ul li {
  padding: 20px;
  border-top: 1px dashed #c0cde9;
}

.card-bg .list-preview ul li:first-child {
  border: none;
}

.card-bg ul li .form {
  border: none;
  margin: 0 0 20px;
  padding: 0;
  width: auto;
}

.card-bg ul li .form input {
  margin: 5px 0;
  padding: 10px;
  width: 100%;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  outline: none;
}

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

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

.phone-num .verify-label {
  display: inline-block;
  border: 1px solid #0cbaa0;
  border-radius: 3px;
  color: #0cbaa0;
  font-size: 12px;
  letter-spacing: -0.2px;
  padding: 0 4px;
  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;
  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: 26px;
  background: #d6d6d6;
  border: none;
  border-radius: 999em;
  position: relative;
  cursor: pointer;
}

.card-bg .switch-btn-wrap label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  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% - 25px);
}

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

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

/* 選択時 */
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: 90px;
  margin: 0 5px 0 0;
  padding: 10px;
  height: 36px;
}

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

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

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

  .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;
  width: auto;
  box-shadow: none;
}

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

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

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

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

/* 新規会員登録フォーム：ビギナーサポートエリア下テキスト */
.img-bnr + p {
  width: 86%;
  margin: 0 auto;
}

/* 新規会員登録フォーム：ボタンエリア */
.card-bg-btn-wrap {
  width: 74%;
  margin: 0 auto;
}

.card-bg-btn {
  text-align: center;
  padding: 0 0 40px;
}

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

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

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

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

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

/* 新規会員登録フォーム：秘密の質問 */
.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: 5px;
  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-color: #f8f8f8 !important;
}

/* ラジオボタン（緑） */
.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;
}

/* 電話番号認証
--------------------------------------------------------- */
.regist-form-inner {
  background: #f8f8f8;
  width: 70%;
  padding: 20px;
  margin: 0 auto;
}

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

.form-btn-col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}

.form-btn-col > .btn-wrap {
  width: 42%;
  margin: 0 20px;
}

.form-btn-col > .btn-wrap .btn-secondary {
  width: 100%;
}

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

/* 登録完了ページ
--------------------------------------------------------- */
#regist-area {
  padding: 20px 0 0;
}

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

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

#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: 14px;
  font-weight: bold;
  display: block;
  padding: 15px 0;
  margin: 20px auto;
  text-align: center;
  text-decoration: none;
  width: 50%;
  position: relative;
}

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

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

#regist-area h1 {
  font-size: 22px;
  margin-bottom: 30px;
}

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

#regist-area .recommended-text h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

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

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

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

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

#regist-area .recommended-text p {
  font-size: 13px;
}

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

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

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

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

.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: 50%;
  position: relative;
}

.area-line-jump-btn a:hover {
  opacity: 0.9;
}

.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: 50%;
  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: 60%;
  height: auto;
}

/* 完了ページの法人会員
--------------------------------------------------------- */
#regist-area .area-biz-regist-done {
  width: 60%;
  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;
  margin: 30px auto;
  text-align: center;
  width: 90%;
}

a.line-bnr:hover {
  opacity: 0.9;
}

a.line-bnr img {
  width: 90%;
  height: auto;
}

a.line-bnr-side {
  display: block;
  text-align: center;
}

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

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

/* バナーエリア
--------------------------------------------------------- */
.bnr-area img {
  max-width: 100%;
}

.bnr-area a:hover img {
  opacity: 0.8;
}

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

.summary-title {
  color: #0cbaa0;
  font-size: 17px;
  font-weight: bold;
  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: 48%;
  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: 16px;
  font-weight: bold;
  text-align: center;
  padding: 16px 0;
  text-decoration: none;
  margin: 0 auto;
}

a.btn-top-green-one:hover {
  opacity: 0.9;
}

/* トップページ：KV周り（ログイン中）
--------------------------------------------------------- */
.top-btn-area {
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  top: 176px;
}

/* トップページ：KV内ボタン（未ログイン）
--------------------------------------------------------- */
.top-btn-area-guest {
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  top: 110px;
}

.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;
  padding: 0 1px 0 3px;
}

.top-btn-area-guest .count-box-inner span .number-word {
  font-size: 15px;
}

/* トップページ：KV
--------------------------------------------------------- */
.kv-area {
  position: relative;
}

.kv-area .top-btn-area-beginner-support {
  width: 68%;
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.key-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.kv-area a.lead-link {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  bottom: 1px;
  left: 1px;
  color: #333;
  font-size: 13px;
  padding: 10px 0 10px 16px;
  display: flex;
  align-items: center;
  text-decoration: none;
  width: 97.5%;
}

.kv-area a.lead-link:hover {
  opacity: 0.85;
}

.kv-area a.lead-link img {
  padding-right: 5px;
}

/* トップページ：ビギナーサポート制度実施中リンク
--------------------------------------------------------- */
.top-btn-area-beginner-support {
  padding: 0 35px 32px;
  box-sizing: border-box;
}

.guest-btn-area.login {
  padding: 0 35px 65px;
}

.kv-area .guest-btn-area.login,
.kv-area .top-btn-area-beginner-support.login {
  width: 54%;
}

.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: 10px 0 0;
  text-align: center;
}

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

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

.guest-btn-area {
  padding: 30px 35px 0;
  box-sizing: border-box;
  width: 70%;
  margin: 0 auto;
}

/* 未ログイントップページ（KVエリア：ビギナーサポート制度実施中リンク）
--------------------------------------------------------- */
.top-link-beginner-support {
  position: absolute;
  top: 140px;
  left: 0;
  right: 0;
  text-align: center;
}

.top-link-beginner-support a {
  display: inline-block;
  text-decoration: none;
  color: #fe6422;
  font-size: 14px;
}

.top-link-beginner-support a:hover {
  opacity: 0.8;
}

.top-link-beginner-support a img {
  margin-right: 3px;
  vertical-align: -2px;
}

.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: 13px;
  padding: 2px 6px 0;
  margin: 10px auto;
  text-align: center;
  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;
}

/* 未ログイントップページ（紹介・実績）
--------------------------------------------------------- */
.top-point-area {
  background: #ecfaf7;
  padding: 30px 20px;
}

.top-point-summery {
  margin: 20px 0;
  display: block;
}

.top-point-category1,
.top-point-category2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5px;
}

.top-point-category1 > li {
  display: inline-block;
  background: #cdeee5;
  border-radius: 999em;
  padding: 2px 15px;
  margin: 0 5px;
}

.top-point-category2 > li {
  display: inline-block;
  background: #cdeee5;
  border-radius: 999em;
  padding: 2px 15px;
  margin: 5px;
}

.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: 110px;
  height: 110px;
  background: #fff;
  border: 1px solid #ee3255;
  border-radius: 999em;
  text-align: center;
  line-height: 1.6;
}

.top-point-item > li + li {
  margin-left: 25px;
}

.top-point-item > li .lead {
  color: #ee3255;
  font-size: 18px;
  font-weight: bold;
}

.top-point-item > li .lead .sub {
  font-size: 14px;
}

/* 未ログイントップページ（エキサイトお悩み相談室の特徴）
--------------------------------------------------------- */
.top-feature-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.top-feature-area {
  padding: 30px 20px;
}

.top-feature-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.top-feature-list > .box-top-feature {
  width: 49%;
  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: 0 auto 15px;
}

.top-feature-list > .box-top-feature:first-child .icon-item {
  position: absolute;
  top: 40px;
  right: 23%;
}

.top-feature-list > .box-top-feature .ttl {
  margin-bottom: 10px;
}

.top-feature-list > .box-top-feature .ttl img {
  max-width: 100%;
}

.top-feature-list > .box-top-feature .img {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.top-feature-list > .box-top-feature .text {
  margin-top: 10px;
  line-height: 1.5;
}

/* 未ログイントップページ（みなさまからの口コミ）
--------------------------------------------------------- */
.top-rev-area {
  background: #fcefef;
  padding: 30px 20px 15px;
}

.top-rev-list {
  display: flex;
  overflow-x: scroll;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.top-rev-list > li {
  flex: 0 0 auto;
  width: 180px;
  margin-right: 15px;
}

a.box-top-rev {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  color: #333;
  font-size: 12px;
  padding: 15px;
  box-sizing: border-box;
  text-decoration: none;
}

a.box-top-rev:hover {
  opacity: 0.8;
}

a.box-top-rev .rev-text {
  white-space: normal;
  min-height: 105px;
  margin-bottom: 5px;
  line-height: 160%;
}

a.box-top-rev .lower {
  color: #777;
  margin-top: 5px;
}

a.box-top-rev .area-star-list {
  display: flex;
  align-items: center;
  margin: 0;
}

.top-rev-area .note {
  color: #6c6b68;
  font-size: 10px;
  padding: 30px 0 0;
  text-align: right;
}

/* 未ログイントップページ（はじめての方に相談におすすめ）
--------------------------------------------------------- */
.top-counselor-area {
  padding: 30px 0 5px;
}

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

.top-counselor-area ul.member-top-counselor .member-list {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e8edf8;
  font-size: 13px;
  height: 176px;
}

.top-counselor-area .box-top-counselor .member-detail-caption-area {
  padding: 0 10px;
  display: flex;
  margin: 14px 0 5px;
}

.top-counselor-area a.box-top-counselor:hover {
  opacity: 0.8;
}

.top-counselor-area a.box-top-counselor:hover .name {
  color: #0cbaa0;
}

.specialty .icon {
  margin-right: 3px;
  vertical-align: -4px;
}

.icon-explain {
  display: flex;
  align-items: center;
  font-size: 11px;
}

.icon-explain img {
  margin-right: 3px;
}

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

.counselingprogram-entrance ul li {
  margin: 0 12px 6px 0;
  width: 11%;
}

.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 ul li a:hover,
.counselingprogram-entrance-prof ul li a:hover {
  opacity: 0.9;
}

.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;
  border-radius: 12px;
  margin: 10px auto 20px;
  padding: 15px 0 5px;
  width: 100%;
}

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

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

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

p.counselingprogram-entrance-read {
  font-size: 14px;
  padding: 0 25px;
  letter-spacing: -0.4px;
}

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

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

.counselingprogram-entrance-prof ul li:last-child {
  margin: 0 5px 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;
}

/* ePayログインの追加分 リファクタリング後に別CSSに移動予定
--------------------------------------------------------- */
.title-area h1,
.title-area h2 {
  margin: 20px 0;
  font-size: 22px;
}

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: 86%;
  line-height: 50px;
}

a.btn-line:hover {
  opacity: 0.9;
}

.area-sns a {
  position: relative;
  display: flex;
  align-items: center;
}

.area-sns a img {
  position: absolute;
  left: 10px;
}

.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-size: 16px;
  font-weight: bold;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 50%;
}

.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-size: 16px;
  font-weight: 700;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 50%;
}

.btn-link-inner-border-80 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-size: 16px;
  font-weight: 700;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 80%;
}

.card-bg input.formBtn {
  display: block;
  font-size: 16px;
  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 3px rgba(0, 0, 0, 0.2);
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  outline: none;
}

.card-bg input.formBtn:hover {
  opacity: 0.9;
}

.option-login a i {
  margin: 0 0 0 3px;
}

.btn-border-black {
  display: block;
  background-color: #fff;
  border: 1px solid #666;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #333 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 50px;
  margin: 20px auto 10px;
  text-align: center;
  text-decoration: none !important;
  width: 86%;
}

.btn-border-black:hover {
  opacity: 0.9;
}

/* ログインID照会 */
.inquiry-id {
  background: #fff;
  border: 1px solid #afafaf;
  border-radius: 5px;
  font-weight: bold;
  margin: 10px 0 20px;
  padding: 10px 15px;
}

.inquiry-id-bg {
  background: #f5f8fe;
  border-radius: 5px;
  margin: 10px 0 15px;
  padding: 10px 14px 20px;
}

.inquiry-id-bg .btn-link-inner a {
  width: 84% !important;
}

/* 新規会員登録メニュー
--------------------------------------------------------- */
.page-bg-gray {
  background: #f8f8f8;
  padding: 30px 0;
  box-sizing: border-box;
  min-height: calc(100vh - 90px);
}

.regist-menu-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 35px;
  width: 55%;
  margin: 5px auto;
}

.regist-menu-box .ttl-page {
  font-size: 22px;
  margin-bottom: 25px;
  text-align: center;
}

.regist-menu-box .area-sns a {
  font-size: 16px;
  line-height: 60px;
}

.regist-menu-box .link-login {
  margin-top: 40px;
  text-align: center;
}

.regist-menu-box .link-login a {
  color: #333;
}

.kv-beginner-support {
  background: #fff0ef url("../images/help/beginner/img-regist-woman.png") no-repeat right 20px bottom;
  background-size: 30% auto;
  border: 1px solid #fac3bf;
  border-radius: 12px;
  box-sizing: border-box;
  width: 55%;
  margin: 40px auto 0;
  padding: 20px;
}

.kv-beginner-support > .head {
  color: #ee3255;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* 各種バナーエリア
--------------------------------------------------------- */
.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:hover {
  opacity: 0.8;
}

.primary-bnr-area img {
  box-shadow: 8px 0 12px rgba(57, 48, 109, 0.15);
}

.secondary-bnr-area {
  width: 90%;
  margin: 20px auto 0;
}

.secondary-bnr-area .bnr img {
  border-radius: 8px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  width: 90%;
  height: auto;
}

.secondary-bnr-area .bnr .text {
  color: #ea7b59;
  display: inline-block;
  font-weight: bold;
  font-size: 13px;
  padding: 0 0 6px;
}

.secondary-bnr-area .bnr a:hover img {
  opacity: 0.8;
}

/* 特集・コラム 記事関連一覧（トップ）
--------------------------------------------------------- */
.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: wrap;
  align-items: center;
  color: #333;
  text-decoration: none;
}

a.article-link-top:hover {
  text-decoration: underline;
}

a.article-link-top .label-new {
  display: inline-block;
  background: #ea4b69;
  color: #fff;
  padding: 1px 3px;
  margin-left: 7px;
  border-radius: 3px;
  font-size: 12px;
}

a.article-link-top > .img {
  width: 64px;
  margin-right: 15px;
}

a.article-link-top > .text {
  width: calc(100% - 79px);
  line-height: 1.5;
}

a.article-link-top > .text .date {
  color: #666;
  font-size: 11px;
  margin-top: 3px;
}

/* ヘッダーバナー
--------------------------------------------------------- */
.header-bnr a {
  display: block;
  background: #06c755;
}

.header-bnr-appdl a {
  display: block;
  background: #fc8079;
}

.header-bnr a:hover,
.header-bnr-appdl a:hover {
  opacity: 0.8;
}

.header-bnr img,
.header-bnr-appdl img {
  display: block;
  width: 1000px;
  height: auto;
  margin: 0 auto;
}

/* テキストリンクのarrowアイコン
--------------------------------------------------------- */
.link-icon-arr-right {
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

.c .link-icon-arr-right {
  justify-content: center;
}

.link-icon-arr-right img {
  margin: 0 4px;
  height: 13px;
  width: 8px;
}

.link-icon-flex {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.link-icon-flex img {
  margin: 0 3px;
  width: 13px;
  height: auto;
}

/* ヒント
--------------------------------------------------------- */
.area-hint {
  background: #fff4ed;
  border: 1px #ed715d solid;
  border-radius: 10px;
  margin: 0 auto;
  padding: 16px 14px;
  position: relative;
}

.area-hint-noborder {
  background: #fff4ed;
  border-radius: 10px;
  margin: 20px auto 0;
  padding: 16px 18px;
  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 ul li:nth-of-type(2) {
  margin: 0 0 0 5px;
}

.area-hint-noborder ul li:last-child {
  margin: 0 0 0 5px;
}

/* excite通話アプリ
--------------------------------------------------------- */
.bn-inline a {
  display: inline;
  margin: 0 10px 0 0;
}

.bn-inline a img {
  width: 25%;
  height: auto;
}

img.logo-all {
  width: 45%;
  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;
}

.exite-app-note {
  background: #f4f6fa;
  border-radius: 10px;
  margin: 30px auto;
  padding: 25px 16px;
  width: 86%;
}

.app-support {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px auto 25px;
}

.app-support-detail {
  line-height: 140%;
  margin: 0 0 0 10px;
}

.app-support-detail small {
  font-size: 10px;
  display: block;
  line-height: 160%;
}

.app-dl p {
  font-size: 13px;
}

.app-support-slim {
  background: #f4f6fa;
  border-radius: 10px;
  display: flex;
  align-items: center;
  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: 0 0 5px;
  position: absolute;
  right: 40px;
}

.mark-beginner-support .mark-flex {
  display: flex;
  align-items: center;
}

.mark-beginner-support .mark-flex a {
  margin: 0 0 0 10px;
}

.mark-beginner-support .mark-beginner-discount {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px #fd5812 solid;
  border-radius: 3px;
  color: #fe6422;
  font-size: 13px;
  font-weight: bold;
  padding: 1px 8px;
}

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

.mark-beginner-support-explain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 5px;
  color: #fe6422;
  font-weight: bold;
}

/* 404 not found
--------------------------------------------------------- */
.not-found-head {
  font-size: 19px;
  font-weight: bold;
  padding: 37px 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: 43px;
  height: 48px;
  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: 45px;
  height: 59px;
  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%);
}

/* chatbot btn
--------------------------------------------------------- */
#chat_badge_ai {
  left: auto !important;
  right: 5px !important;
  bottom: 95px !important;
}

#z-widget-container-z {
  left: auto !important;
  right: 15px !important;
  bottom: 15px !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: 50%;
  height: auto;
  padding: 0;
  position: fixed;
  top: calc(50% + 20px) !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  line-height: 1.6;
  z-index: 10000;
}

.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: 27px 20px;
  text-align: center;
}

.about-call-done-fav-modal .modal_content_inner {
  padding: 20px 15px;
  max-height: 60vh;
  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: 32px;
}

.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 {
  margin-bottom: 5px;
}

.about-call-done-fav-modal .area-star-list {
  margin: 0;
}

.about-call-done-fav-modal .btn-secondary {
  width: 58%;
  font-size: 16px;
  padding: 14px 0 11px;
}

.about-call-done-fav-modal .btn-secondary > span {
  vertical-align: -4px;
  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;
}

/* ご利用上の注意事項
--------------------------------------------------------- */
.attention {
  border-top: 1px #ccc solid;
  font-size: 12px;
  margin: 0 auto;
  padding: 20px;
  width: 74%;
  line-height: 160%;
}

.attention li a {
  color: #333;
}

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

.attention-wide {
  width: 94% !important;
}

/* トップページ（クーポン）
--------------------------------------------------------- */
.coupon-news a {
  color: #ee3255;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}

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

.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 {
  text-decoration: none;
}

ul.top-counselor-coupon-scroll-x li a:hover {
  opacity: 0.8;
}

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