@charset "UTF-8";
/* HTML: <div class="loader"></div> */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 35px;
  aspect-ratio: 1;
  --c1: linear-gradient(
    90deg,
    #999 calc(100% / 3),
    #fff 0 calc(2 * 100% / 3),
    #999 0
  );
  --c2: linear-gradient(
    0deg,
    #999 calc(100% / 3),
    #fff 0 calc(2 * 100% / 3),
    #999 0
  );
  background: var(--c1), var(--c2), var(--c1), var(--c2);
  background-size: 300% 4px, 4px 300%;
  background-repeat: no-repeat;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  0% {
    background-position: 50% 0, 100% 100%, 0 100%, 0 0;
  }
  25% {
    background-position: 0 0, 100% 50%, 0 100%, 0 0;
  }
  50% {
    background-position: 0 0, 100% 0, 50% 100%, 0 0;
  }
  75% {
    background-position: 0 0, 100% 0, 100% 100%, 0 50%;
  }
  75.01% {
    background-position: 100% 0, 100% 0, 100% 100%, 0 50%;
  }
  100% {
    background-position: 50% 0, 100% 0, 100% 100%, 0 100%;
  }
}
.customer-info-list {
  margin-left: 1em;
}
.customer-info-list .switchArea {
  display: inline-block;
  margin-left: 10px;
}

.blocked_user_label {
  background-color: #cf0000;
  color: #fff;
  font-weight: bold;
  line-height: 1;
  padding: 0.5em 1em;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 0.5em;
}

/* === ボタンを表示するエリア ============================== */
.switchArea {
  line-height: 30px; /* 1行の高さ          */
  letter-spacing: 0; /* 文字間             */
  text-align: center; /* 文字位置は中央     */
  font-size: 12px; /* 文字サイズ         */
  position: relative; /* 親要素が基点       */
  width: 90px; /* ボタンの横幅       */
}

/* === チェックボックス ==================================== */
.switchArea input[type=checkbox] {
  display: none; /* チェックボックス非表示 */
}

/* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
  display: block; /* ボックス要素に変更 */
  box-sizing: border-box; /* 枠線を含んだサイズ */
  height: 30px; /* ボタンの高さ       */
  border: 2px solid #999999; /* 未選択タブのの枠線 */
  border-radius: 15px; /* 角丸               */
}

/* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type=checkbox]:checked + label {
  border-color: #cf0000; /* 選択タブの枠線     */
  background: #fae0e0;
}

/* === 表示する文字（標準） ================================ */
.switchArea label span:after {
  content: "No Block"; /* 表示する文字       */
  padding: 0 0 0 18px; /* 表示する位置       */
  color: #999999; /* 文字色             */
}

/* === 表示する文字（ONのとき） ============================ */
.switchArea input[type=checkbox]:checked + label span:after {
  content: "Blocked"; /* 表示する文字       */
  padding: 0 18px 0 0; /* 表示する位置       */
  color: #cf0000; /* 文字色             */
}

/* === 丸部分のSTYLE（標準） =============================== */
.switchArea .swImg {
  position: absolute; /* 親要素からの相対位置*/
  width: 22px; /* 丸の横幅           */
  height: 22px; /* 丸の高さ           */
  background: #999999; /* カーソルタブの背景 */
  top: 4px; /* 親要素からの位置   */
  left: 4px; /* 親要素からの位置   */
  border-radius: 11px; /* 角丸               */
  transition: 0.2s; /* 滑らか変化         */
}

/* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type=checkbox]:checked ~ .swImg {
  transform: translateX(60px); /* 丸も右へ移動       */
  background: #cf0000; /* カーソルタブの背景 */
}

#send-maillog-form {
  margin-left: 1em;
  margin-bottom: 1em;
}
#send-maillog-form ul > li {
  list-style: none;
  margin-left: 0;
}
#send-maillog-form ul > li > label {
  display: block;
  font-size: 0.8rem;
}
#send-maillog-form ul > li > input[type=text] {
  width: -webkit-fill-available;
  padding: 0.5em;
  margin-bottom: 0.5em;
}

