@charset "UTF-8";
/* HOSAKA part start */
input, select {
  border-radius: 4px; }

.top-img img {
  width: 100%; }

#ui-datepicker-div {
  margin-top: -100px; }

input, select, textarea {
  font-size: 14px;
  padding: 6px; }

.pc-fixed .logo-box img {
  margin-top: 5px;
  width: 312px; }

.com-h3-v01, .com-h3-v02 {
  padding-bottom: 6px;
  border-bottom: 2px solid #4065a2 !important; }

label {
  font-weight: normal;
  font-size: 13px;
  margin-right: 0.4rem; }

.form-checkbox label {
  padding: 0px 3px 0px 30px; }

.icn_order:before, .icn_model:before, .icn_order_b:before, .icn_model_b:before {
  content: '　';
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 0.8rem;
  background-size: 100%;
  font-size: 1.5rem; }

.icn_order:before {
  background-image: url("/assets/img/icn_order.svg"); }

.icn_model:before {
  background-image: url("/assets/img/icn_car.svg"); }

.icn_order_b:before {
  background-image: url("/assets/img/icn_order_b.svg"); }

.icn_model_b:before {
  background-image: url("/assets/img/icn_car_b.svg"); }

.btn-white {
  color: #4065a2 !important;
  background: #fff;
  border: 1px solid #4065a2; }

.btn-white:hover {
  background: #daf1fb !important; }

.btn-search, .btn-clear {
  width: 250px;
  font-weight: bold;
  margin: 0 20px; }

.search-box {
  width: 100%;
  min-width: 1364px; }

.date-box {
  width: 15% !important; }

.input-box {
  width: 39% !important; }

.item-box {
  width: 42% !important; }

.dtl-setbox {
  width: 1250px;
  margin: 0 auto; }

.dtl-date-box {
  width: 320px;
  float: left;
  margin-right: 30px; }

.dtl-status-box {
  width: 900px;
  float: left; }

.ympicker {
  /*  font-family: FontAwesome;
    content: "\f178";*/
  content: "Aaaaa";
  width: 90px; }

.input-li:after, .check-box:after, .page-li:after, .dtl-tbl-set:after {
  content: "";
  display: block;
  clear: both; }

.check-box li {
  float: left;
  width: 25%;
  margin-bottom: 10px; }

.input-li input {
  width: 40%; }

label {
  letter-spacing: 0; }

.ord-select {
  max-width: 135px; }

.src-box {
  box-sizing: border-box;
  padding: 20px; }

.res-tit {
  position: relative; }
  .res-tit button {
    position: absolute;
    top: -10px;
    right: 10px; }

.res-tbl {
  width: 100%;
  /* min-width: 1800px; */
  letter-spacing: 0;
  font-size: 12px !important;
  }
  .res-tbl th, .res-tbl td {
    padding: 2px 2px; }

.tbl-box {
  overflow-x: auto; }

.page-li li {
  float: right;
  margin-left: 3px;
  margin-right: 3px; }
  .page-li li a {
    display: inline-block;
    font-size: 14px;
    text-align: center;
    padding: 4px 8px; }
.page-li .page-on {
  pointer-events: none;
  background: #438bc5; }
  .page-li .page-on a {
    color: #fff; }
.page-li select {
  font-size: 12px;
  padding: 2px; }

table th, table td {
  padding: 8px 8px;
  vertical-align: middle; }

table td {
  background: #fff; }

.dtl-tbl-set {
  margin-bottom: 30px; }
  .dtl-tbl-set table {
    width: 49.0%;
    float: left;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 5px;
    letter-spacing: 0; }
    .dtl-tbl-set table th {
      width: 50%; }
    .dtl-tbl-set table td {
      vertical-align: middle; }

.del-state {
  position: relative;
  width: 330px;
  height: 130px;
  background-repeat: no-repeat;
  background-position-x: -20px; }
  .del-state p {
    position: absolute;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: bold;
    color: #ccc;
    margin-left:180px;
    top: 50px; }
    .del-state p span {
      font-size: 14px; }

#state01 {
  background-image: url("/assets/img/state01-off.png"); }

#state02 {
  background-image: url("/assets/img/state02-off.png"); }

#state03 {
  background-image: url("/assets/img/state03-off.png"); }

#state04 {
  background-image: url("/assets/img/state04-off.png"); }

.state01-on {
  background-image: url("/assets/img/state01-on.png") !important; }
  .state01-on p {
    color: #438bc5; }

.state02-on {
  background-image: url("/assets/img/state02-on.png") !important; }
  .state02-on p {
    color: #438bc5; }

.state03-on {
  background-image: url("/assets/img/state03-on.png") !important; }
  .state03-on p {
    color: #438bc5; }

.state04-on {
  background-image: url("/assets/img/state04-on.png") !important; }
  .state04-on p {
    color: #438bc5; }

.com-btn-v01 {
  font-size: 18px; }

.com-btn-v01:hover {
  background: #daf1fb;
  color: #4065a2; }

.top-wrap {
  width: 80%;
  margin: 0 auto; }

.sk-fading-circle {
  width: 100px;
  /* サイズ - 可変 */
  height: 100px;
  /* サイズ - 可変 */
  margin: 0 auto;
  /* 上下マージン - 可変 */
  position: relative; }

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; }

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  /* ベースの色 - 可変 */
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }

.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg); }

.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg); }

.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); }

