@charset "UTF-8";

/*
* Common Style
*/
.pointer {
  cursor: pointer;
}

.underline {
  text-decoration: underline;
}

/*#region Bug Aboidance */
/* iOS 100vh */
.app-body .sidebar {
  padding-bottom: calc(env(safe-area-inset-bottom));
  padding-bottom: calc(constant(safe-area-inset-bottom));
}
/*#endregion*/

/*#region PC・SPの表示非表示*/
.pc_area {
  display: block;
}

.phone_area {
  display: none;
}

@media screen and (max-width:768px) {
  .pc_area {
    display: none;
  }

  .phone_area {
    display: block;
  }
}
/*#endregion*/

/*#region font-size */
.font-9 {
  font-size: 9px !important;
}

.font-10 {
  font-size: 10px !important;
}

.font-11 {
  font-size: 11px !important;
}

.font-12 {
  font-size: 12px !important;
}

.font-14 {
  font-size: 14px !important;
}

.font-16 {
  font-size: 16px !important;
}

.font-17 {
  font-size: 17px !important;
}

.font-18 {
  font-size: 18px !important;
}

.font-20 {
  font-size: 20px !important;
}

.font-24 {
  font-size: 24px !important;
}

.font-28 {
  font-size: 28px !important;
}

.font-32 {
  font-size: 32px !important;
}

.font-36 {
  font-size: 36px !important;
}

.font-40 {
  font-size: 40px !important;
}

.font-48 {
  font-size: 48px !important;
}

.font-64 {
  font-size: 64px !important;
}

@media screen and (max-width: 567px) {
  .font-sm-10 {
    font-size: 10px !important;
  }

  .font-sm-12 {
    font-size: 12px !important;
  }

  .font-sm-14 {
    font-size: 14px !important;
  }

  .font-sm-16 {
    font-size: 16px !important;
  }

  .font-sm-18 {
    font-size: 18px !important;
  }

  .font-sm-20 {
    font-size: 20px !important;
  }

  .font-sm-22 {
    font-size: 22px !important;
  }

  .font-sm-24 {
    font-size: 24px !important;
  }

  .font-sm-28 {
    font-size: 28px !important;
  }
}

/*#endregion*/

/*#region typography*/
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}

@media screen and (max-width: 576px) {
  .title {
    font-size: 20px;
    margin-bottom: 12px;
  }
}
/*#endregion*/

/*#region border*/
.rounded-xl {
  border-radius: 16px;
}

.form-control,
.input-group-text {
  border-color: #ccc;
}

.is-invalid [data-validator] {
  border-color: #f86c6b;
  padding-right: calc(1.5em + 0.75rem);
}
/*#endregion*/

/*#region gap */
.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap-12 {
  gap: 12px;
}

.gap-16 {
  gap: 16px;
}

.gap-20 {
  gap: 20px;
}

.gap-24 {
  gap: 24px;
}

.gap-28 {
  gap: 28px;
}

.gap-32 {
  gap: 32px;
}

.gap-36 {
  gap: 36px;
}

.gap-40 {
  gap: 40px;
}

.gap-48 {
  gap: 48px;
}

@media screen and (max-width: 567px) {
  .gap-sm-0 {
    gap: 0px;
  }

  .gap-sm-4 {
    gap: 4px;
  }

  .gap-sm-8 {
    gap: 8px;
  }

  .gap-sm-12 {
    gap: 12px;
  }

  .gap-sm-16 {
    gap: 16px;
  }

  .gap-sm-20 {
    gap: 20px;
  }

  .gap-sm-24 {
    gap: 24px;
  }

  .gap-sm-28 {
    gap: 28px;
  }

  .gap-sm-32 {
    gap: 32px;
  }

  .gap-sm-36 {
    gap: 36px;
  }

  .gap-sm-40 {
    gap: 40px;
  }
}

.c-gap-4 {
  column-gap: 4px;
}

.c-gap-8 {
  column-gap: 8px;
}

.c-gap-12 {
  column-gap: 12px;
}

