/*

Font weight

*/
.font100 {
  font-weight: 100;
}
.font200 {
  font-weight: 200;
}
.font300 {
  font-weight: 300;
}
.font400 {
  font-weight: 400;
}
.font500 {
  font-weight: 500;
}
.font600 {
  font-weight: 600;
}
.font700 {
  font-weight: 700;
}
.font800 {
  font-weight: 800;
}
.font900 {
  font-weight: 900;
}

/*

h

*/
h1 {
  font-size: 40px;
  font-weight: 100;
  color: #000;
}
h2 {
  font-size: 30px;
  font-weight: 200;
  color: #ccc;
}
h3 {
  font-size: 20px;
  font-weight: 300;
  color: #000;
}

/*

Link

*/
a,
a:visited {
  color: #3498db;
  text-decoration: none;
}
a:hover {
  color: #3498db;
  text-decoration: underline;
}

/*

list

*/
li {
  list-style-type: decimal;
}

/*

hr

*/
hr {
  border: 0;
  border-top: 1px solid #ccc;
  display: block;
  margin: 4em auto;
  width: 70%;
}

/*

Layout

*/

body,
html {
  font-size: 100%;
  font-weight: 200;
  color: #333;
  line-height: 2rem;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  width: 100%;
  margin: 0;
  background: #e9ebee;
}

#container {
  background: #e9ebee;
  position: relative;
  width: 100%;
  height: auto !important;
  height: 100%;
  min-height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#header {
  font-size: 14px;
  width: 100%;
  min-width: 900px;
  padding: 0 30px;
  border-bottom: 1px solid #ddd;

  position: fixed;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
  height: 60px;
  line-height: 35px;
}

#sidebar {
  background: #4e5665;
  height: 100%;
  position: fixed;
  top: 0;
  transition: all 100ms ease-in;
  width: 230px;
  z-index: 2;
}

#main {
  /*  width:900px;
  margin:0 auto;

  clear:both;
  background:#fff;
  */

  padding: 0;
  background: #e9ebee;
  margin-left: 230px;
}

#contents {
  padding: 20px;
  margin: auto;
  padding: 100px 30px 100px 30px;
  width: 900px;
}

#contents-inner {
  padding: 30px;
  background: #fff;
  /*border-radius: 10px;*/
  /*margin-bottom:10px;*/
}

#contents-footer {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0;
  border-top: 1px solid #d7d8db;
  bottom: 0;
  left: 230px;
  padding: 14px;
  position: fixed;
  right: 0;
  z-index: 2;
}

/*

Header

*/

#header .nav {
  font-size: 14px;
  text-align: left;
  margin-top: 10px;
}

/*#header .rightnav {
  width: 400px;
  font-size:14px;
  float: right;
  text-align:left;
  margin-top: 10px;
}
*/

#header li {
  display: inline-block;
  margin-right: 20px;
}

#header a,
#header a:visited {
  color: #666;
  text-decoration: none;
}
#header a:hover {
  color: #666;
  text-decoration: underline;
}

/*

main

*/
#main h1 {
  line-height: 2em;
  padding-bottom: 10px;
}

/*

to top

*/
#pageTop {
  position: fixed;
  bottom: 3%;
  right: 50px;
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  background: url("/assets/images/to_top.png") no-repeat left top;
  background-size: 43px 43px;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/*

error

*/
/*p.error{
  font-size:90%;
  font-weight: 300;
  margin-bottom: 20px;
  width:298px;
  padding: 0 .55rem;
  color: #911;
  background-color: #fcdede;
  border-color: #d2b2b2;
  border-radius: 3px;
  border-left: 3px solid red;
}*/

.error_mark {
  background: #fa3e3e url(/assets/images/error_checkmark.png) no-repeat 13px
    13px;
  background-position: left 13px top 13px;
  background-size: 18px 18px;
  border: 1px solid #dddfe2;
  border-radius: 4px;
  color: #4b4f56;
  font: 14px/18px "helvetica neue", helvetica, arial, "lucida grande",
    sans-serif;
  line-height: 20px;
  padding-left: 44px;
}
.error_msg {
  background: #fff;
  border-radius: 0 2px 2px 0;
  padding: 14px;
}
.error_mark_form {
  width: 550px;
  line-height: 10px;
  background-position: left 13px top 10px;
  background-size: 16px 16px;
}
/*

flash

*/
p.flash {
  /*  color: #fff;
  font-size:90%;
  font-weight: 300;
  background: #2ab27b;
  margin-bottom: 20px;
  width:298px;
  padding: 0 .55rem;
  border-left: 3px solid green;
  border-radius: 3px;*/

  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px 0 0 3px;
  color: #fff;
  font-size: 14px;
  padding: 8px 12px 8px 8px;
  position: fixed;
  right: 0;
  top: 100px;
  transition: opacity 1s ease-out;
  z-index: 100;
}

/*

warning flash

*/
p.warning-flash {
  /*  color: #fff;
  font-size:90%;
  font-weight: 300;
  background: #2ab27b;
  margin-bottom: 20px;
  width:298px;
  padding: 0 .55rem;
  border-left: 3px solid green;
  border-radius: 3px;*/

  background-color: #f7ac19;
  border-radius: 3px 0 0 3px;
  color: #fff;
  font-size: 14px;
  padding: 8px 12px 8px 8px;
  position: fixed;
  right: 0;
  top: 100px;
  transition: opacity 1s ease-out;
  z-index: 100;
}

