@charset "UTF-8";
/* Default */
/*------------------------------------
  Variables
------------------------------------*/
/* ベルラス設定 */
nav.navbar {
  background-color: #db74a1;
}

nav.navbar div.u-header-logo-toggler {
  padding: 0 15px;
  background-color: #db74a1;
}

nav.navbar .g-hidden-sm-down {
  color: #fff;
  font-size: 16px;
}

nav.navbar .u-header__nav-toggler i {
  color: #fff !important;
  font-weight: bold;
}

#sideNavMenu li {
  padding: 0.4em 0;
}

.hard-bg {
  background-color: #db74a1;
}

.mild-bg {
  background-color: #fdf2f5;
}

.g-bg-darkblue-v2 {
  background-color: #db74a1 !important;
}

.g-bg-pink-lineargradient-v2 {
  background-image: linear-gradient(to right top, #db74a1 10%, #ff7b9c 65%, #fdf2f5 125%);
}

/* [ Sample ] */
/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
b {
  font-weight: bold;
}

code {
  margin: 0 0.1rem;
  padding: 0.15rem;
  background-color: #f7f7f7;
  border: 1px solid #cecfce;
  border-radius: 4px;
}

#notificationsInvoker i.text-danger {
  animation: blink 1s step-end infinite alternate;
  /* blink */
}

@keyframes blink {
  70% {
    opacity: 0.2;
  }
}

.help {
  color: #406b19;
}

.help-block {
  display: block;
  color: #406b19;
}

.form-control:-ms-input-placeholder {
  opacity: .5 !important;
}

.form-control::placeholder {
  opacity: .5 !important;
}

table.middle td,
table.middle th {
  vertical-align: middle;
}

table.middle td *,
table.middle th * {
  margin: auto;
}

.table thead tr th {
  text-align: center;
}

td.sortable {
  text-align: center;
}

.unit {
  margin-left: 0.2em;
}

.honorific {
  margin-left: 0.2em;
  font-size: 0.9rem;
  opacity: 0.8;
}

.vertical-middle {
  vertical-align: middle !important;
}

.table-hover tbody tr:hover {
  background-color: #f0f6ff;
}

.u-has-error-v1-3 [class*="input-group-"],
.u-has-error-v1-3 [class*="input-group-"]:last-child {
  color: inherit;
}

ul.pagination li.active span {
  border-color: #527bcc;
  background-color: #527bcc;
  color: #fff;
}

.form-horizontal label {
  font-weight: bold;
}

ul.attention {
  color: #cc0000;
}

ul.attention li {
  list-style: none;
  margin-bottom: 0.6rem;
}

ul.attention li::before {
  content: '※';
}

li.linkList {
  cursor: pointer;
}

li.linkList:hover {
  background: #f5f9f9;
}

li.linkList:hover span.pull-right {
  text-decoration: underline;
  color: #3e6cc6;
}

/* Side Menu */
.u-side-nav-mini a.js-side-nav i {
  color: #e81c62;
  font-weight: bold;
  filter: drop-shadow(1px 1px 0px rgba(232, 28, 98, 0.9));
}

/* intro.js */
.introjs-helperLayer {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.introjs-tooltip {
  max-width: 100% !important;
  min-width: 400px !important;
}

/* 予約ページ管理 */
table#bookingPages div.info {
  display: none;
}

table#bookingPages div.info dl {
  margin: 0 1px 6px 1px;
  border-bottom: 1px solid #CECFCE;
}

table#bookingPages div.pageTitle {
  padding: 10px;
}

table#bookingPages div.pageTitle * {
  vertical-align: top;
}

table#bookingPages div.pageTitle a.frontPageLink {
  display: inline-block;
  padding-top: 3px;
  font-size: 16px;
}

table#bookingPages div.pageTitle .toggleInfo {
  float: right;
  width: 2em;
  font-size: 18px;
  text-align: center;
}

table#bookingPages tbody tr th.thead {
  height: 1em;
  text-align: center;
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

table#bookingPages tbody tr td.toggle {
  cursor: pointer;
}

table#bookingPages tbody tr td.toggle .toggleDetail i {
  position: relative;
  top: 10px;
  right: 4px;
  font-size: 20px;
}

