@charset "UTF-8";
/* ------------------------------------------------------------------------------
     common
-------------------------------------------------------------------------------*/
@media (max-width:768px) {
  html {
    font-size: 62.5%;
  }
}
body {
  letter-spacing: 0.04em;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
}

label {
  margin: 0;
}

textarea {
  resize: none;
}

.content-wrapper {
  background: #F7F7F7;
}

.black {
  color: #000 !important;
}

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

.mb0 {
  margin-bottom: 0px !important;
}

.flex {
  display: flex;
}

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

.align-items-center {
  align-items: center;
}

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

.panel {
  padding: 20px 28px 28px;
  background: #fff;
  border: 1px solid #E3E3E3;
  border-radius: 6px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.panel + .panel {
  margin-top: 28px;
}

.panel-main {
  margin-top: 26px;
}

.txt-01 {
  margin: 12px 0 0;
  font-size: 12px;
}

.main {
  padding: 0 20px 42px;
}

.inner {
  max-width: 1090px;
  margin: 0 auto;
}

.panel-main-start .box-01 {
  min-height: 207px;
}

.link-01 {
  display: block;
  width: 100%;
  height: 100%;
  color: #000;
  text-decoration: none;
}

.link-01:visited {
  color: #000;
  text-decoration: none;
}

.link-01:hover {
  color: #000;
  text-decoration: none;
}

.danger {
  margin: 0;
  color: #C03221;
  font-size: 13px;
}

.required {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px 1px;
  background: #C03221;
  border-radius: 4px;
  color: #fff;
  line-height: normal;
}

.news-date {
  margin-top: 5px;
  font-size: 10px;
}

.box-logo-mini {
  position: relative;
  font-size: 12px;
  font-weight: bold;
}

.box-logo-mini::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 6px;
  display: block;
  background: url(../img/anetsuchi_design.png) no-repeat;
  background-size: contain;
  width: 44px;
  height: 28px;
}

.box-logo-mini .link-01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.box-logo-mini .box-main {
  text-align: center;
}

.content-wrapper {
  padding: 0 20px;
}

.icon-none {
  padding: 0 !important;
}

.icon-none::before,
.icon-none::after {
  display: none !important;
}

.icon-letter {
  position: relative;
  padding-left: 38px;
}

.icon-letter::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  bottom: 0;
  left: 4px;
  width: 23px;
  height: 23px;
  background: url(../img/icon_letter.png) no-repeat;
  background-size: contain;
}

.icon-dupli {
  width: 14.5px;
  height: 18px;
}

.icon-login {
  width: 28px;
  height: 28px;
}

.note-editable {
  min-height: 316px;
}

.form-check-input {
  display: none;
}

.form-check-label {
  position: relative;
  padding-left: 24px;
  color: #8A92A6;
  font-size: 16px;
  cursor: pointer;
}

.form-check-label::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 1px solid #12703A;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: text-top;
}

.form-check-input:checked + .form-check-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 8px;
  height: 8px;
  margin: auto;
  background-color: #12703A;
  border-radius: 50%;
}

.pagination {
  justify-content: center;
  margin-top: 40px;
}

.page-link {
  padding: 8px 14px;
  border-color: #DEE2E6;
  color: #48C279;
}

.page-item.disabled .page-link {
  background: #E3E3E3;
  border-color: #DEE2E6;
  color: #CBCBCB;
}

.page-item.active .page-link {
  background-color: #48C279;
  border-color: #DEE2E6;
}

