:root {
  --bgc-7 : #b30000;
  --bgc-8 : #ffb2b2;
  --bgc-9 : rgba(255, 178, 178, 0.6);
}
.ts-bgc-7{background-color: var(--bgc-7)!important; color:#fff}
.ts-bgc-8{background-color: var(--bgc-8)!important; color:#fff}
.ts-c-red{color:red}

.width40p { width: 40%!important; display: inline-block!important; }
.width50p { width: 50%!important; display: inline-block!important; }
.width60p { width: 60%!important; display: inline-block!important; }
.maxw100 { width: 100%; max-width: 100px; }
.maxw200 { width: 100%; max-width: 200px; }

.word-point { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.translateY-3 { transform: translateY(-3px) }

.btn:focus { outline: 0; box-shadow: 0 0 0 0.25rem var(--bgc-9)!important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--bgc-8)!important;
  box-shadow: 0 0 0 0.25rem var(--bgc-9)!important;
}
.form-check-input:checked {
  background-color: var(--bgc-7)!important;
  border-color: var(--bgc-7)!important;
}

body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
.container.wrapper { padding-top: 90px; }

/* page-title -------------------------------------------------------------- */
.page-title { font-size: 20px; font-weight: bold; margin: 0; }
.page-title img { height: 1.5em; transform: translateY(-0.2em); margin-right: 10px; }
.page-title small { font-weight: normal; font-size: 13px; color: red; }
.page-title small .star-red { font-size: 24px; font-weight: bold; 
  display: inline-block; transform: translateY(8px); }
.star-red { font-size: 24px; font-weight: bold; color: red; 
  display: inline-block; transform: translateY(5px); }
.page-title .info { display: block; padding: 0 .5em; white-space: nowrap; }

.btn-user-add { padding-left: 40px; transition: .5s;
  background: url(../../images/consoleweb/user_add_w.png) no-repeat 8px center; }
.btn-user-add:hover { background-color: var(--bgc-8)!important;
  background-image: url(../../images/consoleweb/user_add.png);
  box-shadow: 0 0 0 0.25rem var(--bgc-9)!important; }

.btn-store-add { padding-left: 50px; transition: .5s;
  background: url(../../images/consoleweb/store_add_w.png) no-repeat 8px center; }
.btn-store-add:hover { background-color: var(--bgc-8)!important;
  background-image: url(../../images/consoleweb/store_add.png);
  box-shadow: 0 0 0 0.25rem var(--bgc-9)!important; }

.btn-notice-add { padding-left: 40px; transition: .5s;
  background: url(../../images/consoleweb/add_w.png) no-repeat 8px center; 
  background-size: auto 70%; }
.btn-notice-add:hover { background-color: var(--bgc-8)!important;
  background-image: url(../../images/consoleweb/add.png);
  box-shadow: 0 0 0 0.25rem var(--bgc-9)!important; }

@media(min-width:768px){
  body.w04-03 .page-title .info, body.w05-01 .page-title .info { display: inline-block; }
}
@media(min-width:992px){
  body.w04 .page-title .info { display: inline-block; }
}

/* table, form ----------------------------------------------------------------- */
th, td { white-space: nowrap; vertical-align: middle;  }
.table-list-area th, .table-list-area td { text-align: center; }
.table-first-row { font-weight: bold; border-left: 1px solid #ccc; }
.table-list-area th:nth-child(5), .table-list-area td:nth-child(5) { border-left: 1px solid #ccc; }

.form-table { width: 100%; }
.form-table td { white-space: nowrap; }
body.w03 .form-table1 td:nth-of-type(1) { width: 4rem; }
body.w03 .form-table2 td:nth-of-type(1) { width: 6rem; text-align: right; }
body.w03 .form-table2 td:nth-of-type(2) { text-align: left!important; }
body.w04 .form-table  td:nth-of-type(1) { width: 7rem; text-align: right; }
body.w04 .form-table2 td label { width: 100%; display: block; }
body.w06 .form-table { vertical-align: middle; }
body.w06 .form-table  td:nth-of-type(1) { width: 7rem; text-align: right; }

.form-add .col-12:not(:first-of-type) { border-top: 1px solid #ccc; }
.form-add .form-check-input, .form-modify .form-check-input { 
  width: 1.5rem; height: 1.5rem; transform: translateY(-2px); margin: 3px 3px 3px 5px; }

::placeholder { color: #bbb!important; }

@media(min-width:768px){
  .form-add .col-12:not(:first-of-type) { border: none; }
}
@media (min-width: 1200px){
  .container.wrapper { padding-top: 120px; }
}

/* nav ================================================================================== */
.navbar { padding: 0; box-shadow: 0 3px 3px #ccc; }
.navbar .logo-area img { width: 150px; height: auto; }
.navbar-collapse { box-shadow: 0 0 6px #ccc; padding: 0; }
.navbar-light .navbar-nav .nav-link {
  color: #000000; font-weight: bold; padding: 0.4rem; width: 140px; text-align: center;
  background: url(../../images/consoleweb/nav_line_1.png) no-repeat center bottom;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: #ffb2b2;
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
  color: #b30000; background-image: url(../../images/consoleweb/nav_line_2.png);
}
.navbar-light .navbar-nav .nav-link.user-btn { background-image: none; }

@media (min-width: 350px){
  .navbar-collapse { padding: 1rem; }
  .navbar-light .navbar-nav .nav-link { padding: 0.7rem; }
}
@media (min-width: 1200px){
  .navbar { box-shadow: none; }
  .navbar-collapse { box-shadow: none; padding: 0; }
  .navbar .logo-area img { width: 180px; }
  .navbar-light .navbar-nav .nav-link { padding: 1.5rem 0.8rem; width: auto; }
}

/* index, w01 ============================================================================ */
body.index .container-fluid { 
  min-height: 100vh; background: linear-gradient(#f8f9fa, #f8f9fa 70%, #ffb2b2);
}

/* w01 login-form ======================================================================== */
.login-logo { width: 80%; max-width: 400px; margin-bottom: 30px; }
.login-form { width: 90%; max-width: 500px; margin-bottom: 50px; }
.login-form h2 { padding-bottom: 1rem; text-align: center; }