/*===============================================
変数の定義
===============================================*/
:root {
  --base-color: #fff;
  --base-font-color: #c1e4f8;
  --link-color: #ffa600f3;
}

.text-pink {
  color: #f763ad;
}

/*===============================================
ベース
===============================================*/
/* ゆっくり遷移する */
html {
  scroll-behavior: smooth;
}

main {
  margin-top: 0px;

}

/*===============================================
背景
===============================================*/
body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, #392c61, #151127 50%, #000);
  background-attachment: fixed;
}


/*===============================================
header
===============================================*/
.header-bg {
  backdrop-filter: blur(10px);
  /*すりガラス用プロパティ*/
  -webkit-backdrop-filter: blur(10px);
  /*ベンダープレフィックス*/
  background: rgba(0, 0, 0, 0.25);
  padding-bottom: 7px;
}

.sidbar-dg {
  backdrop-filter: blur(10px);
  /*すりガラス用プロパティ*/
  -webkit-backdrop-filter: blur(10px);
  /*ベンダープレフィックス*/
  background: rgba(0, 0, 0, 0.25);
}

.dropdown-menu {
  backdrop-filter: blur(3px);
  /*すりガラス用プロパティ*/
  -webkit-backdrop-filter: blur(3px);
  /*ベンダープレフィックス*/
  background: rgba(17, 24, 39, 1);
  box-shadow: 0px 3px 5px #050505;
}

.navbar-nav>.user-menu>.dropdown-menu>.user-footer {
  display: flex;
}

ul .dropdown-menu-lg {
  min-width: 120px;
  max-width: 180px;
  padding: 0;
}

select option {
  background: rgba(17, 24, 39, 1);
  font-size: 17px;
}

.dropdown-menu-lg {
  width: 120px;
}

/*===============================================
input form
===============================================*/
.card {
  backdrop-filter: blur(10px);
  /*すりガラス用プロパティ*/
  -webkit-backdrop-filter: blur(10px);
  /*ベンダープレフィックス*/
  background-color: hsla(0, 0%, 0%, 0) !important;
  box-shadow: 0px 3px 5px #050505;
  border-radius: 0;
  border: none;
}

.card-body {
  backdrop-filter: blur(10px);
  /*すりガラス用プロパティ*/
  -webkit-backdrop-filter: blur(10px);
  /*ベンダープレフィックス*/
  background: rgba(0, 0, 0, 0.16);
  border-radius: 0;
}

.form-control {
  background-color: rgba(0, 0, 0, 0.3);
  color: #c5c5c5;
  border: 1px solid #364758;
}

.form-control:focus {
  background-color: rgba(0, 0, 0, 0.5);
}
 .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
 /**入力フォーム内のラベル**/
  background-color: rgba(0, 0, 0, 0.0);
 }
/*===============================================
 フェードイン
 ===============================================*/
    .fadein.is-animated {
        animation: fadeIn 1.9s ease-in-out 1 forwards;
    }
 
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
 
        100% {
            opacity: 1;
        }
      }

/*===============================================
ログイン
===============================================*/
.login-logo {
  display: flex;
  justify-content: center;
  align-items: center;
 font-family: sans-serif;
 font-size: 20px;

  &img {
    width: auto;
    height: 45px;
    opacity: 0.6;
  }
}

.login-card-body {
  
    backdrop-filter: blur(10px);
    /*すりガラス用プロパティ*/
    -webkit-backdrop-filter: blur(10px);
    /*ベンダープレフィックス*/
    background: rgba(0, 0, 0, 0.2);
  }


/*===============================================
404 401 500　エラー：PC
===============================================*/
#error_message {
  height: 100vh;
  display: flex;
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#error_message h1 {
  color: #fff;
  text-shadow: 1px 3px 3px #082337, 1px 3px 3px #082337, 1px 3px 3px #082337;
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 5.5vh;
}
#error_message p {
  color: #fff;
  font-size: 20px;
  text-shadow: 1px 3px 3px #082337, 1px 3px 3px #082337, 1px 3px 3px #082337;
}

#error_message small {
  color: #fff;
  text-shadow: 1px 3px 3px #082337, 1px 3px 3px #082337, 1px 3px 3px #082337;
}

/*===============================================
共通　/** スクロールバー デザインカスタマイズ
===============================================*/
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #a2a2a2;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #575757;
  border-radius: 10px;
}


/*===============================================
SP専用
===============================================*/
@media only screen and (max-width: 767px) {
  body,
  html {
    overflow-x: hidden;
  }

  :root {
    --lte-sidebar-width: 100vw;
  }

  .app-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
  }

  .sp-sidebar-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    text-decoration: none;
    z-index: 1050;
  }

  .sp-sidebar-close .sp-close-char {
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
  }

  .app-sidebar .sidebar-brand {
    padding-right: 56px;
  }

  .app-sidebar .sidebar-wrapper {
    width: 100%;
  }

  .app-header .navbar-nav .nav-link {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
  }

  .app-header .navbar-nav .nav-link .bi.bi-list {
    font-size: 2rem;
    line-height: 1;
  }

  .sidebar-brand .brand-text.fw-light {
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-weight: 700 !important;
  }

  .sidebar-menu .nav-item>.nav-link {
    margin-bottom: .2rem;
    font-size: 18px;
    font-weight: bold;
}

  .app-sidebar .sidebar-wrapper form.d-inline-flex {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 15px;
  }

  .app-sidebar .sidebar-wrapper form.d-inline-flex .form-control {
    flex: 1 1 auto;
    min-height: 46px;
    font-size: 16px;
    padding: 10px 12px;
  }

  .app-sidebar .sidebar-wrapper form.d-inline-flex .btn-sidebar {
    min-width: 46px;
    min-height: 46px;
    margin-left: 0;
    flex: 0 0 auto;
  }

  body main .container-fluid {
    --bs-gutter-x: 0rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .app-content-header {
    padding: 0.1rem 0 !important;
    margin: 0 !important;
  }

  .row {
    --bs-gutter-x: 0rem !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .card-body {
    padding: 0.75rem !important;
  }

  #title {
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
  }

main #title {
    font-size: 20px;
    padding-bottom: 8px;
    margin: 0em 0 1em;
    color: #fff;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 2px;
    border-bottom: 1px solid #fff;
  }

  main #editor_box {
    overflow-x: hidden;
    max-width: 100%;
    padding: 0;
  }

  main #editor_box pre {
    font-size: 12px;
    padding: 10px;
    overflow-x: auto;
    max-width: calc(100vw - 24px);
  }

  main #editor_box table {
    font-size: 12px;
    overflow-x: auto;
  }

  .col-md-9,
  .col-md-3,
  .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #serect_sidebar {
    display: none !important;
  }

  .d-flex {
    flex-wrap: wrap !important;
  }

  #service-record-index .thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: center;
    display: block;
  }
      .login-box, .register-box {
        width: 100%;
        margin-top: 0.5rem;
    }
  .login-card-body{
    width: 100%;
     backdrop-filter: blur(10px);
    /*すりガラス用プロパティ*/
    -webkit-backdrop-filter: blur(10px);
    /*ベンダープレフィックス*/
    background: none;
    box-shadow: 5px 5px 10px #050505;
  }
}