.page-item:first-child .page-link {
  padding: 8px 24px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.page-item:last-child .page-link {
  padding: 8px 24px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.page-link:hover {
  z-index: 2;
  color: #48C279;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link:focus {
  box-shadow: none;
}

/* ------------------------------------------------------------------------------
     title
-------------------------------------------------------------------------------*/
.ttl-01 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.ttl-02 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.ttl-03 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.box-ttl-01 {
  padding: 14px 18px;
  border-bottom: 1px solid #E3E3E3;
  font-size: 12px;
  font-weight: bold;
}

.box-ttl-02 {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

/* ------------------------------------------------------------------------------
     btn
-------------------------------------------------------------------------------*/
.btn-primary:not(:disabled):not(.disabled):active {
  background: #48C279;
  border-color: #48C279;
}

.btn-primary {
  width: 191px;
  margin: 0 auto;
  padding: 6px;
  background: #48C279;
  border-color: #48C279;
  box-shadow: 0px 2px 4px rgba(58, 87, 232, 0.3);
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
}

.btn-primary:hover {
  background: #48C279;
  border-color: #48C279;
  opacity: 0.7;
}

.btn-primary:focus, .btn-primary:active {
  background: #48C279;
  border-color: #48C279;
}

.btn-secondary {
  background: #fff;
  border: 1px solid #6C757D;
  border-radius: 4px;
  color: #6C757D;
  font-weight: bold;
}

.btn-danger {
  background: #C2484F;
  color: #fff;
  font-weight: 600;
}

.btn-item-register {
  display: block;
  width: 80%;
  padding: 12px;
  background: #CFCFCF;
  border-radius: 30px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.btn-item-register:hover {
  background: #48C279;
  color: #fff;
}

.btn-upload {
  display: inline-block;
  padding: 4px 10px;
  background: #fff;
  border-radius: 4px;
  color: #6C757D;
  font-size: 12px;
  text-align: center;
}

.btn-add {
  display: block;
  width: 100%;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #48C279;
  border-radius: 4px;
  color: #48C279;
  font-size: 16px;
  font-weight: 600;
}

.btn-add:hover {
  background: #48C279;
  color: #fff;
  transition: 0.7s;
}

.btn-01 {
  display: block;
  width: 244px;
  margin: 0 auto 22px;
  padding: 8px 2px;
  background: #8A92A6;
  border-color: #8A92A6;
  box-shadow: 0px 2px 4px rgba(58, 87, 232, 0.3);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.btn-02 {
  max-width: 408px;
  display: block;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid #E3E3E3;
  border-radius: 6px;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.btn-02:visited {
  color: #000;
}

.btn-02:hover {
  color: #000;
  opacity: 0.7;
}

.btn-03 {
  width: 256px;
  padding: 10px;
  background: #6C757D;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0px 2px 4px rgba(108, 117, 125, 0.3);
}

.btn-03:visited {
  color: #fff;
}

.btn-03:hover {
  color: #fff;
  opacity: 0.7;
}

.btn-04 {
  display: block;
  width: 100%;
  padding: 8px 20px;
  color: #48C279;
  border: 1px solid #48C279;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.btn-04:hover {
  background: #48C279;
  color: #fff;
}

/* ------------------------------------------------------------------------------
     box
-------------------------------------------------------------------------------*/
.box-01 {
  border: 1px solid #E3E3E3;
  border-radius: 6px;
}

.box-01 a {
  color: #212529;
}

.column-03 .box-01 {
  width: 32.5%;
}

.column-03 .box-01 + .box-01 {
  margin-left: 1.16%;
}

.column-03 .box-01:nth-child(3n+1) {
  margin-left: 0;
}

.column-03 .box-01:nth-child(n+4) {
  margin-top: 28px;
}

.box-main {
  padding: 14px 18px 26px;
}

.box-ttl-wrap {
  padding: 14px 18px;
  border-top: 1px solid #E3E3E3;
}

/* ------------------------------------------------------------------------------
     header
-------------------------------------------------------------------------------*/
.navbar {
  max-width: 1090px;
  margin: 0 auto;
  padding: 14px 8px;
}

.brand-link {
  padding: 0;
}

.navbar-nav {
  align-items: flex-end;
}

.nav-item p {
  margin: 6px 0 0;
  font-size: 12px;
}

.nav-user {
  max-width: 48px;
}

.navbar-light .navbar-nav .nav-item .nav-link {
  position: relative;
  display: block;
  color: #212427;
  font-size: 12px;
}

.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: #48C279;
}

.nav-item {
  width: 70px;
}

.nav-item-long {
  width: 92px;
}

.nav-item + .nav-item {
  margin-left: 20px;
}

.content-header {
  max-width: 1090px;
  margin: 0 auto;
  padding: 30px 0 20px;
}

.content-header .btn-primary {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.content-header .btn-03 {
  width: 191px;
  margin-bottom: 0;
  padding: 6px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.content-header .btn-03 + .btn-primary {
  margin-left: 16px;
}

.content-header .ttl-02 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0;
}

.content-header .row {
  align-items: center;
}

.nav-link::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  margin: auto;
}

.navbar-light .navbar-nav .nav-item .nav-link.nav-home,
.navbar-light .navbar-nav .nav-item .nav-link.nav-design,
.navbar-light .navbar-nav .nav-item .nav-link.nav-page,
.navbar-light .navbar-nav .nav-item .nav-link.nav-information,
.navbar-light .navbar-nav .nav-item .nav-link.nav-product,
.navbar-light .navbar-nav .nav-item .nav-link.nav-setting {
  padding-top: 28px;
}

.nav-home::before {
  width: 28px;
  height: 27px;
  background: url(../img/icon_home.png) no-repeat, url(../img/icon_home_on.png) no-repeat;
  background-size: cover,0 0;
}

.nav-home:hover::before {
  background-size: 0 0,cover;
}

.nav-design::before {
  width: 23px;
  height: 23px;
  background: url(../img/icon_palette.png) no-repeat, url(../img/icon_palette_on.png) no-repeat;
  background-size: cover,0 0;
}

.nav-design:hover::before {
  background-size: 0 0,cover;
}

.nav-page::before {
  width: 29px;
  height: 27px;
  background: url(../img/icon_page.png) no-repeat, url(../img/icon_page_on.png) no-repeat;
  background-size: cover,0 0;
}

.nav-page:hover::before {
  background-size: 0 0,cover;
}

.nav-information::before {
  width: 25px;
  height: 22px;
  background: url(../img/icon_mail.png) no-repeat, url(../img/icon_mail_on.png) no-repeat;
  background-size: cover,0 0;
}

.nav-information:hover::before {
  background-size: 0 0,cover;
}

.nav-product::before {
  width: 24px;
  height: 24px;
  background: url(../img/icon_bag.png) no-repeat, url(../img/icon_bag_on.png) no-repeat;
  background-size: cover,0 0;
}

.nav-product:hover::before {
  background-size: 0 0,cover;
}

.nav-setting::before {
  width: 24px;
  height: 24px;
  background: url(../img/icon_settings.png) no-repeat, url(../img/icon_settings_on.png) no-repeat;
  background-size: cover,0 0;
}

.nav-setting:hover::before {
  background-size: 0 0,cover;
}

.nav-order::before {
  width: 24px;
  height: 24px;
  background: url(../img/icon_shopping_cart.png) no-repeat, url(../img/icon_shopping_cart_on.png) no-repeat;
  background-size: cover,0 0;
}

.nav-order:hover::before {
  background-size: 0 0,cover;
}

.nav-admin_information::before {
  width: 24px;
  height: 24px;
  background: url(../img/letter.png) no-repeat, url(../img/letter_on.png) no-repeat;
  background-size: cover,0 0;
}

.nav-admin_information:hover::before {
  background-size: 0 0,cover;
}

/* ------------------------------------------------------------------------------
    fixed-btn
-------------------------------------------------------------------------------*/
.fixed-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  background: #fff;
  border-top: 1px solid #E3E3E3;
}

.fixed-btn .btn-primary {
  width: 304px;
  margin: 0 0 0 56px;
  padding: 10px;
  font-size: 16px;
}

/* ------------------------------------------------------------------------------
     login
-------------------------------------------------------------------------------*/
.login-page {
  min-height: 100%;
  background: #F7F7F7;
  background: linear-gradient(180deg, #F7F7F7 0%, #F7F7F7 76%, #838483 76%, #838483 100%);
}

.login-box {
  width: 509px;
  height: 100%;
}

.login-logo {
  margin: 120px 0 22px;
}

.login-box-msg {
  color: #000;
  font-size: 16px;
  font-weight: 600;
  padding: 0 20px 26px;
}

.input-group {
  margin-bottom: 20px;
}

.row {
  margin: 0;
}

.card {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

.card__reset {
  width: 100%;
  margin-bottom: 25px;
  font-size: 14px;
  text-align: right;
}

.card__forgot-password {
  color: #18BD5A;
  text-decoration: underline;
}

.login-card-body {
  padding: 36px 34px;
  border-radius: 20px;
}

.card-body .input-group .input-group-text {
  padding: 8px 24px;
  border: 1px solid #eee;
  border-radius: 4px 0 0 4px;
  font-size: 28px;
}

.card-body .input-group .form-control {
  height: 46px;
  border-top: 1px solid #eee;
  border-left: 0;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-radius: 0 4px 4px 0;
}

.card-body .input-group .form-control:-ms-input-placeholder {
  color: #C4C4C4;
  font-size: 0.875rem;
}

.card-body .input-group .form-control::placeholder {
  color: #C4C4C4;
  font-size: 0.875rem;
}

.register-txt {
  margin: 20px 0 14px;
  color: #000;
  font-size: 12px;
  text-align: center;
}

.login-card-body .input-group-text,
.card-forgot .input-group-text {
  height: 46px;
}

.login-card-body .input-group .form-control,
.card-forgot .input-group .form-control {
  margin: 0;
}

/* ------------------------------------------------------------------------------
     forgot-password
-------------------------------------------------------------------------------*/
.forgot .content-wrapper {
  background: #F7F7F7;
  background: linear-gradient(180deg, #F7F7F7 0%, #F7F7F7 76%, #838483 76%, #838483 100%);
}

.card-forgot {
  max-width: 509px;
  margin: 0 auto;
  padding: 40px 34px 56px;
}

.card-forgot .card-body {
  padding: 0;
}

.card-head {
  text-align: center;
}

.login-box-txt {
  margin-bottom: 36px;
  font-size: 12px;
}

.input-group-forgot {
  margin-bottom: 40px;
}

.input-group-text {
  background: #fff;
}

.forgot-btn {
  width: 191px;
}

/* ------------------------------------------------------------------------------
     home
-------------------------------------------------------------------------------*/
/* お問い合わせ */
.contact-box {
  padding: 40px 20px 20px;
}

.contact-txt {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.contact-btn {
  margin-top: 36px;
}

.home-menu .panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  height: 160px;
  padding: 0;
}

.home-menu .nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-flow: column;
  height: 160px;
  padding: 0;
  padding: 40px 20px;
  background: none;
}

.home-menu h5 {
  margin: 10px 0 0;
}

/* ------------------------------------------------------------------------------
    page
-------------------------------------------------------------------------------*/
.panel-page {
  padding-bottom: 100px;
}

.page-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-list-head-inner {
  display: flex;
}

.page-list table th {
  color: #C4C4C4;
  font-size: 12px;
  font-weight: normal;
}

.page-list table th:nth-child(n+3),
.page-list table td:nth-child(n+3) {
  text-align: center;
}

.page-list table td {
  color: #212427;
  font-size: 16px;
  font-weight: normal;
}

.page-list .jsgrid-cell:nth-child(n+2) {
  font-size: 13px;
}

.page-list .jsgrid-cell:nth-child(n+3) {
  color: #8A92A6;
}

.page-list .nav-link {
  color: #8A92A6;
}

.page-list .jsgrid-grid-header {
  overflow: hidden;
}

.page-list .jsgrid-grid-body {
  overflow: hidden;
}

.page-list .jsgrid-button.jsgrid-edit-button {
  width: 18px;
  height: 18px;
  padding: 0;
  background: url(../img/icon_edit_off.png) no-repeat center;
  background-size: contain;
}

.page-list .jsgrid-button.jsgrid-edit-button:hover {
  background: url(../img/icon_edit_on.png) no-repeat center;
  background-size: contain;
}

.page-list .jsgrid-button.jsgrid-delete-button {
  width: 18px;
  height: 18px;
  background: url(../img/icon_delete_mouseoff.png) no-repeat center;
  background-size: contain;
}

.page-list .jsgrid-button.jsgrid-delete-button:hover {
  background: url(../img/icon_delete_mouseon.png) no-repeat center;
  background-size: contain;
}

.page-list .jsgrid-selected-row > .jsgrid-cell {
  background: none;
  border-color: #ECECEC;
  color: #48C279;
}

.page-list .jsgrid-selected-row {
  color: #48C279;
}

.page-list .nav-link.icon-copy {
  display: block;
  width: 100%;
  height: 16px;
  background: url(../img/icon_dupli_off.png) no-repeat center;
  background-size: contain;
}

.page-list .nav-link.icon-copy:hover {
  background: url(../img/icon_dupli_on.png) no-repeat center;
  background-size: contain;
}

/* チェックボックス */
.check-box {
  width: 40px;
  height: 40px;
  border: 1px solid #C4C4C4;
  border-radius: 5px;
  background: url(../img/icon_check.png) no-repeat 12px center;
  background-size: 19.5px 20px;
  cursor: pointer;
}

/* 検索 */
.page-list-search {
  position: relative;
}

.page-search-input {
  width: 282px;
  padding: 8px 32px 8px 16px;
  background: #FAFAFA;
  border: 1px solid #E3E3E3;
  border-radius: 30px;
  font-size: 14px;
}

.check-box + .page-search-input {
  margin-left: 15px;
}

.page-search-input:-ms-input-placeholder {
  color: #C1C1C1;
}

.page-search-input::placeholder {
  color: #C1C1C1;
}

.page-search-input:focus {
  outline: none;
}

.page-search-btn {
  display: inline-block;
  width: 14px;
  height: 40px;
  margin-left: -36px;
  background: url(../img/icon_search.png) no-repeat center;
  background-size: contain;
  border: 0;
  vertical-align: bottom;
}

.page-search-btn::before {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 14px;
  height: 17px;
  background: url(../img/icon_search.png) no-repeat;
  background-size: contain;
}

/* ソート */
.page-list-select {
  padding: 8px;
  font-size: 12px;
  border: none;
}

.page-list-select:focus {
  outline: none;
}

/* ------------------------------------------------------------------------------
    page-input
-------------------------------------------------------------------------------*/
.content-wrapper > .content {
  max-width: 1090px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.content-wrapper > .content .panel {
  padding: 30px 30px 24px;
}

.content-wrapper > .content .panel.page-input-main {
  padding-bottom: 100px;
}

.content-wrapper > .content .panel-page-input-side {
  padding: 18px 20px 26px;
}

.content-wrapper > .content .card-body {
  padding: 0;
}

.content-wrapper > .content .ttl-panel {
  padding: 20px 30px 24px;
}

.icon-tag {
  position: relative;
  padding-left: 38px;
}

.icon-tag::before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  bottom: 0;
  left: 4px;
  width: 22px;
  height: 22px;
  background: url(../img/icon_tag.png) no-repeat;
  background-size: contain;
}

label[for="title"],
label[for="subtitle"],
label[for="contents"] {
  position: relative;
  padding-left: 38px;
}

label[for="title"]::before,
label[for="subtitle"]::before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  bottom: 0;
  left: 4px;
  width: 22px;
  height: 22px;
  background: url(../img/icon_tag.png) no-repeat;
  background-size: contain;
}

label[for="contents"]::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  bottom: 0;
  left: 4px;
  width: 23px;
  height: 23px;
  background: url(../img/icon_letter.png) no-repeat;
  background-size: contain;
}

.icon-img {
  position: relative;
  padding-left: 38px;
}

.icon-img::before,
label[for="contents"].icon-img::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 22px;
  height: 22px;
  background: url(../img/icon_image.png) no-repeat;
  background-size: contain;
}

.form-control {
  margin-top: 14px;
  border: 1px solid #E3E3E3;
}

input[name="title"],
textarea[name="subtitle"],
input[name="contents_title"],
.bathroom-input .main-column input[type="text"] {
  background: #FAFAFA;
}

.form-group {
  margin: 0;
}

.panel .note-editor {
  margin-top: 20px;
  border-radius: 8px;
}

.page-input .row {
  align-items: flex-start;
}

.panel-page-input-side {
  font-size: 13px;
  word-break: break-all;
}

.panel-page-input-side .card-header {
  padding: 0 0 16px;
  border-bottom: 1px solid #ECECEC;
}

.panel-page-input-side .card-header .card-title {
  color: #212427;
  font-size: 16px;
  font-weight: 600;
}

.panel-page-input-side .form-group {
  margin-top: 16px;
}

.panel-page-input-side .form-group + .form-group {
  margin-top: 24px;
}

.panel-page-input-side .form-group label {
  margin: 0;
}

.panel-page-input-side label {
  color: #69727A;
  font-size: 12px;
  font-weight: 400 !important;
}

.panel-page-input-side .form-control {
  margin-top: 8px;
  font-size: 13px;
}

#roomservice,
#staff,
#products {
  margin-top: 18px;
}

.item .roomservice-upload-form,
.item .staff-upload-form {
  position: relative;
  display: block;
  height: auto;
  min-height: 284px;
  padding: 0;
  border: 1px dashed #69727A;
  border-radius: 8px 8px 0px 0px;
}

.roomservice-upload-form::before,
.staff-upload-form::before,
.products-upload-form::before {
  content: "";
  display: block;
  position: absolute;
  top: -36px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 2px;
  height: 26px;
  margin: auto;
  background: #CBCBCB;
  border-radius: 2px;
}

.roomservice-upload-form::after,
.staff-upload-form::after,
.products-upload-form::after {
  content: "";
  display: block;
  position: absolute;
  top: -36px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 26px;
  height: 2px;
  margin: auto;
  background: #CBCBCB;
  border-radius: 2px;
}

#roomservice .item .form-btn,
#staff .item .form-btn,
#products .item .form-btn {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  margin: auto;
}

.roomservice-img,
.product-img {
  width: 100%;
  height: 132px;
}

.staff-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.panel .roomservice-add-form,
.panel .staff-add-form,
.panel .product-add-form {
  position: relative;
  height: auto;
  min-height: 341px;
  padding: 0;
  background: #FFFFFF;
  border: none;
  border-radius: 8px 8px 0px 0px;
  box-shadow: 0px 10px 30px rgba(17, 38, 146, 0.05);
  overflow: visible;
}

.roomservice-add-form img,
.staff-add-form img,
.product-add-form img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 100%;
  border-radius: 8px 8px 0px 0px;
}