/*

sidebar

*/
#sidebar li {
  list-style: none;
  font-size: 14px;
  line-height: 1.8;
}
#sidebar li a {
  padding: 10px 0 10px 20px;
  display: block;
  text-decoration: none;
  color: #ddd;
}

#sidebar li a:hover {
  padding: 10px 0 10px 20px;
  display: block;
  text-decoration: none;
  color: #fff;
  background-color: #575f70;
}

.patners-list {
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 10px;
  background: #fff;
  width: 250px;
  height: 110px;
  float: left;
  display: inline-block;
  padding: 5px 0px 5px 10px;
  margin: 10px 10px 10px 0px;
  color: #999;
}

.patners-list a,
.patners-list a:visited {
  text-decoration: none;
  color: #333;
}

.patners-list a:hover {
  text-decoration: underline;
}

.ordertype-list {
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 10px;
  background: #fff;
  width: 250px;
  float: left;
  display: inline-block;
  padding: 5px 0px 5px 10px;
  margin: 10px 10px 10px 0px;
  color: #999;
}

.ordertype-list a,
.ordertype-list a:visited {
  text-decoration: none;
  color: #333;
}

.ordertype-list a:hover {
  text-decoration: underline;
}

.active-mark {
  background-color: #42b72a;
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  line-height: 10px;
  padding: 0;
  width: 10px;
  margin-left: 6px;
  position: relative;
  top: -2px;
}

.deactive-mark {
  background-color: #aaa;
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  line-height: 10px;
  padding: 0;
  width: 10px;
  margin-left: 6px;
  position: relative;
  top: -2px;
}

.new-mark {
  animation: Flash1 1s infinite;
}

/* アニメーション */
@keyframes Flash1 {
  50% {
    opacity: 0;
  }
}

.confirm-modal {
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 6px 6px 6px 6px;
  width: 350px;
  height: 60px;
  color: #fff;
  background-color: #4e5665;
  padding: 8px 5px 40px 15px;
  z-index: 99999;
  left: 39%;
  top: 20%;
  position: cursol;
}

#dialog_back {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 9999;
}

.itemlabel {
  color: #4b4f56;
  display: block;
  font-family: "helvetica neue", helvetica, arial, "lucida grande",
    "hiragino kaku gothic pro", meiryo, "ms pgothic", sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 4px;
}

.order-list table {
  border-collapse: collapse;
  width: 800px;
}

.order-list th {
  color: #7e8e9c;
}

.order-list th {
  padding-left: 10px;
}

.order-list tr.header {
  border-bottom: 1px solid #eee;
  height: 60px;
}

.order-list tr.detail {
  border-bottom: 1px solid #eee;
  height: 60px;
}

/* .order-list tr.detail:hover {
  color: #3ba425;
} */

.order-list td {
  padding-left: 10px;
}

.order-show {
  margin-bottom: 30px;
}

.order-show-title {
  background: #f6f7f9;
  color: #7e8e9c;
  margin: 0;
  padding: 5px 0px 5px 10px;
}

.order-show table {
  border-collapse: collapse;
  width: 800px;
  border: 0;
}

.order-show th {
  color: #7e8e9c;
}

.order-show th {
  padding-left: 10px;
}

.order-show tr.detail {
  height: 70px;
}

.order-show tr.detail:hover {
}

.order-show td {
  padding-left: 10px;
}

.order-show .itemlabel {
  color: #4b4f56;
  display: block;
  font-family: "helvetica neue", helvetica, arial, "lucida grande",
    "hiragino kaku gothic pro", meiryo, "ms pgothic", sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 4px;
}

.order-show .whitebox {
  background-color: #fff;
  border: 1px solid #dddfe2;
  border-radius: 2px;
  color: #4b4f56;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  overflow: auto;
  padding: 0 4px 0 8px;
}

.order-show .graybox {
  background-color: #e9ebee;
  border: 1px solid #dddfe2;
  border-radius: 2px;
  color: #4b4f56;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  overflow: auto;
  padding: 0 4px 0 8px;
}

.order-show .noborderbox {
  background-color: #fff;
  border: 0px solid #dddfe2;
  border-radius: 2px;
  color: #4b4f56;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  overflow: auto;
  padding: 0 4px 0 8px;
}

.order-show .wide-whitebox {
  background-color: #fff;
  border: 1px solid #dddfe2;
  border-radius: 2px;
  color: #4b4f56;
  font-size: 14px;
  /*    height: 30px;
    line-height: 30px;
    overflow: auto;*/
  padding: 0 4px 0 8px;
}

.go-upload-mark {
  background-color: red;
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  line-height: 10px;
  padding: 0;
  width: 10px;
  margin-left: 6px;
  position: relative;
  top: -2px;
  animation: Flash1 1s infinite;
}

.show_download_icon_th {
  position: relative;
}

#show_download_icon_box {
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 6px 6px 6px 6px;
  width: 310px;
  height: 70px;
  color: #fff;
  background-color: #4e5665;
  padding: 8px 5px 8px 15px;
  z-index: 99999;
  left: -120px;
  top: -120px;
}

#show_download_icon_box .title {
  font-size: 14px;
  padding-left: 10px;
}

/* pager */
div.pager {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

ul.pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
}

ul.pagination li {
  display: inline;
}

ul.pagination li a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

ul.pagination li a.active {
  background-color: #4caf50;
  color: white;
}

ul.pagination li a:hover:not(.active) {
  background-color: #ddd;
}