.c-gap-16 {
  column-gap: 16px;
}

.c-gap-20 {
  column-gap: 20px;
}

.c-gap-24 {
  column-gap: 24px;
}

.c-gap-28 {
  column-gap: 28px;
}

.c-gap-32 {
  column-gap: 32px;
}

.c-gap-36 {
  column-gap: 36px;
}

.c-gap-40 {
  column-gap: 40px;
}

.c-gap-48 {
  column-gap: 48px;
}

@media screen and (max-width: 567px) {
  .c-gap-sm-4 {
    column-gap: 4px;
  }

  .c-gap-sm-8 {
    column-gap: 8px;
  }

  .c-gap-sm-12 {
    column-gap: 12px;
  }

  .c-gap-sm-16 {
    column-gap: 16px;
  }

  .c-gap-sm-20 {
    column-gap: 20px;
  }

  .c-gap-sm-24 {
    column-gap: 24px;
  }

  .c-gap-sm-28 {
    column-gap: 28px;
  }

  .c-gap-sm-32 {
    column-gap: 32px;
  }

  .c-gap-sm-36 {
    column-gap: 36px;
  }

  .c-gap-sm-40 {
    column-gap: 40px;
  }
}
/*#endregion*/

/*#region width*/
.w-fit-content {
  width: fit-content;
}
/*#endregion*/



/*
* Component Style
*/
/*#region header*/
@media (min-width: 992px) {
  .app-header .navbar-brand {
    width: 200px;
  }
}
/*#endregion*/

/*#region sidebar*/
.sidebar-minimized .sidebar #sidebarProfile {
  display: none;
}

@media screen and (min-width: 992px) {
  .brand-minimized .app-header .navbar-brand {
    display: none;
  }
}
/*#endregion*/

/*#region テーブル*/
.table td,
.table th {
  vertical-align: middle;
}
.table tr:first-child td {
  border-top: none;
}
/*#endregion*/

/*#region カード*/
.card-header > i {
  margin-right: 0;
}

a.card-header {
  cursor: pointer;
}
/*#endregion*/

/*#region Form*/
/*#region FormCommonStyle*/
.form-control-lg,
.input-group-lg > .form-control,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 15px;
  font-size: 1rem;
  height: calc(1.5em + 30px + 2px);
}

.form-control-xl,
.input-group-xl > .form-control,
.input-group-xl > .input-group-prepend > .input-group-text,
.input-group-xl > .input-group-append > .input-group-text,
.input-group-xl > .input-group-prepend > .btn,
.input-group-xl > .input-group-append > .btn {
  padding: 25px 15px;
  font-size: 1.25rem;
  height: calc(1.5em + 50px + 2px);
}
/*#endregion*/

/*#region Form -AutoComplete*/
.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ui-menu .ui-menu-item-wrapper {
  padding: 10px;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background-image: none;
  background-color: #aaddff;
}

.modal-input-phone input {
  padding-left: 48px !important;
}

.iti__selected-country {
  border-right: 0.5px solid var(--iti-border-color);
}
/*#endregion*/

/*#region Form Check Btn(ボタン形式のラジオボタン)*/
.form-check-btn {
  margin-right: 0;
}

  .form-check-btn input[type="radio"],
  .form-check-btn input[type="checkbox"] {
    display: none;
  }

    .form-check-btn input[type="radio"]:checked + label,
    .form-check-btn input[type="checkbox"]:checked + label {
      background-color: var(--primary);
      color: #fff;
    }

.form-check-btn-primary input[type="radio"]:checked + label,
.form-check-btn-primary input[type="checkbox"]:checked + label {
  background-color: var(--primary);
  color: #fff;
}

.form-check-btn .aspNetDisabled + label,
.form-check-btn .aspNetDisabled + label:active {
  color: #8c8c8c !important;
  border-color: #8c8c8c !important;
  background-color: transparent !important;
  opacity: 0.65 !important;
  cursor: not-allowed;
}
/*#endregion*/
/*#endregion*/