.staff-add-form img {
  border-radius: 50%;
}

.roomservice-add-form .name,
.staff-add-form .name,
.product-add-form .name {
  font-size: 18px;
  font-weight: normal;
}

.roomservice-add-form .description,
.staff-add-form .description,
.product-add-form .description {
  margin-top: 4px;
  color: #8A92A6;
  font-size: 16px;
  font-weight: 400;
  word-break: break-all;
  white-space: normal;
}

.staff-add-form .description {
  text-align: left;
}

.roomservice-add-form .price,
.staff-add-form .price,
.product-add-form .price {
  margin-top: 16px;
  color: #232D42;
  font-size: 18px;
  font-weight: 500;
}

.roomservice-add-form .name {
  padding: 24px 24px 0;
  text-align: left;
}

.roomservice-add-form .description {
  padding: 0 24px;
  text-align: left;
}

.roomservice-add-form .price {
  padding: 0 24px;
  text-align: left;
}

.item-txt-area {
  padding: 24px 24px 40px;
  text-align: left;
}

.staff-add-form .item-txt-area {
  padding: 20px 24px 40px;
  text-align: center;
}

.tax-txt {
  font-size: 12px;
}

.roomservice-btn,
.staff-btn,
.product-btn {
  position: absolute;
  bottom: -60px;
  right: -80px;
  width: 132px;
  height: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  opacity: 0;
  z-index: 1;
}