.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg); }

.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg); }

.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }

.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg); }

.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg); }

.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg); }

.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg); }

.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg); }

.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s; }

.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s; }

.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s; }

.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s; }

.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s; }

.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s; }

.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s; }

.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s; }

.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s; }

.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s; }

.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s; }

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% {
    opacity: 0; }
  40% {
    opacity: 1; } }
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% {
    opacity: 0; }
  40% {
    opacity: 1; } }
/* HOSAKA part end */
/*# sourceMappingURL=comp-style.css.map */
/*-------------------------------------------------------------*/
/* hosoi start */
/*--------------- login --------------*/
.wrap {
  height: 350px;
  overflow-y: scroll;
  border: 1px solid #ccc; }

.wrap li {
  margin-bottom: 0; }

.wrap a {
  display: block;
  border-bottom: 1px solid #d4d4d4;
  text-decoration: none;
  padding: 10px 10px; }

.wrap li:last-of-type a {
  border-bottom: 0; }

.wrap a:hover {
  background-color: #daf1fb; }

.wrap span:nth-of-type(1) {
  font-weight: bold;
  color: #333;
  padding: 0 20px; }

.wrap span:nth-of-type(2) {
  display: inline-block;
  width: 125px;
  margin-right: 10px;
  text-align: center;
  color: #fff; }

.wrap span:nth-of-type(3) {
  font-weight: bold;
  color: #69B0E6; }

.account-box,
.com-footer {
  margin-top: 0; }

.account-wrap {
  height: calc(100vh - 50px);
  padding-top: 10px;
  background-color: #4569a5; }

.inner {
  background-color: #fff;
  width: 400px;
  margin: 150px auto;
  padding: 50px; }

.logo {
  text-align: center; }

.btn-area {
  text-align: center; }

.err-area {
  text-align: center;
  background-color: #fff3f3;
  color: red;
  padding: 10px 20px; }

.err-area .ttl {
  font-weight: bold;
  font-size: 120%; }

buton:hover {
  background-color: #daf1fb !important; }

/*--------------- login --------------------*/
.pc-head .logo-box {
  top: 50%;
  transform: translateY(-50%);
  width: 312px; }

.pc-head .menu-box {
  top: 50%;
  transform: translateY(-50%);
  right: 400px; }

.menu-li li:before,
.menu-li li:first-of-type:after {
  content: ''; }

.account-box {
  position: absolute;
  right: 130px;
  top: 50%;
  bottom: 0;
  transform: translateY(-50%);
  text-align: right; }

.pc-fixed .account-box {
  top: 45%; }

@media screen and (max-width: 1210px) {
  .pc-head .logo-box {
    position: absolute;
    display: none; } }
.com-footer {
  padding: 10px 35px; }

/******* top css *******/
.icn-Production, .icn-Transportation, .icn-Shipping, .icn-Other, .icn-Other1, .icn-Other2 {
  display: inline-block;
  width: 125px;
  margin-right: 10px;
  text-align: center;
  color: #fff;
  padding:0 10px; }

.icn-Shipping {
  background-color: #4569a5; }

.icn-Production {
  background-color: #68B46F; }

.icn-Transportation {
  background-color: #E2951B; }

.icn-Other {
  background-color: #FF7C80; }

.icn-Other1 {
  background-color: #9933FF; }

.icn-Other2 {
  background-color: #808080; }
  
.info-box {
  border: 1px solid #ccc;
  padding: 30px;
  border-radius: 4px; }

.date-tit {
  font-weight: bold;
  font-size: 14px; }

.info-tit {
  font-size: 24px; }

/* hosoi end */

/* 20230314 added */

 #r01{width: 40px}
    #r02{width: 60px}
    #r03{width: 40px}
    #r04{width: 65px}
    #r05,#r06{width: 100px}
    #r07{width: 80px}
    #r08{width: 85px}
    #r09{width: 80px}
    #r10{width: 100px}
    #r11{width: 60px}
    #r12,#r13,#r14,#r15{width: 30px}
    #r16,#r17{width: 120px}
    #r18{width: 90px}

/*# sourceMappingURL=comp-style.css.map */


/* 20241030 added */

#order_number {
    margin-top: 47px;
}

#order_production {
    margin-top: 42px;
}

.com-bread-li ul {
    width: 100%;
    margin-bottom: 20px;
}


.txt-left {
    text-align: right !important;
}