/* === スタジオ予約ページ =========================== */
.booking_box {
  background-color: #ebf5eb;
  padding: 10px;
}
.booking_box > dt {
  padding-bottom: 10px;
  color: #003300;
  border-top: solid 1px #999;
  padding-top: 0.5rem;
  padding-left: 1rem;
  margin-top: 0.5rem;
  position: relative;
}
.booking_box > dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  display: block;
  height: 1.2em;
  width: 5px;
  background-color: #99cc99;
}
.booking_box > dt:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.booking_box > dt:first-of-type::before {
  top: 0;
}
.booking_box > dt.h_date {
  margin-bottom: 0;
  padding-bottom: 0;
}
.booking_box > dd {
  margin-left: 1rem;
}
.booking_box > dd.time_select_dd {
  margin-left: 0;
}
.booking_box > dd .time_select {
  margin-bottom: 0.5rem;
  display: grid;
  grid-template-columns: 5em repeat(3, 1fr);
}
.booking_box > dd .time_select .time_select_line {
  border-top: solid 1px #999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.booking_box > dd .time_select .time_select_line:first-of-type {
  border-left: solid 1px #999;
}
.booking_box > dd .time_select .time_select_line .name, .booking_box > dd .time_select .time_select_line .c_time {
  border-right: solid 1px #999;
  border-bottom: solid 1px #999;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  word-break: auto-phrase;
  min-height: 2rem;
  background-color: #fff;
  padding: 0.2em;
}
.booking_box > dd .time_select .time_select_line .name {
  background-color: #444;
  color: #fff;
  flex-direction: column;
}
.booking_box > dd .time_select .time_select_line .name:first-of-type {
  flex-grow: 2;
}
.booking_box > dd .time_select .time_select_line .name:nth-of-type(even) {
  background-color: #666;
}
.booking_box > dd .time_select .time_select_line .name > .cho_info {
  flex-direction: column;
  font-size: 0.8rem;
  width: 100%;
}
.booking_box > dd .time_select .time_select_line .name > .cho_info > span {
  display: block;
}
.booking_box > dd .time_select .time_select_line .c_time {
  cursor: not-allowed;
}
.booking_box > dd .time_select .time_select_line .c_time:nth-of-type(odd) {
  background-color: #eee;
}
.booking_box > dd .time_select .time_select_line .c_time.x {
  background-color: #d9d9d9;
}
.booking_box > dd .time_select .time_select_line .c_time.x > span {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 1.5em;
  height: 0.1em;
  background: currentColor;
  border-radius: 0.1em;
  position: relative;
  transform: rotate(45deg);
}
.booking_box > dd .time_select .time_select_line .c_time.x > span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.booking_box > dd .time_select .time_select_line .c_time.cho {
  background-color: rgba(255, 206, 236, 0.6117647059);
}
.booking_box > dd .time_select .time_select_line .c_time.cho > span {
  color: #c9548b;
}
.booking_box > dd .time_select .time_select_line .c_time:has(input[type=checkbox]) {
  cursor: pointer;
}
.booking_box > dd .time_select .time_select_line .c_time:has(input[type=checkbox]:checked) {
  cursor: pointer;
  background-color: #5891e7;
  color: #fff;
}
.booking_box > dd .time_select .time_select_line .c_time:has(input[type=checkbox]:checked) > input[type=checkbox]::after {
  border: 3px solid #fff;
  background-color: #5891e7;
}
.booking_box > dd .time_select .time_select_line .c_time:has(input[type=checkbox]:disabled) {
  background-color: #d9d9d9;
  color: #999;
  cursor: not-allowed !important;
}
.booking_box > dd .time_select .time_select_line .c_time:has(input[type=checkbox]:disabled) > input[type=checkbox]::after {
  border: 3px solid #999;
  background-color: #d9d9d9;
}
.booking_box > dd .time_select .time_select_line .c_time input[type=checkbox] {
  cursor: pointer;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.booking_box > dd .time_select .time_select_line .c_time input[type=checkbox]::after {
  content: "";
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 3px solid #5891e7;
  background-color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}
.booking_box > dd .time_select .time_select_line .c_time input[type=checkbox]:checked::after {
  border: 3px solid #fff;
  background-color: #5891e7;
}
.booking_box > dd .time_select .time_select_line .c_time input[type=checkbox]:disabled {
  cursor: not-allowed;
}
.booking_box > dd .time_select_note {
  margin-left: 1rem;
}

select[name=booking_user] {
  width: 100%;
  max-width: 300px;
}

/* サーバーメンテナンス告知 */
.site-maintenance-notice {
  align-items: center;
  background: rgba(35, 30, 25, 0.48);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 10000;
}
.site-maintenance-notice.is-open {
  display: flex;
}
.site-maintenance-notice__dialog {
  background: #fff;
  border: 1px solid #ddd5cd;
  border-radius: 4px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
  color: #2e2419;
  max-height: calc(100vh - 40px);
  max-width: 640px;
  overflow-y: auto;
  padding: 40px 44px 36px;
  position: relative;
  width: 100%;
}
.site-maintenance-notice h2 {
  border-bottom: 1px solid #ddd5cd;
  color: #4c4035;
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0 34px 24px 0;
  padding-bottom: 14px;
}
.site-maintenance-notice p {
  color: #4f4944;
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 18px;
}
.site-maintenance-notice p:last-child {
  margin-bottom: 0;
}
.site-maintenance-notice__lead {
  color: #3f352d !important;
  font-size: 16px !important;
  font-weight: bold;
  margin-bottom: 24px !important;
}
.site-maintenance-notice__important {
  background: #f6f1eb;
  border-left: 3px solid #806654;
  color: #3f352d !important;
  font-weight: bold;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  padding: 12px 14px;
}
.site-maintenance-notice__actions {
  margin-top: 28px !important;
  text-align: center;
}
.site-maintenance-notice__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: #776b61;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 2px 8px;
  position: absolute;
  right: 16px;
  top: 16px;
}
.site-maintenance-notice__close-button {
  appearance: none;
  background: #fff;
  border: 1px solid #806654;
  border-radius: 2px;
  color: #5b4638;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  min-width: 140px;
  padding: 9px 28px;
}
.site-maintenance-notice__close-button:focus,
.site-maintenance-notice__close-button:hover {
  background: #806654;
  color: #fff;
}
.is-maintenance-notice-open {
  overflow: hidden;
}
.maintenance-notice-link {
  margin: 0 0 18px;
  text-align: center;
}
.maintenance-notice-link button {
  appearance: none;
  background: transparent;
  border: 0;
  color: #a22c2c;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  letter-spacing: 0.03em;
  padding: 0;
  text-decoration: underline;
}
@media screen and (max-width: 640px) {
  .site-maintenance-notice {
    padding: 12px;
  }
  .site-maintenance-notice__dialog {
    max-height: calc(100vh - 24px);
    padding: 28px 24px 26px;
  }
  .site-maintenance-notice h2 {
    font-size: 19px;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }
  .site-maintenance-notice p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 14px;
  }
}
/*# sourceMappingURL=style-additional.css.map */