.roomservice-btn.is-show,
.staff-btn.is-show,
.product-btn.is-show {
  height: auto;
  opacity: 1;
  transition: 0.5s;
}

.roomservice-btn .btn,
.staff-btn .btn,
.product-btn .btn {
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  border-radius: 0;
  color: #444;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  box-shadow: none;
}

.roomservice-btn .btn:hover,
.staff-btn .btn:hover,
.product-btn .btn:hover {
  background: #eee;
}

.roomservice-btn .btn:focus,
.staff-btn .btn:focus,
.product-btn .btn:focus {
  background: #eee;
}

.roomservice-btn .btn:active,
.staff-btn .btn:active,
.product-btn .btn:active {
  background: #eee !important;
}

.roomservice-menu,
.staff-menu,
.product-menu {
  position: absolute;
  bottom: 6px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  width: 25px;
  height: 25px;
  cursor: pointer;
  z-index: 1;
}

.menu-circle {
  display: block;
  width: 6px;
  height: 6px;
  background: #333;
  border-radius: 50%;
}

#products .item:nth-child(n+4),
.products-modal .item:nth-child(n+4) {
  margin-top: 10px;
}

.page-input-main .nav-tabs {
  margin: 0 -30px;
  padding: 0 30px;
}

.nav-tabs .nav-link {
  border: none;
  color: #212427;
  font-size: 16px;
}