table#bookingPages tbody tr td div.info td {
  background: #f5f9f9;
}

table#bookingPages tbody tr.deleted td {
  background: #f2f2f2;
}

#bookingHistories .scheduleUser {
  position: relative;
  top: -4px;
}

/* ヘルプ・FAQ */
#HelpIndexForm .error-message {
  margin: 0.4rem 0 0 1.78571rem;
  color: #fff !important;
  text-decoration: underline;
  font-weight: bold;
}

.decoration {
  font-size: 1.2rem;
}

.decoration h1 {
  position: relative;
  padding-bottom: 0.5em;
}

.decoration h1::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  box-sizing: border-box;
  border-top: 3px solid black;
  border-bottom: 1px solid black;
}

.decoration h2 {
  color: #db74a1;
  margin: 40px -8px 16px -8px;
  padding: 20px 8px 16px 24px;
  line-height: 28px;
  background-color: #f4f4f4;
  font-weight: bold;
}

.decoration h3 {
  margin: 21px 0;
  padding: 0.25em 0.5em;
  background: #f4f4f4;
  border-left: solid 5px #db74a1;
  border-bottom: solid 3px #d7d7d7;
}

.decoration h4 {
  margin: 16px 0;
  padding: 0.25em 0.5em;
  /*上下 左右の余白*/
  color: #494949;
  /*文字色*/
  background: transparent;
  /*背景透明に*/
  border-left: solid 5px #7db4e6;
  /*左線*/
}

.decoration h5 {
  margin: 14px 0;
  position: relative;
  padding-left: 0.7em;
}

.decoration h5::after {
  position: absolute;
  top: 50%;
  left: 0;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  content: '';
  width: 5px;
  height: 1em;
  color: #494949;
  /*文字色*/
  font-size: 1.25rem;
  background-color: #7db4e6;
}

.decoration h6 {
  margin: 12px 0;
  color: #db74a1;
  font-weight: bold;
  font-size: 1.15rem;
}

.decoration p {
  padding: 0 1rem;
}

.decoration img {
  filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

.decoration blockquote {
  position: relative;
  padding: 10px 15px 10px 60px;
  box-sizing: border-box;
  font-style: italic;
  background: #f5f5f5;
  color: #555555;
  border-left: 4px solid #9dd4ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

.decoration blockquote:before {
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 15px;
  content: "\f10d";
  font-family: FontAwesome;
  color: #9dd4ff;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.decoration blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}

.decoration blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

.decoration code {
  display: inline-block;
  background: #f0f5f9;
  border-radius: 3px;
  margin: 0 0.1em;
  padding: 0.1em 0.2em;
  font-size: .85em;
  line-height: 1.4;
}

.decoration pre {
  margin: 1em 0;
  padding: 1em;
  border-radius: 5px;
  background: #f0f5f9;
  white-space: pre-wrap;
  font-size: .85em;
}

.decoration pre code {
  background: inherit;
  border: 0;
  font-size: 1em;
}

.u-btn-outline-primary:focus,
.u-btn-outline-primary.active {
  color: #fff !important;
  background-color: #527bcc;
}

/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
#BookingPageColor {
  padding: 0.25rem 0.75rem;
}

div.palette-color-picker-button {
  width: 41px;
  height: 41px;
  margin-top: 1px;
}

/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
.cake-error {
  margin-top: 80px;
}

.cake-debug {
  margin-top: 80px;
}

.error-message {
  display: block;
  margin-left: 0.2em;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  color: #dc3545 !important;
}

.bold {
  font-weight: bold;
}

.display-none {
  display: none !important;
}

.u-side-nav--has-sub-menu__indicator {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.input-datetime select {
  margin: auto 4px !important;
}

span.required {
  margin-left: 0.2em;
  color: #CC0000;
}

span.help-block {
  display: block;
  margin-left: 0.2em;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

span.verticalWriting {
  display: inline-block;
  -ms-transform: rotate(90deg);
      transform: rotate(90deg);
}

tr.deleted td {
  background-color: #e8e8e8;
}

#addFormElement tr {
  display: none;
}

span.mailTag {
  display: inline-block;
  padding: 2px 4px;
  margin: 0 2px;
  border: 1px solid #CECFCE;
  border-radius: 4px;
  background-color: #f7f7f7;
  color: #db74a1;
  font-size: 13px;
  white-space: nowrap;
}

.alert .title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.6em;
}

.alert .title .count {
  margin-right: 0.1em;
  font-size: 1.4em;
}

.alert .read {
  font-size: 1.2em;
}

#mailInsertTags span.mailTag {
  margin: 0 4px 8px 0;
  cursor: pointer;
}

#mailInsertTags span.mailTag:hover {
  border-color: #db74a1;
  background-color: #e7e7e7;
}