/*#region button style */
.btn-xl {
  /* font-size: 0.875rem; */
  padding: 15px;
}
/*#endregion*/



/*
* Layout Style
*/
/*#region gridレイアウト*/
.d-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-cols-custom {
  grid-template-columns: var(--grid-cols-custom);
}

@media (min-width: 576px) {
  .d-sm-grid {
    display: grid !important;
  }

  .grid-cols-sm-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-sm-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-sm-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-sm-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-cols-sm-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-cols-sm-custom {
    grid-template-columns: var(--grid-cols-sm-custom);
  }
}

@media (min-width: 768px) {
  .d-md-grid {
    display: grid !important;
  }

  .grid-cols-md-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-md-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-cols-md-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-cols-md-custom {
    grid-template-columns: var(--grid-cols-md-custom);
  }
}

@media (min-width: 992px) {
  .d-lg-grid {
    display: grid !important;
  }

  .grid-cols-lg-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-lg-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-cols-lg-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid-cols-lg-custom {
    grid-template-columns: var(--grid-cols-lg-custom);
  }
}

@media (min-width: 1200px) {
  .d-xl-grid {
    display: grid !important;
  }

  .grid-cols-xl-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid-cols-xl-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-xl-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-xl-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-cols-xl-custom {
    grid-template-columns: var(--grid-cols-xl-custom);
  }
}
/*#endregion*/



/*
* アニメーション
*/
/*#region load-screen*/
.load-screen {
  background-color: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

.load-screen .load-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
/*#endregion*/


/*
* Venderの上書き
*/
/*#region カレンダー*/
.fc-event, .fc-event-dot {
  border: 1px solid var(--secondary) !important;
  background-color: var(--secondary) !important;
  color: #fff !important;
}

.fc-today-button {
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
}

.fc-today-button.disabled, .fc-today-button:disabled {
    color: #ffffff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
  }

.fc-state-down, .fc-state-active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.fc-state-hover, .fc-state-down, .fc-state-active, .fc-state-disabled {
  color: #fff !important;
}
/*#endregion*/


/*
* awesome-checkboxの上書き
*/
/*#region awesome-checkbox custom style*/
.abc-checkbox.abc-checkbox-large {
  padding-left: 33px;
  margin-bottom: 15px;
}

  .abc-checkbox.abc-checkbox-large input[type="checkbox"],
  .abc-checkbox.abc-checkbox-large input[type="radio"] {
    margin-left: -28px;
  }

  .abc-checkbox.abc-checkbox-large label::before {
    width: 25px;
    height: 25px;
  }

  .abc-checkbox.abc-checkbox-large input[type="checkbox"]:checked + label::after {
    font-size: 1.125rem;
    margin-left: -19px;
  }

  .abc-checkbox.abc-checkbox-large label {
    font-size: 1.125rem;
    padding-left: 10px;
  }
/*#endregion*/


/*
* ProductLabel Style(MProductLabelのclassに対応するstyleを記述)
*/
/*#region ProductLabel*/
.label-new {
  background-color: #cfffd0;
  color: #219135;
  border-radius: 0.25rem;
  font-size: 11.5px;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  margin-right: 0.25rem;
}

.label-limited {
  background-image: linear-gradient(90deg, #ffdef5 40%, #ffd1fb 100%);
  color: #f10057;
  border-radius: 0.25rem;
  font-size: 11.5px;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  margin-right: 0.25rem;
}

.label-recomend {
  background: #c9e8fd;
  color: #0c417d;
  border-radius: 0.25rem;
  font-size: 11.5px;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  margin-right: 0.25rem;
}
/*#endregion*/


/*
* Badge Style(必須・任意ラベルのstyleを記述)
*/
/*#region Badge*/
.badge-require {
  border: 1px solid #ea0000;
  color: #ea0000;
  background-color: #fff;
}

.badge-optional {
  border: 1px solid #00bcff;
  color: #00bcff;
  background-color: #fff;
}
/*#endregion*/