.nav-tabs .nav-link.active {
  background: none;
  border-bottom: 2px solid #079440;
  color: #212427;
}

.nav-tabs .nav-item {
  width: auto;
}

.bathroom-input .form-group + .form-group {
  margin-top: 36px;
}

.bathroom-input .form-check {
  margin-top: 14px;
  padding: 0;
}

.bathroom-input .upload-form {
  display: block;
  margin-top: 14px;
  width: 89.51%;
  max-width: 100%;
  padding: 0;
  margin-top: 14px;
  background: #868E96;
  border-radius: 0;
  color: #DEE2E6;
  font-weight: 400 !important;
}

.bathroom-input .upload-area {
  padding: 50px 60px 76px;
}

.bathroom-input .upload-area p {
  margin: 0;
}

.bathroom-input .btn-upload {
  margin-top: 40px;
  padding: 8px 24px;
  font-size: 14px;
}

.bathroom-input .datetimepicker-input {
  margin-top: 0;
}

.bathroom-input .timepicker {
  padding: 0;
}

.bathroom-input .input-group {
  margin: 14px 0 0;
}

.bathroom-input .input-group + div {
  margin: 14px 8px 0;
}

/* ------------------------------------------------------------------------------
    page_products_store
-------------------------------------------------------------------------------*/
.products-upload-form {
  position: relative;
  display: block;
  height: auto;
  min-height: 284px;
  padding: 0;
  border: 1px dashed #69727A;
  border-radius: 8px 8px 0px 0px;
  cursor: pointer;
}

.jsgrid-grid-header {
  background: none;
}

.jsgrid-alt-row > .jsgrid-cell {
  background: none;
}

.jsgrid-header-row > .jsgrid-header-cell {
  background: none;
}

.jsgrid-filter-row > .jsgrid-cell, .jsgrid-header-row > .jsgrid-header-cell, .jsgrid-insert-row > .jsgrid-cell {
  border: none;
  border-bottom: 1px solid #ECECEC;
}

.jsgrid-edit-row > .jsgrid-cell, .jsgrid-filter-row > .jsgrid-cell, .jsgrid-grid-body, .jsgrid-grid-header, .jsgrid-header-row > .jsgrid-header-cell, .jsgrid-insert-row > .jsgrid-cell {
  border: none;
  border-bottom: 1px solid #ECECEC;
}

.jsgrid-cell {
  border: none;
  border-bottom: 1px solid #ECECEC;
}

.jsgrid-grid-body {
  border: none;
}

.jsgrid-grid-header {
  border: none;
}

.jsgrid-cell, .jsgrid-header-cell {
  padding: 16px 20px;
}

.jsgrid-pager-container {
  margin-top: 80px;
  text-align: center;
}

.jsgrid-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-radius: 8px;
  font-size: 0;
}

.jsgrid-pager a {
  color: #48C279;
}

.jsgrid-pager-page,
.jsgrid-pager-nav-button {
  display: inline-block;
}

.jsgrid-pager > span {
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
}

.jsgrid-pager > span,
.jsgrid-pager > span a {
  font-size: 16px;
}

.jsgrid-pager > span + span {
  border-right: 1px solid #DEE2E6;
}

.jsgrid-pager-current-page {
  background: #48C279;
  color: #fff;
  font-weight: normal;
}

.jsgrid-pager-nav-inactive-button {
  background: #E3E3E3;
}

.jsgrid-pager-nav-inactive-button > a {
  color: #CBCBCB;
}

.jsgrid-pager > span:first-child {
  padding: 3px 24px;
  border-left: 1px solid #DEE2E6;
  border-radius: 8px 0 0 8px;
}

.jsgrid-pager > span:last-child {
  padding: 3px 24px;
  border-radius: 0 8px 8px 0;
}

/* ------------------------------------------------------------------------------
     information
-------------------------------------------------------------------------------*/
.information-dashed {
  padding: 62px 20px 110px;
  border: 1px dashed #C4C4C4;
  border-radius: 10px;
  color: #CFCFCF;
  font-weight: 600;
}

.content-wrapper > .content .panel.panel-information {
  padding: 42px 46px;
}

.content-wrapper > .content.information-input .panel {
  padding-bottom: 32px;
}

.information-input .form-group + .form-group {
  margin-top: 30px;
}

.information-input .upload-form {
  width: 100%;
  padding: 0;
  max-width: 494px;
  margin-top: 14px;
  background: #868E96;
  border-radius: 0;
  color: #DEE2E6;
  font-weight: 400 !important;
}

.information-input .upload-area {
  padding: 50px 60px 125px;
}

.information-input .btn-upload {
  margin-top: 40px;
  padding: 8px 24px;
  font-size: 14px;
}

.panel-information .page-list table th:nth-child(n+2) {
  text-align: center;
}

.panel-information .page-list .jsgrid-cell:nth-child(n+2) {
  color: #212427;
  text-align: center;
}

.panel-information .page-list .jsgrid-cell:nth-child(3) {
  color: #212427;
}

.panel-information .page-list .jsgrid-cell:nth-child(3):hover {
  color: #48C279;
}

.link-dialog .form-check-label::before {
  display: none;
}

.link-dialog .form-check-input {
  display: block;
}