#notificationsMenu .notificationItem h5 {
  color: #333333;
  font-size: 16px;
}

#notificationsMenu .notificationItem.read h5 {
  color: #999999;
  font-size: 14px;
}

#notificationBody img {
  filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

.help-body img {
  filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

#scheduleNote .noteAlert,
#scheduleNote .noteForm {
  display: none;
}

/* プラン変更 */
#changePlan div.disableButton {
  display: inline-block;
  padding: 7px 40px;
  border: 1px solid #585f69;
  border-radius: 4.2px;
  background-color: #dde0e3;
  cursor: not-allowed;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 400;
  color: #111;
  text-shadow: 1px 1px 1px #fff;
  line-height: 1.5;
}

.toggleSwitch .info {
  margin-top: 6px;
  font-size: 0.85714rem;
  color: #0a0a0a;
}

.toggleSwitch:hover .info {
  color: #fff;
}

.planInfo h2 {
  text-align: center;
}

.planInfo table {
  width: 100%;
}

.planInfo .planDescription {
  display: none;
}

.planInfo span.value {
  margin-left: 0.6em;
  font-size: 1.25em;
}

.planInfo span.attention {
  color: #CC0000;
}

.planInfo ul li {
  margin-bottom: 0.85714rem;
}

ol.planChangeAttention {
  counter-reset: number;
  list-style: none;
}

ol.planChangeAttention li {
  font-size: 1.28571rem;
  margin-bottom: 1rem;
  color: #333;
}

ol.planChangeAttention li:before {
  counter-increment: number;
  content: "※ " counter(number) "　";
}

/*-----------------------------------------------------
 * Price Table
/*-----------------------------------------------------*/
.priceTable .plan-wrap {
  text-align: center;
}

.priceTable .plan-wrap h3 {
  display: none;
}

.priceTable .plan-wrap h3 + p {
  display: none;
}

.priceTable .plan-wrap p:first-child {
  display: none;
}

.priceTable .plan-wrap .pB {
  color: #0e56a8;
}

.priceTable .plan-wrap table {
  max-width: 1080px;
  width: 80%;
  margin: 50px auto 90px;
  background: #fff;
  border-collapse: collapse;
  box-shadow: 0 0 15px rgba(172, 172, 172, 0.25);
}

.priceTable .plan-wrap tr:nth-child(odd) td {
  background: #f7f7f7;
}

.priceTable .plan-wrap th, .priceTable .plan-wrap td {
  padding: 20px 0;
  border-right: 2px solid #ebebeb;
}

.priceTable .plan-wrap th:last-child,
.priceTable .plan-wrap td:last-child {
  border: none !important;
}

.priceTable .plan-wrap th {
  font-size: 120%;
}

.priceTable .plan-wrap td {
  text-align: center;
  width: calc((100% - 30%) / 4);
}

.priceTable .plan-wrap td span {
  font-size: 140%;
  font-weight: bold;
}

.priceTable .plan-wrap td:first-child {
  width: 30%;
}

.priceTable .pLastArea {
  padding: 10px !important;
}

.priceTable .pSmall {
  font-size: .8rem;
  text-align: left;
  margin: 0;
}

@media (max-width: 991.98px) {
  .priceTable .disp-sp {
    display: block;
  }
  .priceTable .plan-wrap h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    padding: 0;
  }
  .priceTable .plan-wrap table {
    width: 96%;
    margin: 30px auto;
  }
  .priceTable .plan-wrap th {
    font-size: 100%;
  }
  .priceTable .plan-wrap th,
  .priceTable .plan-wrap td {
    padding: 10px 0;
  }
  .priceTable .plan-wrap td span {
    font-size: 120%;
  }
}