/* ------------------------------------------------------------------------------
    ryokan_product
-------------------------------------------------------------------------------*/
.product-container {
  padding: 0;
  background: #FFFFFF;
  border-radius: 8px 8px 0 0;
  box-shadow: 0px 10px 30px rgba(17, 38, 146, 0.05);
}

.picture-conteiner,
.picture-frame {
  border-radius: 8px 8px 0 0;
}

.product-txt-area {
  padding: 24px;
}

.product-txt-area .header-text {
  color: #232D42;
}

.product-txt-area .detail-text {
  margin-top: 6px;
}

#products > li {
  padding: 8px;
}

#products .badge {
  padding: 4px;
  margin-right: 4px;
  top: -2px;
  position: relative;
}

.ryokan-product-input .form-group + .form-group {
  margin-top: 30px;
}

.ryokan-product-input .input-text {
  margin-top: 14px;
  background: #FAFAFA;
  border-radius: 0.25rem;
}

.ryokan-product-input .main_images {
  margin-top: 14px;
}

.ryokan-product-input .form-control {
  background: #FAFAFA;
  border-radius: 0.25rem;
}

/* ------------------------------------------------------------------------------
    setting
-------------------------------------------------------------------------------*/
.explanation {
  margin: 14px 0 0;
  padding: 14px 22px 10px;
  background: #CDEBEC;
  background: rgba(205, 235, 236, 0.5);
  border-radius: 5px;
  color: #000;
  font-size: 14px;
}

.explanation a {
  text-decoration: underline;
}

.setting-input .btn-03 {
  display: inline-block;
  width: auto;
  padding: 8px 24px;
}

.setting-input .enabled_checkbox {
  color: #8A92A6;
  font-weight: 400 !important;
}

.copy_area .form-control {
  margin: 0;
}

.copy_area .form-control:disabled,
.copy_area .form-control[readonly] {
  background: #F7F7F7;
  border: 1px solid #eee;
}

.content-wrapper > .content .panel.setting-input-main {
  padding-bottom: 55px;
}

.setting-input-main .btn-primary {
  display: block;
  width: 304px;
}

.copy_area span {
  position: relative;
}

.copy_area span .copybtn {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  background: url(../img/icon_link.png) no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  margin: auto;
}

.copy_area input {
  font-weight: 600;
}

.content-wrapper > .content .panel.panel-setting-input-side {
  padding: 0;
  font-weight: 600;
}

.content-wrapper > .content .panel.panel-setting-input-side .nav-link {
  margin: 0;
  border-radius: 0;
  color: #555;
}

.content-wrapper > .content .panel.panel-setting-input-side .nav-link.active {
  background: #eee;
  border: none;
  color: #555;
}

.content-wrapper > .content .panel.panel-setting-input-side .nav-link + .nav-link {
  border: 1px solid #eee;
}

/* チェックボックス */
.setting-input .enabled_checkbox > input[type="checkbox"] {
  display: none;
}

.setting-input .enabled_checkbox span {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px 40px;
  position: relative;
  width: auto;
}

.setting-input .enabled_checkbox span::before {
  background: #48C279;
  border: 1px solid #48C279;
  border-radius: 2px;
  content: '';
  display: block;
  left: 5px;
  margin-top: -13px;
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
}

.setting-input .enabled_checkbox span::after {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  content: '';
  display: block;
  height: 12px;
  left: 16px;
  margin-top: -8px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 5px;
}

.enabled_checkbox input[type="checkbox"]:checked + span::after {
  opacity: 1;
}

.enabled_checkbox input[type="checkbox"]:disabled + span::before {
  border: 1px solid #E3E3E3;
  background: #fff;
}

.enabled_checkbox input[type="checkbox"]:disabled + span::after {
  border-right: 2px solid #E3E3E3;
  border-bottom: 2px solid #E3E3E3;
}

.copy_alert {
  position: absolute;
  top: 40px;
  right: 0;
  width: 357px;
  height: 60px;
  padding: 16px 16px 16px 48px;
  background: #D1ECDD;
  border: 2px solid #1AA053;
  border-radius: 4px;
  color: #12703A;
  text-align: left;
}

.copy_alert:before {
  display: none;
}

.copy_alert p {
  position: relative;
}

.copy_alert p::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: 0;
  left: -30px;
  right: auto;
  width: 24px;
  height: 24px;
  margin: auto;
  background: url(../img/icon_check_02.png) no-repeat;
  background-size: contain;
  border: none;
}

/* ------------------------------------------------------------------------------
    facility
-------------------------------------------------------------------------------*/
.content-wrapper > .content .panel.setting-facility-main {
  padding: 36px 50px 30px;
}

.setting-facility-main .form-control {
  margin-top: 0;
}

.setting-facility-main .btn-primary {
  margin-top: 40px;
}

.setting-facility-main .p-postal-code {
  width: 50%;
}

.postal-code {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.postal-code .btn-03 {
  width: 40%;
  padding: 8px 24px;
}

/* ------------------------------------------------------------------------------
    design
-------------------------------------------------------------------------------*/
.design-header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 10px 70px 10px 28px;
  background: #fff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.design-header + .content-wrapper {
  padding-top: 64px;
}

.design-header-close {
  display: flex;
  align-items: center;
}

.btn-close {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  padding-left: 30px;
  vertical-align: middle;
  color: #B3B3B3;
  font-weight: 600;
}

.btn-close:hover {
  color: #B3B3B3;
  font-weight: 600;
}

.btn-close::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 2px;
  margin: auto;
  background: #B3B3B3;
  transform: rotate(45deg);
}

.btn-close::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 2px;
  margin: auto;
  background: #B3B3B3;
  transform: rotate(135deg);
}

.design-header-right {
  display: flex;
  align-items: center;
  height: 100%;
}

.design-header-toggle {
  display: flex;
  align-items: center;
  height: 100%;
  border: 1px solid #000;
  border-radius: 4px;
}

.toggle-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 100%;
  background: #979897;
}

.toggle-preview.active {
  background: #fff;
}

.toggle-preview.pc {
  border-radius: 4px 0  0 4px;
}

.toggle-preview.sp {
  border-left: 1px solid #000;
  border-radius: 0 4px 4px 0;
}

.design-header-save {
  height: 100%;
  margin-left: 50px;
}

.design-header-save > .btn {
  height: 100%;
}

.design-menu {
  width: 100px;
}

.design-menu .nav {
  padding: 16px 0;
  background: #fff;
  text-align: center;
}

.design-menu .nav .nav-link {
  border: none;
  margin: 0;
  padding: 10px;
  border-radius: 0;
  cursor: pointer;
}

.design-menu .nav .nav-link.active {
  border-left: 2px solid #48C279;
  color: #48C279;
  cursor: default;
}

.design-menu-txt {
  display: block;
  margin-top: 5px;
  color: #69727A;
  font-size: 12px;
  font-weight: 600;
}

.active .design-menu-txt {
  color: #48C279;
}

.design-menu-img-on {
  display: none;
}

.active .design-menu-img-off {
  display: none;
}

.active .design-menu-img-on {
  display: inline;
}

.design-menu-setting {
  width: 240px;
  background: #fff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.design-menu-setting-header {
  padding: 25px 20px;
}

.design-menu-setting-ttl {
  position: relative;
  padding-left: 34px;
  font-size: 12px;
  font-weight: 600;
}

.design-menu-setting-ttl::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  margin: auto;
  background: url(../img/menu_img_off.png) no-repeat;
  background-size: contain;
}

.design-menu-setting-item {
  padding: 15px 10px 25px;
  border-top: 1px solid #E3E3E3;
}

.design-menu-setting-item:nth-child(9) + .design-menu-setting-add-btn {
  display: none;
}

.design-menu-setting-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.design-menu-setting-item-ttl {
  margin: 0;
  color: #A9A9A9;
  font-size: 12px;
  font-weight: 600;
}

.design-menu-setting-btn-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.design-menu-setting-delete-btn {
  width: 19px;
  height: 19px;
  margin-right: 12px;
  background: url(../img/icon_delete.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.design-menu-setting-btn {
  width: 17px;
  height: 17px;
  background: url(../img/menu.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.design-menu-setting-item-select {
  margin-top: 20px;
}

.design-menu-setting-item-select .form-control {
  padding: 10px 20px 10px 8px;
  color: #A4A4A4;
  font-size: 12px;
}

.design-menu-setting-item-select .form-control.is-selected {
  color: #3F3F3F;
}

.design-menu-setting-add-btn {
  padding: 22px 10px 60px;
  border-top: 1px solid #E3E3E3;
  text-align: center;
}

.design-logo-setting {
  width: 240px;
  background: #fff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.design-logo-setting-ttl {
  position: relative;
  padding-left: 34px;
  font-size: 12px;
  font-weight: 600;
}

.design-logo-setting-ttl::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  margin: auto;
  background: url(../img/menu_logo_off.png) no-repeat;
  background-size: contain;
}

.design-logo-setting .upload-form {
  width: 100%;
  max-width: 494px;
  margin-top: 0;
  padding: 30px 15px 16px;
  background: #868E96;
  border-radius: 0;
  color: #DEE2E6;
  font-weight: 400 !important;
}

.design-logo-setting .upload-form .upload-area {
  font-size: 12px;
}

.design-logo-setting .upload-form .upload-area .btn-upload {
  margin-top: 12px;
  padding: 8px 24px;
}

.design-color-setting {
  width: 240px;
  background: #fff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.design-color-setting-ttl {
  position: relative;
  padding-left: 34px;
  font-size: 12px;
  font-weight: 600;
}

.design-color-setting-ttl::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  margin: auto;
  background: url(../img/menu_palette_off.png) no-repeat;
  background-size: contain;
}

.chk-color_mode {
  display: none;
}

.color_mode {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px;
  margin-bottom: 14px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.chk-color_mode:checked + .color_mode {
  border: 2px solid #FF0101;
}

.color_mode.standard {
  background: #3F4D5C;
}

.color_mode.gray {
  background: #9C9C9C;
}

.design-weather-setting {
  width: 240px;
  background: #fff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.design-weather-setting-ttl {
  position: relative;
  padding-left: 34px;
  font-size: 12px;
  font-weight: 600;
}

.design-weather-setting-ttl::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  margin: auto;
  background: url(../img/menu_weather_off.png) no-repeat;
  background-size: contain;
}

.design-weather-setting-label {
  color: #A9A9A9;
  font-size: 12px;
}

.design-weather-setting-input {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #A9A9A9;
  border-radius: 4px;
  padding: 8px 13px;
  font-size: 12px;
}

.design-weather-setting-input:-ms-input-placeholder {
  color: #C4C4C4;
}

.design-weather-setting-input::placeholder {
  color: #C4C4C4;
}

.design-wrapper {
  padding: 0;
}

.design-wrapper .content-header {
  display: none;
}

.design-section {
  min-height: calc(100vh - 120px);
}

.design-main {
  width: calc(100% - 340px);
  padding: 36px 0 36px 35px;
}

.design-wrapper + .main-footer {
  position: relative;
  height: 56px;
}

/* ------------------------------------------------------------------------------
    account
-------------------------------------------------------------------------------*/
.account-add .card-header {
  padding: 0 0 20px;
}

.account-add .form-group {
  margin-top: 24px;
}

.setting-input-main .form-control:first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------------------------
    product
-------------------------------------------------------------------------------*/
.product-input .form-group + .form-group {
  margin-top: 30px;
}

.product-input .option-group .form-control {
  margin-top: 0;
}

.product-input .page-input-main .card-header {
  margin-bottom: 30px;
}

.product-input .option-node + .option-node {
  margin-top: 14px;
}

.product-input .option-node-add {
  margin-top: 14px;
}

.product-input #addOption {
  margin-top: 10px;
}

.product-input .form-check {
  margin-top: 10px;
}

.product-input .upload-form {
  width: 100%;
  padding: 0;
  max-width: 494px;
  margin-top: 14px;
  background: #868E96;
  border-radius: 0;
  color: #DEE2E6;
  font-weight: 400 !important;
}

.product-input .upload-area {
  padding: 50px 60px 125px;
}

.product-input .btn-upload {
  margin-top: 40px;
  padding: 8px 24px;
  font-size: 14px;
}

/* ------------------------------------------------------------------------------
    order
-------------------------------------------------------------------------------*/
.order-input .table {
  margin-top: 30px;
}

.order-input .table th,
.order-input .table td {
  border-top: none;
  border-bottom: 1px solid #dee2e6;
}

/* ------------------------------------------------------------------------------
    ryokan_product_manage
-------------------------------------------------------------------------------*/
.page-list.admin-ryokan-list table th, .page-list.admin-ryokan-list table td {
  width: 28% !important;
}

.page-list.admin-ryokan-list table th:nth-child(1), .page-list.admin-ryokan-list table td:nth-child(1),
.page-list.admin-ryokan-list table th:nth-child(4), .page-list.admin-ryokan-list table td:nth-child(4) {
  width: 18% !important;
}

.page-list.admin-ryokan-list table th:nth-child(5), .page-list.admin-ryokan-list table td:nth-child(5) {
  width: 8% !important;
}

.page-list.admin-ryokan-list table th:nth-child(n+3), .page-list.admin-ryokan-list table td:nth-child(n+3) {
  text-align: left;
}

.page-list.admin-ryokan-list table td:nth-child(5) {
  text-align: right;
}

.form-control.check {
  width: 20px;
  height: 20px;
  margin: auto;
}

.page-list .form-control {
  margin-top: 0;
}

/* モーダル */
#modal-content {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  width: 600px !important;
  height: 80% !important;
  max-height: 650px;
  margin: auto !important;
  padding: 32px 16px 32px 36px !important;
  background: #fff;
  border: none !important;
  border-radius: 10px;
  overflow: hidden !important;
}

#modal_open {
  max-height: 100%;
  overflow: auto;
  padding-right: 20px;
}

#modal-content .container {
  padding: 0;
}

#modal-content .container .label {
  margin: 0;
  border: 1px solid #CFCFCF;
  border-radius: 10px;
}

#modal-content .container .label:hover {
  background: none;
}

#modal-content .container input[type="radio"] + label {
  color: #000;
  font-weight: normal;
}

#modal-content .container input[type="radio"]:checked + label {
  background: none;
  border: 2px solid #8C7F0B;
  color: #000;
}

.template-modal {
  max-height: 450px;
  margin-top: 36px;
  padding: 0;
  overflow: auto;
}

.template-modal .col {
  margin-bottom: 20px;
  padding: 0 7.5px;
}

.template-modal .col p {
  margin-bottom: 10px;
}

.modal-footer-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0 0;
}

.modal-footer-btn .btn-secondary {
  width: 186px;
}

.modal-footer-btn .btn-primary {
  width: 318px;
  margin: 0;
}

.modal {
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
}

.modal .modal-content {
  padding: 48px 42px 36px;
}

.modal-dialog {
  max-width: 600px;
  margin: 167px auto;
}

.modal-header {
  padding: 0;
  justify-content: center;
  border-bottom: none;
}

#modal_header {
  margin-bottom: 26px;
}

.modal-body {
  padding: 0;
}

.modal-body > p {
  margin: 16px 0 0;
}

.modal-footer {
  margin-top: 98px;
  padding: 0;
  border-top: none;
}

.form-group-flex {
  display: flex;
}

.form-group-flex > label:first-child {
  width: 128px;
}

.form-group-flex > label + * {
  width: calc(100% - 150px);
  margin-left: 22px;
}

#modal-content .form-group + .form-group {
  margin-top: 34px;
}

#modal-content .form-control {
  margin-top: 0;
}

.upload-form-wrap {
  display: flex;
  justify-content: space-between;
}

.upload-form {
  width: 58.38%;
  border: none;
  background: #EAEBEC;
  border-radius: 5px;
}

.upload-txt {
  position: relative;
  margin: 0 0 8px;
  padding-top: 46px;
  color: #6C757D;
  font-size: 12px;
  font-weight: 400;
}

.upload-txt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  background: url(../img/icon_image2.png) no-repeat;
  background-size: contain;
  width: 43px;
  height: 43px;
}

.upload-dt {
  width: 39.09%;
  margin-left: 10px;
  font-size: 12px;
  line-height: 1.75;
}

.upload-dt > dt {
  font-weight: bold;
}

#modal_price,
#modal_role {
  width: 208px;
}

.price-unit {
  display: flex;
  align-items: flex-end;
  margin-left: 8px;
}

.staff-upload-form-wrap .upload-form {
  width: 148px;
  height: 148px;
  border-radius: 50%;
}

.modal-btn {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

.modal-btn .btn:first-child {
  width: 186px;
}

.modal-btn .btn + .btn {
  width: 318px;
  margin: 0;
}

.modal .btn-secondary {
  width: 186px;
  margin: 0;
  padding: 8px;
}

.modal .btn-secondary:visited,
.modal .btn-secondary:hover,
.modal .btn-secondary:active,
.modal .btn-secondary:focus {
  background: #fff;
  color: #6C757D;
}

.modal .btn-danger,
.modal .btn-primary {
  width: 318px;
  margin: 0;
  padding: 8px;
  box-shadow: 0px 2px 4px rgba(58, 87, 232, 0.3);
}

.modal .btn-danger:visited,
.modal .btn-danger:hover,
.modal .btn-danger:active,
.modal .btn-danger:focus {
  background: #C2484F;
}

#toast-container > .toast-success {
  position: relative;
  max-width: 750px;
  padding: 16px 16px 16px 48px;
  background-image: none;
  background: #D1ECDD !important;
  border: 2px solid #1AA053 !important;
  border-radius: 4px;
  color: #12703A;
  font-size: 16px;
  opacity: 1;
}

#toast-container .toast-message::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  background: url(../img/icon_check_02.png) no-repeat !important;
  background-size: contain !important;
  width: 20px;
  height: 20px;
}

#modal-content.products-modal {
  width: 100% !important;
  height: auto !important;
  max-width: 868px;
  max-height: 80% !important;
}

.products-modal .row {
  max-height: 687px;
  overflow: auto;
}

.products-modal .modal-footer-btn {
  justify-content: center;
}