@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 16px;
  font-style: normal;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

nav, ul {
  list-style: none;
}

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #CCCCCC;
  margin: 1em 0;
  padding: 0;
}

input, select, button {
  font-size: 14px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bgy {
  background: #FFFF99;
}

.bggl {
  background: #CCC;
}

.bgre {
  background: #F66;
}

.bgre2 {
  background: #F45842;
}

.bgbl {
  background: #99F;
}

.bgye {
  background: #FF0;
}

.bgw {
  background: #FFF;
}

.red {
  color: #F66;
}

.white {
  color: #FFF;
}

.bold {
  font-weight: bold;
}

.hide {
  display: none !important;
}

.va_top {
  vertical-align: top !important;
}

.p_rel {
  position: relative;
}

.p_abs {
  position: absolute;
}

.p_fxd {
  position: fixed;
}

.f_left {
  float: left;
}

.f_right {
  float: right;
}

.clear {
  clear: both !important;
}

.clear hr {
  display: none !important;
}

.p_0 {
  padding: 0px !important;
}

.p_10 {
  padding: 10px !important;
}

.p_rl0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.p_rl5 {
  padding-left: 5px;
  padding-right: 5px;
}

.p_10 {
  padding: 10px;
}

.p_t10 {
  padding-top: 10px;
}

.p_t11 {
  padding-top: 11px;
}

.p_t12 {
  padding-top: 12px;
}

.p_t13 {
  padding-top: 13px;
}

.p_t14 {
  padding-top: 14px;
}

.p_t15 {
  padding-top: 15px;
}

.p_t16 {
  padding-top: 16px;
}

.p_t17 {
  padding-top: 17px;
}

.p_t18 {
  padding-top: 18px;
}

.p_t19 {
  padding-top: 19px;
}

.p_t20 {
  padding-top: 20px;
}

.p_t50 {
  padding-top: 50px;
}

.p_b10 {
  padding-bottom: 10px;
}

.p_b11 {
  padding-bottom: 11px;
}

.p_b12 {
  padding-bottom: 12px;
}

.p_b13 {
  padding-bottom: 13px;
}

.p_b14 {
  padding-bottom: 14px;
}

.p_b15 {
  padding-bottom: 15px;
}

.p_b16 {
  padding-bottom: 16px;
}

.p_b17 {
  padding-bottom: 17px;
}

.p_b18 {
  padding-bottom: 18px;
}

.p_b19 {
  padding-bottom: 19px;
}

.p_b20 {
  padding-bottom: 20px;
}

.p_b50 {
  padding-bottom: 50px;
}

.m_t0 {
  margin-top: 0px !important;
}

.m_t5 {
  margin-top: 5px;
}

.m_t10 {
  margin-top: 10px;
}

.m_t11 {
  margin-top: 11px;
}

.m_t12 {
  margin-top: 12px;
}

.m_t13 {
  margin-top: 13px;
}

.m_t14 {
  margin-top: 14px;
}

.m_t15 {
  margin-top: 15px;
}

.m_t16 {
  margin-top: 16px;
}

.m_t17 {
  margin-top: 17px;
}

.m_t18 {
  margin-top: 18px;
}

.m_t19 {
  margin-top: 19px;
}

.m_t20 {
  margin-top: 20px;
}

.m_t50 {
  margin-top: 20px;
}

.m_b10 {
  margin-bottom: 10px;
}

.m_b11 {
  margin-bottom: 11px;
}

.m_b12 {
  margin-bottom: 12px;
}

.m_b13 {
  margin-bottom: 13px;
}

.m_b14 {
  margin-bottom: 14px;
}

.m_b15 {
  margin-bottom: 15px;
}

.m_b16 {
  margin-bottom: 16px;
}

.m_b17 {
  margin-bottom: 17px;
}

.m_b18 {
  margin-bottom: 18px;
}

.m_b19 {
  margin-bottom: 19px;
}

.m_b20 {
  margin-bottom: 20px;
}

.m_b30 {
  margin-bottom: 30px;
}

.m_l10 {
  margin-left: 10px;
}

.m_l11 {
  margin-left: 11px;
}

.m_l12 {
  margin-left: 12px;
}

.m_l13 {
  margin-left: 13px;
}

.m_l14 {
  margin-left: 14px;
}

.m_l15 {
  margin-left: 15px;
}

.m_l16 {
  margin-left: 16px;
}

.m_l17 {
  margin-left: 17px;
}

.m_l18 {
  margin-left: 18px;
}

.m_l19 {
  margin-left: 19px;
}

.m_l20 {
  margin-left: 20px;
}

.m_r10 {
  margin-right: 10px;
}

.m_r11 {
  margin-right: 11px;
}

.m_r12 {
  margin-right: 12px;
}

.m_r13 {
  margin-right: 13px;
}

.m_r14 {
  margin-right: 14px;
}

.m_r15 {
  margin-right: 15px;
}

.m_r16 {
  margin-right: 16px;
}

.m_r17 {
  margin-right: 17px;
}

.m_r18 {
  margin-right: 18px;
}

.m_r19 {
  margin-right: 19px;
}

.m_r20 {
  margin-right: 20px;
}

input[type=submit],
button {
  color: #333;
  border: 1px solid #ACACAC;
  background: rgb(255, 255, 255);
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(229, 229, 229) 100%);
  box-sizing: border-box;
}
input[type=submit][disabled],
button[disabled] {
  background: #DCDCDC;
  color: #AEAEAE;
  cursor: not-allowed;
}

input[type=text], input[type=number], input[type=submit], input[type=checkbox], input[type=password], input[type=date], textarea, select, button {
  box-sizing: border-box;
  outline: none;
  font-family: "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", "ヒラギノ角ゴ Pro W6", Helvetica, verdana, arial;
  border: 1px solid #ACACAC;
}

.d-flex {
  display: flex;
  width: 100%;
}
.d-flex > * {
  flex: auto;
}
.d-flex > * + * {
  padding-left: 10px;
}
.d-flex > * + *.formStyle label {
  left: 15px !important;
}
.d-flex > *.c-strech {
  width: 100%;
}
.d-flex > *.c2 {
  flex: 0 0 50%;
  max-width: 50%;
}
.d-flex > *.c3 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.d-flex > *.c4 {
  flex: 0 0 25%;
  max-width: 25%;
}
.d-flex > *.c5 {
  flex: 0 0 20%;
  max-width: 20%;
}

.channelHeading {
  display: flex;
  height: 25px;
  /***** top, aal, lsl >>> フィルター切り替えリンク *****/
}
.channelHeading h3 {
  font-size: 1.2em;
  align-self: end;
  margin-bottom: 0;
}
.channelHeading h3 + .annotation {
  margin-left: 20px;
  margin-top: 6px;
  font-size: 0.7em;
  color: #999;
  align-self: center;
}
.channelHeading .changeFilter {
  margin-left: 20px;
  height: 100%;
  display: flex;
}
.channelHeading .changeFilter > * {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 1px;
  align-self: end;
}
.channelHeading .changeFilter a, .channelHeading .changeFilter span {
  display: block;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 6px;
  align-self: end;
}
.channelHeading .changeFilter a {
  color: #FFF;
  text-decoration: none;
  background: #333;
}
.channelHeading .changeFilter a:hover {
  background: #0000CD;
}
.channelHeading .changeFilter span {
  border: 1px solid #BBB;
}
.channelHeading .iconBox {
  display: flex;
  align-items: center;
  height: 100%;
  background: #FFF;
  padding: 0 8px;
  border-radius: 4px;
}
.channelHeading .iconBox i {
  font-size: 1.1em;
  color: #BABABA;
  font-weight: 700;
}
.channelHeading .iconBox i + var {
  margin-left: 5px;
  font-size: 0.8em;
  line-height: 0;
  color: #BABABA;
  font-weight: 700;
}
.channelHeading .iconBox:hover i {
  color: #666;
}
.channelHeading .iconBox:hover i + var {
  color: #666;
}
.channelHeading .changeView {
  flex: auto;
  display: flex;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
}
.channelHeading .changeView > * {
  display: flex;
  align-items: center;
  height: 100%;
}
.channelHeading .changeView input, .channelHeading .changeView select {
  border-radius: 4px;
  padding: 0 8px;
  height: 100%;
  font-size: 0.7em;
}
.channelHeading .changeView button {
  height: 100%;
  background: #FFF;
  padding: 0 8px;
  border-radius: 4px;
}
.channelHeading .changeView .control-box {
  height: 100%;
  margin-right: 25px;
  flex-direction: row-reverse;
}
.channelHeading .changeView .control-box > * {
  height: 100%;
}
.channelHeading .changeView .control-box > *:nth-child(n+2) {
  margin-right: 10px;
}
.channelHeading .changeView .control-box .batch-group {
  display: flex;
  height: 100%;
  flex-wrap: nowrap;
}
.channelHeading .changeView .control-box-item {
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 3px;
}
.channelHeading .changeView .control-box-item input[type=checkbox] {
  display: none;
}
.channelHeading .changeView .control-box-item input[type=checkbox]:checked + label {
  background: #BF00FF;
  border-color: #BF00FF;
}
.channelHeading .changeView .control-box-item input[type=checkbox]:checked + label i {
  font-size: 19px;
  font-weight: bold;
  color: #FFF;
}
.channelHeading .changeView .control-box-item input[type=checkbox] + label {
  display: flex;
  padding: 0 5px;
  border: 1px solid #BBB;
  border-radius: 3px;
  height: 100%;
  align-items: center;
  background: #FAFAFA;
}
.channelHeading .changeView .control-box-item input[type=checkbox] + label i {
  font-size: 18px;
  font-weight: bold;
  color: #999;
}
.channelHeading .changeView .control-box-item .batch-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: row;
}
.channelHeading .changeView .control-box-item .batch-control-item {
  font-size: 0.7em;
  height: 100%;
  width: 7.5em;
  padding: 5.5px 0;
  margin: 0 2px;
  border: 1px solid #666;
  border-radius: 3px;
  background: #FAFAFA;
  text-align: center;
  cursor: pointer;
}
.channelHeading .changeView .control-box-item .batch-control-item:hover {
  color: #FFF;
}
.channelHeading .changeView .control-box-item .batch-control-item:hover.resetProgress, .channelHeading .changeView .control-box-item .batch-control-item:hover.deleteCode, .channelHeading .changeView .control-box-item .batch-control-item:hover.code, .channelHeading .changeView .control-box-item .batch-control-item:hover.view, .channelHeading .changeView .control-box-item .batch-control-item:hover.manager, .channelHeading .changeView .control-box-item .batch-control-item:hover.updateEndDate, .channelHeading .changeView .control-box-item .batch-control-item:hover.csvExport {
  background: #5858FA;
  border-color: #0404B4;
}
.channelHeading .changeView .nav a, .channelHeading .changeView .nav span {
  min-width: 10em;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 11px;
  text-align: center;
  color: #999;
  box-sizing: border-box;
  margin: 0 1px;
  border: 1px solid;
  background: #FAFAFA;
}
.channelHeading .changeView .nav a {
  border-color: #999;
  text-decoration: none;
}
.channelHeading .changeView .nav a:hover {
  background: #6495ED;
  color: #FFF;
}
.channelHeading .changeView .nav span {
  border-color: #000;
  background: #333;
  color: #FFF;
  font-weight: 700;
}
.channelHeading .changeView .nav .addCode {
  width: 24px;
  height: 24px;
  text-align: center;
  margin: 0 2px;
  padding: 0;
  background: #FFF;
  font-weight: 700;
}
.channelHeading .changeView .nav .addCode + #selectMonth {
  font-size: 13px;
  padding: 0 12px 0 5px;
}

.table_layout a {
  text-decoration: none;
  color: #333;
}
.table_layout a:nth-child(even) tr {
  background: #FCFCFC;
}
.table_layout a:nth-child(odd) tr {
  background: #F8F8F8;
}
.table_layout .table_title {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}
.table_layout .table_title th {
  text-align: center;
  font-weight: 700;
  background: #121212;
  color: #FFF;
  padding: 0;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}
.table_layout tr {
  display: table;
  table-layout: fixed;
  line-height: 1.6rem;
  width: 100%;
  border-left: 1px solid #BABABA;
  box-sizing: border-box;
}
.table_layout tr.sunday td:nth-child(1) {
  color: #F66;
}
.table_layout tr.saturday td:nth-child(1) {
  color: #33F;
}
.table_layout tr th, .table_layout tr td {
  display: table-cell;
  vertical-align: middle;
  border-right: 1px solid #BABABA;
  border-bottom: 1px solid #BABABA;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.7rem;
  box-sizing: border-box;
}
.table_layout tr:nth-child(even) {
  background: #FCFCFC;
}
.table_layout tr:nth-child(odd) {
  background: #F8F8F8;
}
.table_layout tbody tr:hover {
  background: #F1F8FF;
}
.table_layout tbody tr td a:hover {
  color: #00F;
  font-weight: 700;
}
.table_layout tbody a tr:hover {
  background: #F1F8FF;
}

.flex-table {
  display: flex;
  flex-direction: column;
  background: #FFF;
  overflow-x: auto;
}
.flex-table thead {
  color: #FFF;
}
.flex-table thead tr {
  display: flex;
}
.flex-table thead tr th {
  flex: 1;
  white-space: nowrap;
  background: #0B3861 !important;
}
.flex-table thead tr th > * {
  height: 27px;
  display: flex;
  justify-content: center !important;
  align-items: center;
}
.flex-table tbody {
  max-height: calc(100vh - 120px);
  overflow-y: scroll;
}
.flex-table tbody::-webkit-scrollbar {
  display: none;
}
.flex-table tbody tr {
  display: flex !important;
}
.flex-table tbody tr td {
  display: flex;
  flex: 1;
  white-space: nowrap;
  height: 27px;
  align-items: center;
}

.formStyle {
  text-align: left;
  position: relative;
}
.formStyle.update {
  border-color: #F66 !important;
}
.formStyle > p {
  font-size: 0.8em;
  font-weight: 300;
  color: #888;
  border: 1px solid #C6C6C6;
  border-radius: 2px;
  padding: 0 8px !important;
}
.formStyle .iconBox {
  min-width: 5.2em;
  height: 35px;
  padding: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.formStyle .iconBox i {
  font-size: 1.6em;
}
.formStyle input[type=text], .formStyle input[type=number], .formStyle input[type=date], .formStyle input[type=password], .formStyle textarea, .formStyle button, .formStyle select {
  padding: 8px;
  border: 1px solid #C6C6C6;
  width: 100%;
  margin-bottom: 14px;
  color: #888;
  font-family: "Lato", "sans-serif";
  font-size: 0.8rem;
  font-weight: 300;
  border-radius: 2px;
  transition: all 0.3s;
  vertical-align: text-top;
}
.formStyle input[type=text]:focus, .formStyle input[type=number]:focus, .formStyle input[type=date]:focus, .formStyle input[type=password]:focus, .formStyle textarea:focus, .formStyle button:focus, .formStyle select:focus {
  outline: none;
  border: 1px solid #bdcc00;
}
.formStyle input[type=text]:focus + label, .formStyle input[type=number]:focus + label, .formStyle input[type=date]:focus + label, .formStyle input[type=password]:focus + label, .formStyle textarea:focus + label, .formStyle button:focus + label, .formStyle select:focus + label {
  color: #bdcc00;
}
.formStyle input[type=text].hide + label, .formStyle input[type=number].hide + label, .formStyle input[type=date].hide + label, .formStyle input[type=password].hide + label, .formStyle textarea.hide + label, .formStyle button.hide + label, .formStyle select.hide + label {
  display: none;
}
.formStyle input[type=text] + label, .formStyle input[type=number] + label, .formStyle input[type=date] + label, .formStyle input[type=password] + label, .formStyle textarea + label, .formStyle button + label, .formStyle select + label {
  position: absolute;
  left: 5px;
  top: -10px;
  color: #555;
  font-size: 0.8rem;
  display: inline-block;
  padding: 4px 10px;
  font-weight: 400;
  background-color: rgba(255, 255, 255, 0);
  transition: color 0.3s, top 0.3s, background-color 0.8s;
  background-color: white;
}
.formStyle button {
  width: auto;
  min-width: 5rem;
  background: #FAFAFA;
}
.formStyle button:hover {
  opacity: 0.5;
}
.formStyle select {
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.formStyle textarea {
  resize: none;
  height: 7em;
}
.formStyle input[type=text]::-moz-placeholder, .formStyle input[type=number]::-moz-placeholder, .formStyle input[type=date]::-moz-placeholder, .formStyle input[type=password]::-moz-placeholder {
  color: #CCC;
}
.formStyle input[type=text]::placeholder, .formStyle input[type=number]::placeholder, .formStyle input[type=date]::placeholder, .formStyle input[type=password]::placeholder {
  color: #CCC;
}

/*** スイッチ型チェックボックス **/
.formSwitchStyle {
  display: flex;
  align-items: flex-start;
}
.formSwitchStyle > input[type=checkbox] {
  display: none;
}
.formSwitchStyle > input[type=checkbox] + label {
  display: block;
  box-sizing: border-box;
  text-align: left;
  border: 2px solid #333;
  border-radius: 3px;
  line-height: 1;
  height: 33px;
  max-width: 96px;
  flex: 0 0 96px;
}
.formSwitchStyle > input[type=checkbox] + label > div {
  display: inline-block;
  width: 50%;
  background: #333;
  transition: 0.1s;
  text-align: center;
  color: #FFF;
  font-size: 0.8rem;
}
.formSwitchStyle > input[type=checkbox]:checked + label > div {
  transform: translateX(101%);
  background: #333;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
}
.arrow::before, .arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.arrow.topright::before {
  width: 12px;
  height: 2px;
  background: #666;
  transform: rotate(135deg);
}
.arrow.topright::after {
  right: 6px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
}

.acdbox {
  background: #FCFCFC;
  border: 1px solid #CDCDCD;
  box-shadow: 2px 2px 12px #AAA;
  box-sizing: border-box;
}
.acdbox-in {
  padding: 10px;
}
.acdbox > label {
  color: #FFF;
  display: block;
  margin-bottom: 1px;
  position: relative;
}
.acdbox > label.acdlabel:after {
  box-sizing: border-box;
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  padding: 5px 5px;
  position: absolute;
  border-right: 2px solid #CDCDCD;
  border-bottom: 2px solid #CDCDCD;
  transform: rotate(-45deg);
  left: 13px;
  top: 13px;
}
.acdbox > label h4 {
  font-size: 1.1em;
  font-weight: 700;
  color: #333;
  padding: 10px 0;
  text-indent: 40px;
  line-height: 1.2;
}
.acdbox .acdbody {
  height: 0px;
  opacity: 0;
  transition: 0.5s;
  visibility: hidden;
  padding: 0 10px;
}
.acdbox > input[type=checkbox] {
  display: none;
}
.acdbox > input[type=checkbox]:checked + label {
  margin-bottom: 15px;
}
.acdbox > input[type=checkbox]:checked + label:after {
  transform: rotate(45deg);
  top: 11px;
}
.acdbox > input[type=checkbox]:checked + label + .acdbody {
  height: auto;
  opacity: 1;
  visibility: visible;
  padding-bottom: 10px;
}

html {
  font-size: 90%;
}

body {
  font-size: 1.4rem;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  font-family: "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", "ヒラギノ角ゴ Pro W6", Helvetica, verdana, arial;
  height: 100vh;
  position: relative;
  min-width: 1280px;
  background: #E9EBEE;
}
body main {
  width: 100%;
  height: auto;
  padding-top: 40px;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::i-block-chrome, body {
    font-feature-settings: "pkna";
  }
}
#header {
  position: relative;
  width: 100%;
  top: 0rem;
  background: #000000;
  z-index: 100;
  position: fixed;
  box-shadow: 3px 3px 9px #AAA;
}
#header .header {
  display: flex;
  justify-content: space-between;
  /*** メニューボタン ***/
}
#header .header .headerNav {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 40px;
  /*** 終了コード表示切替スイッチ ***/
  /*** コード検索 ***/
  /*** テーブルカラム表示切替メニュー展開 ***/
}
#header .header .headerNav > * {
  margin-right: 5px;
}
#header .header .headerNav .title {
  font-size: 1.4em;
  font-weight: bold;
  margin: 0 1em;
  cursor: pointer;
  color: #FFF;
}
#header .header .headerNav select, #header .header .headerNav input[type=text] {
  height: 26px;
  font-size: 0.7em;
}
#header .header .headerNav .hideSwitch {
  width: 50px;
}
#header .header .headerNav .hideSwitch #hideSwitch {
  display: none;
}
#header .header .headerNav .hideSwitch #hideSwitch + label {
  display: block;
  box-sizing: border-box;
  border: 2px solid #FFF;
  border-radius: 3px;
  height: 1.5rem;
}
#header .header .headerNav .hideSwitch #hideSwitch + label .switchText {
  height: calc(1.5rem - 2px);
  width: 50%;
  background: #FFF;
  transition: 0.5s;
}
#header .header .headerNav .hideSwitch #hideSwitch:checked + label .switchText {
  transform: translateX(100%);
}
#header .header .headerNav .searchWord {
  display: flex;
  align-items: center;
}
#header .header .headerNav .searchWord [name=search_word] {
  width: 24rem;
}
#header .header .headerNav .searchWord [name=search_word]::-moz-placeholder {
  font-size: inherit;
  text-indent: 5px;
}
#header .header .headerNav .searchWord [name=search_word]::placeholder {
  font-size: inherit;
  text-indent: 5px;
}
#header .header .headerNav .searchWord [name=extraction] {
  width: 26px;
  height: 26px;
  margin-left: 5px;
}
#header .header .headerNav .columnFilter .popup {
  font-size: 0.7em;
  height: 26px;
  padding: 0 10px;
  letter-spacing: 1px;
  color: #666;
  border-radius: 3px;
  background: #FFF;
  font-weight: 700;
}
#header .header .headerNav .columnFilter .balloon {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100vw;
  background: #000;
}
#header .header .headerNav .columnFilter .balloon-box {
  padding: 0 10px 10px 10px;
}
#header .header .headerNav .columnFilter .balloon-box .setFilter {
  display: flex;
  background: #FCFCFC;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
}
#header .header .headerNav .columnFilter .balloon-box .setFilter li {
  margin: 2px 5px;
  display: flex;
  align-items: center;
}
#header .header .headerNav .columnFilter .balloon-box .setFilter li .form-check {
  display: none;
}
#header .header .headerNav .columnFilter .balloon-box .setFilter li .form-check + label {
  font-size: 0.7em;
  padding: 8px 10px;
  color: #FFF;
  background: #CDCDCD;
  border: 1px solid rgba(118, 118, 118, 0.3);
}
#header .header .headerNav .columnFilter .balloon-box .setFilter li .form-check:checked + label {
  color: #FFF;
  background: mediumblue;
}
#header .header .headerNav .columnFilter .balloon-box .setFilter li.btn {
  margin-left: 30px;
}
#header .header .headerNav .columnFilter .balloon-box .setFilter li.btn .save {
  font-size: 0.7em;
  height: 26px;
  padding: 0 10px;
  letter-spacing: 1px;
  color: #666;
  border-radius: 3px;
  background: #FFF;
  font-weight: 700;
}
#header .header .headerMenu {
  width: 32px;
  height: 40px;
  margin: 0 20px;
  position: relative;
}
#header .header .headerMenu #humberger {
  height: 100%;
  width: 100%;
  cursor: pointer;
}
#header .header .headerMenu #humberger > div {
  position: absolute;
  left: 0;
  height: 4px;
  width: 32px;
  background-color: #FFF;
  border-radius: 2px;
}
#header .header .headerMenu #humberger > div:nth-of-type(1) {
  top: 9px;
}
#header .header .headerMenu #humberger > div:nth-of-type(2) {
  top: 19px;
}
#header .header .headerMenu #humberger > div:nth-of-type(3) {
  top: 29px;
}
#header .header .headerMenu #humberger.active > div {
  left: 2px;
  width: 28px;
}
#header .header .headerMenu #humberger.active > div:nth-of-type(1) {
  top: 4px;
  transform: translateY(14px) rotate(-45deg);
}
#header .header .headerMenu #humberger.active > div:nth-of-type(2) {
  display: none;
}
#header .header .headerMenu #humberger.active > div:nth-of-type(3) {
  top: 35px;
  transform: translateY(-17px) rotate(45deg);
}
#header .header .headerMenu #humberger.active + .menuGroup {
  display: block;
}
#header .header .headerMenu #humberger + .menuGroup {
  display: none;
  position: relative;
  z-index: 5;
}
#header .header .headerMenu #humberger + .menuGroup ul {
  position: fixed;
  top: 40px;
  right: 0;
  min-width: 200px;
  max-width: 400px;
  width: 20%;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  list-style-type: none;
  background-color: #000;
  padding: 0 5px;
  overflow-y: auto;
}
#header .header .headerMenu #humberger + .menuGroup ul li {
  border-bottom: 1px solid #CDCDCD;
}
#header .header .headerMenu #humberger + .menuGroup ul li a {
  display: block;
  padding: 12px 12px;
  font-size: 0.7em;
  text-decoration: none;
  color: #FFF;
}
#header .header .headerMenu #humberger + .menuGroup ul li a:hover {
  background-color: #DA3C41;
}

.loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.loading .animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  width: 1em;
  height: 4em;
  background: #ffffff;
  animation: load 1s infinite ease-in-out;
  animation-delay: -0.16s;
}
.loading .animation:before {
  left: -1.5em;
  animation-delay: -0.32s;
}
.loading .animation:after {
  left: 1.5em;
}
.loading .animation:before, .loading .animation:after {
  width: 1em;
  height: 4em;
  background: #ffffff;
  animation: load 1s infinite ease-in-out;
  position: absolute;
  top: 0;
  content: "";
}

@keyframes load {
  0%, 80%, 100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
#modal-overlay {
  z-index: 1;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.1);
}

#message-box {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  z-index: 5;
  background-color: rgba(80, 80, 80, 0.5);
}
#message-box > * {
  padding-top: 64px !important;
}
#message-box > * .message-text {
  padding: 18px;
  background-color: rgb(255, 255, 255);
  border: 3px solid #0404B4;
  border-radius: 5px;
  font-weight: 400;
}

#modal-content {
  display: none;
  position: fixed;
  border: 2px solid #AAA;
  background: #FFF;
  z-index: 2;
  overflow-y: auto;
  max-height: 80%;
  /* modal-content .formBatchAddCode */
  /* modal-content .formRemarksEdit */
  /* modal-content .formDeleteCodeData */
  /* modal-content .formUpdateEndDate */
  /* modal-content .formCodeDetailEdit */
  /* modal-content .viewProgressList */
  /* modal-content .formUpdateManager */
  /* modal-content .formAddMedia */
  /* modal-content .formAddCustomer */
  /* modal-content .formAddCompany */
  /* modal-content .formEditCompany */
  /* modal-content .formCompanyInfoAdd */
  /* modal-content .formAddMailAddress */
  /* modal-content .formCustomerEdit */
}
#modal-content input[type=text], #modal-content input[type=number], #modal-content input[type=date], #modal-content input[type=submit] {
  display: inline-block;
}
#modal-content > * {
  display: none;
}
#modal-content .modalContentTitle {
  position: relative;
}
#modal-content .modalContentTitle h4 {
  font-size: 1.2rem;
  margin: 5px 0 20px;
  padding: 12px 0 5px;
  background: #F4F4F4;
  border-bottom: 8px double #CCC;
  color: #666;
  text-indent: 13px;
  letter-spacing: 3px;
}
#modal-content .modalContentTitle h4 .annotation {
  font-size: 0.8em;
  margin-left: 15px;
  letter-spacing: 0;
}
#modal-content .modalContentTitle h4 .btn {
  position: absolute;
  right: 18px;
  bottom: 12px;
}
#modal-content .modalContentTitle h4 .btn button {
  font-size: 0.7em;
  padding: 3px 12px;
  letter-spacing: 2px;
}
#modal-content .formBatchAddCode {
  min-width: 1000px;
}
#modal-content .formBatchAddCode .modalContentTitle .btn {
  right: 136px;
  position: absolute;
  top: 0.4em;
}
#modal-content .formBatchAddCode .modalContentBody .btn {
  float: right;
}
#modal-content .formBatchAddCode .formSwitchStyle {
  margin-bottom: 1.2rem;
}
#modal-content .formBatchAddCode .formSwitchStyle #methodSwitch + label {
  height: 26px;
  max-width: 200px;
  flex: 0 0 200px;
}
#modal-content .formBatchAddCode .formSwitchStyle #methodSwitch + label > div {
  height: 24px;
  line-height: 24px;
}
#modal-content .formBatchAddCode .formSwitchStyle #methodSwitch + label .switchText:after {
  content: "CSV貼り付け";
}
#modal-content .formBatchAddCode .formSwitchStyle #methodSwitch:checked + label .switchText:after {
  content: "コード数指定";
}
#modal-content .formRemarksEdit textarea {
  width: 40rem;
}
#modal-content .formDeleteCodeData {
  min-width: 480px;
}
#modal-content .formUpdateEndDate {
  min-width: 480px;
}
#modal-content .formCodeDetailEdit {
  min-width: 1000px;
}
#modal-content .viewProgressList {
  width: 80vw;
  height: 640px;
}
#modal-content .viewProgressList .site_title {
  margin: 10px 10px 0;
}
#modal-content .viewProgressList .site_title .switchMonth {
  float: left;
}
#modal-content .viewProgressList .site_title .switchMonth span {
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5rem;
  border: 1px solid #BBB;
  color: #999;
  font-size: 0.8rem;
  background: #CDCDCD;
}
#modal-content .viewProgressList .site_title .switchMonth span button {
  display: block;
  padding: 0 8px;
  color: #666;
}
#modal-content .viewProgressList .site_title p {
  line-height: 1.5rem;
  text-indent: 15px;
}
#modal-content .viewProgressList .calendar {
  display: table;
  width: 100%;
  overflow: hidden;
}
#modal-content .viewProgressList .calendar > div {
  display: table-cell;
  width: 50%;
}
#modal-content .viewProgressList .calendar table {
  margin: 5px 10px 10px;
}
#modal-content .viewProgressList .calendar table tbody tr {
  height: 1.1rem;
  line-height: 1.1rem;
}
#modal-content .viewProgressList .calendar table tbody tr.out {
  background: #EDEDED;
}
#modal-content .formUpdateManager {
  min-width: 900px;
  max-width: 65vw;
}
#modal-content .formAddMedia {
  min-width: 600px;
}
#modal-content .formAddCustomer {
  min-width: 600px;
}
#modal-content .formAddCustomer .btn {
  float: right;
}
#modal-content .formAddCompany {
  max-width: 600px;
  min-width: 400px;
  width: 50vw;
}
#modal-content .formEditCompany {
  max-width: 600px;
  min-width: 400px;
  width: 50vw;
}
#modal-content .formCompanyInfoAdd {
  max-width: 800px;
  min-width: 500px;
  width: 60vw;
}
#modal-content .formCompanyInfoAdd .formCompanyInfoAdd .chblock input {
  width: 26px;
  height: 26px;
  vertical-align: text-top;
}
#modal-content .formCompanyInfoAdd .formCompanyInfoAdd .chblock.formStyle {
  width: 34px;
}
#modal-content .formCompanyInfoAdd .formCompanyInfoAdd .btn {
  float: right;
}
#modal-content .formAddMailAddress {
  max-width: 800px;
  min-width: 600px;
  width: 70vw;
}
#modal-content .formAddMailAddress .chblock input {
  width: 26px;
  height: 26px;
  vertical-align: sub;
}
#modal-content .formAddMailAddress .chblock.formStyle {
  width: 34px;
}
#modal-content .formAddMailAddress p {
  border-bottom: 1px solid #CDCDCD;
  font-size: 0.8em;
  white-space: nowrap;
}
#modal-content .formAddMailAddress .sel {
  font-weight: 700;
  color: #F66;
}
#modal-content .formCustomerEdit {
  min-width: 600px;
}
#modal-content .formCustomerEdit .customerTypeSelect,
#modal-content .formAddCustomer .customerTypeSelect {
  width: 100%;
  height: 38px;
  margin-bottom: 14px;
  position: relative;
  text-align: center;
}
#modal-content .customerTypeSelect .radio-inline__input {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}
#modal-content .customerTypeSelect .radio-inline__input:checked + .radio-inline__label {
  color: #FFF;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}
#modal-content .customerTypeSelect .radio-inline__input:nth-child(1):checked + .radio-inline__label {
  background: #FA5858;
}
#modal-content .customerTypeSelect .radio-inline__input:nth-child(3):checked + .radio-inline__label {
  background: #819FF7;
}
#modal-content .customerTypeSelect .radio-inline__input:nth-child(5):checked + .radio-inline__label {
  background: #04B431;
}
#modal-content .customerTypeSelect .radio-inline__label {
  display: inline-block;
  padding: 0 1rem;
  height: 36px;
  line-height: 36px;
  width: 200px;
  margin-right: 4px;
  border-radius: 3px;
  border: 1px solid #CECECE;
  transition: all 0.2s;
}

.code_list > * {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}
.code_list .addCodeBox {
  background: #FCFCFC;
  padding: 20px 20px 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.code_list .flex-table.tablesorter th {
  position: relative;
  cursor: pointer;
}
.code_list .flex-table.tablesorter th > * {
  font-size: 0.7rem;
}
.code_list .flex-table .selectCol {
  flex: 0 0 25px;
  max-width: 25px;
  align-items: center;
  justify-content: center;
}
.code_list .flex-table .selectCol input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
}
.code_list .flex-table .idCol {
  flex: 0 0 35px;
  max-width: 35px;
  justify-content: center;
}
.code_list .flex-table .naviCol {
  flex: 0 0 96px;
  max-width: 96px;
  padding: 0;
  justify-content: center;
}
.code_list .flex-table .clientCol,
.code_list .flex-table .requesterCol {
  flex: 0 0 132px;
  max-width: auto;
}
.code_list .flex-table .clientCol .customerType,
.code_list .flex-table .requesterCol .customerType {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 26px;
  position: relative;
  padding-left: 26px;
}
.code_list .flex-table .clientCol .customerType::before,
.code_list .flex-table .requesterCol .customerType::before {
  position: absolute;
  content: "";
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
}
.code_list .flex-table .clientCol .customerType::after,
.code_list .flex-table .requesterCol .customerType::after {
  position: absolute;
  left: 7px;
  top: 1px;
  color: #FFF;
  font-weight: bold;
  font-size: 15px;
}
.code_list .flex-table .clientCol .customerType[data-type="1"]::before,
.code_list .flex-table .requesterCol .customerType[data-type="1"]::before {
  background: #F00;
}
.code_list .flex-table .clientCol .customerType[data-type="1"]::after,
.code_list .flex-table .requesterCol .customerType[data-type="1"]::after {
  content: "C";
}
.code_list .flex-table .clientCol .customerType[data-type="2"]::before,
.code_list .flex-table .requesterCol .customerType[data-type="2"]::before {
  background: #819FF7;
}
.code_list .flex-table .clientCol .customerType[data-type="2"]::after,
.code_list .flex-table .requesterCol .customerType[data-type="2"]::after {
  content: "M";
  left: 6px;
}
.code_list .flex-table .clientCol .customerType[data-type="3"]::before,
.code_list .flex-table .requesterCol .customerType[data-type="3"]::before {
  background: #04B431;
}
.code_list .flex-table .clientCol .customerType[data-type="3"]::after,
.code_list .flex-table .requesterCol .customerType[data-type="3"]::after {
  content: "A";
}
.code_list .flex-table .mediaCol {
  flex: 0 0 132px;
  max-width: auto;
}
.code_list .flex-table .categoryCol {
  flex: 0 0 132px;
  max-width: 132px;
}
.code_list .flex-table .siteCol {
  width: auto;
}
.code_list .flex-table .priceCol {
  flex: 0 0 108px;
  max-width: auto;
  padding: 0;
  justify-content: center;
}
.code_list .flex-table .codeCol {
  flex: 0 0 144px;
  max-width: 144px;
  position: relative;
}
.code_list .flex-table .codeCol.takeover:after {
  position: absolute;
  content: "▼";
  right: 0px;
  top: -9px;
  color: deeppink;
  font-size: 21px;
}
.code_list .flex-table .dateCol {
  flex: 0 0 74px;
  max-width: 74px;
  padding: 0;
  justify-content: center;
}
.code_list .flex-table .upperCol,
.code_list .flex-table .countCol {
  flex: 0 0 42px;
  max-width: 42px;
  padding: 0;
  justify-content: center;
}
.code_list .flex-table .managerCol,
.code_list .flex-table .midCol,
.code_list .flex-table .mpwCol {
  flex: 0 0 148px;
  max-width: 148px;
}
.code_list .flex-table .autoSettingsCol {
  flex: 0 0 228px;
  max-width: 228px;
  padding: 0;
  justify-content: center;
}
.code_list .flex-table .achiveCol {
  flex: 0 0 74px;
  max-width: 74px;
  padding: 0;
  justify-content: center;
}
.code_list .flex-table .valueCol {
  flex: 0 0 74px;
  max-width: 74px;
  padding: 0;
  justify-content: center;
}
.code_list .flex-table .datetimeCol {
  flex: 0 0 120px;
  max-width: 120px;
  padding: 0;
  justify-content: center;
}
.code_list .flex-table .flagCol {
  flex: 0 0 36px;
  max-width: 36px;
  height: 27px;
  text-align: center;
  justify-content: center;
}
.code_list .flex-table .flagCol > span {
  display: block;
  height: 22px;
  width: 31px;
}
.code_list .flex-table .flagCol > span:after {
  display: block;
  font-size: 0.7rem;
  text-align: center;
  content: "OFF";
  cursor: pointer;
  color: #666;
}
.code_list .flex-table .flagCol > span.onFlag:after {
  content: "ON";
  background: #A9A9F5;
  color: #FFF;
}
.code_list .flex-table .flagCol > span:hover {
  font-weight: 700;
}
.code_list .flex-table tbody:not(.filter) tr:not(.running) {
  display: none !important;
}
.code_list .flex-table tbody tr.out {
  background: #EDEDED;
}
.code_list .flex-table tbody tr.out:hover {
  background: #DFDFDF;
}
.code_list .flex-table tbody tr.out.none {
  background: #D9D9D9;
}
.code_list .flex-table tbody tr.out.none:hover {
  background: #D1D1D1;
}
.code_list .flex-table tbody tr td.out {
  background: #D9D9D9;
}
.code_list .flex-table tbody tr td.naviCol .codeedit {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.code_list .flex-table tbody tr td.naviCol .codeedit i {
  color: #AAA;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.code_list .flex-table tbody tr td.naviCol .codeedit i:hover {
  color: #333;
}
.code_list .flex-table tbody tr td.naviCol .codeedit i + i {
  margin-left: 6px;
}

/********* login ***************************/
#login_form {
  background: #FAFAFA;
  margin: 3rem auto;
  padding: 0 1rem 2rem;
  max-width: 370px;
}
#login_form p {
  font-size: 2rem;
  text-align: center;
  padding: 1em 0;
}
#login_form .form-item {
  margin-bottom: 0.75em;
  width: 100%;
}
#login_form .form-item input {
  background: #FAFAFA;
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #666;
  font-size: 2rem;
  height: 50px;
  transition: border-color 0.3s;
  width: 100%;
}
#login_form .form-item input:focus {
  border-bottom: 2px solid #C0C0C0;
  outline: none;
}
#login_form .button-panel {
  margin: 2em 0 0;
  width: 100%;
}
#login_form .button-panel .button {
  background: #F16272;
  border: none;
  color: #FFF;
  cursor: pointer;
  height: 50px;
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
  width: 100%;
}
#login_form .button-panel .button:hover {
  background: #ee3e52;
}

/********* info ***************************/
#info {
  padding-bottom: 20px;
}
#info .summary_list > div {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
#info .summary_list table .code_id {
  width: 3rem;
}
#info .summary_list table .customer_column {
  width: 18rem;
}
#info .summary_list table .income_column {
  width: 10rem;
}
#info .summary_list table .spending_column {
  width: 10rem;
}
#info .summary_list table td.income_column, #info .summary_list table td.spending_column {
  text-align: right;
}
#info .summary_list table .nav_column {
  width: 18rem;
}
#info .summary_list table .nav_column > div {
  height: 25px;
  text-align: center;
}
#info .summary_list table .nav_column > div a {
  display: inline-block;
  line-height: normal;
  font-size: 0.7em;
  border: 1px solid #CACACA;
  min-width: 4.5rem;
  vertical-align: middle;
}
#info .summary_list table .nav_column > div a:hover {
  color: #666;
  font-weight: 400;
  background: #CACACA;
}
#info .summary_list table .nav_column > div button {
  width: 20px;
  height: 19px;
  line-height: 18px;
  vertical-align: middle;
  font-weight: bold;
  color: #666;
  padding: 0;
  background: top;
  cursor: pointer;
}

/********* manager ***************************/
#manager {
  padding-bottom: 20px;
}
#manager .managerList > div, #manager .managerList > table {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
#manager .managerList .progressChild-in {
  display: flex;
  flex-direction: column;
}
#manager .managerList .progressChild-in li {
  border: 5px double #EDEDED;
  margin-top: 10px;
  padding: 20px 10px 10px;
}
#manager .managerList .progressChild-in li .numberUse {
  width: 7em;
  background: #DEDEDE;
  border: none;
}
#manager .managerList .progressChild-in li .autoFlag input[type=checkbox] {
  display: none;
}
#manager .managerList .progressChild-in li .autoFlag input[type=checkbox] + label {
  font-size: 0.8em;
  font-weight: 700;
  color: #888;
  border: 1px solid #C6C6C6;
  border-radius: 2px;
  background: #EFEFEF;
  letter-spacing: 1px;
}
#manager .managerList .progressChild-in li .autoFlag input[type=checkbox] + label:before {
  content: "OFF";
}
#manager .managerList .progressChild-in li .autoFlag input[type=checkbox]:checked + label {
  background: #2E2EFE;
}
#manager .managerList .progressChild-in li .autoFlag input[type=checkbox]:checked + label:before {
  content: "ON";
  color: #FFF;
}
#manager .managerList .progressChild-in li .control {
  justify-content: flex-end;
}
#manager .managerList .progressChild-in li .control > * {
  max-width: 5.2em;
}
#manager .managerList .progressChild-in li .control > * + * {
  margin-left: 5px;
}

/********* invoice ***************************/
#invoice {
  padding-bottom: 20px;
}
#invoice .billingList > div, #invoice .billingList > table {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#invoice .billingList .tablesorter th {
  position: relative;
  cursor: pointer;
}
#invoice .billingList .tablesorter th > * {
  font-size: 0.7rem;
}
#invoice .billingList .channelHeading .changeFilter {
  vertical-align: middle;
}
#invoice .billingList .channelHeading .formSwitchStyle {
  width: 120px;
}
#invoice .billingList .channelHeading .formSwitchStyle + * {
  margin-left: 5px;
}
#invoice .billingList .channelHeading .formSwitchStyle label {
  height: 24px;
  max-width: 120px;
  flex: 0 0 120px;
}
#invoice .billingList .channelHeading .formSwitchStyle label > div {
  height: 20px;
  line-height: 20px;
}
#invoice .billingList .channelHeading .formSwitchStyle #hideMediaSwitch + label .mediaText:after {
  content: "媒体名ON";
}
#invoice .billingList .channelHeading .formSwitchStyle #hideMediaSwitch:checked + label .mediaText:after {
  content: "媒体名OFF";
}
#invoice .billingList .channelHeading .formSwitchStyle #hideZeroSwitch + label .zeroText:after {
  content: "";
}
#invoice .billingList .channelHeading .formSwitchStyle #hideZeroSwitch:checked + label .zeroText:after {
  content: "";
}
#invoice .billingList .channelHeading .changeView .switchGroup {
  height: 100%;
}
#invoice .billingList .channelHeading .changeView .switchGroup > li {
  height: 100%;
}
#invoice .billingList .channelHeading .changeView .switchGroup > li + li {
  margin-left: 5px;
}
#invoice .billingList .channelHeading .changeView .switchGroup > li input[type=checkbox] {
  display: none;
}
#invoice .billingList .channelHeading .changeView .switchGroup > li input[type=checkbox] + label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.7em;
  min-width: 80px;
  border: 1px solid #CACACA;
  font-weight: 700;
  color: #FFF;
  background: #01A9DB;
}
#invoice .billingList .channelHeading .changeView .switchGroup > li input[type=checkbox]:checked + label {
  color: #999;
  background: #FCFDFA;
}
#invoice .billingList tr {
  position: relative;
}
#invoice .billingList tr.none {
  background: #D9D9D9;
}
#invoice .billingList tr.none:hover {
  background: #D1D1D1;
}
#invoice .billingList .dateColumn {
  width: 10rem;
}
#invoice .billingList .dateColumn .navi {
  content: "";
  position: absolute;
  left: -84px;
  border: 1px solid #BABABA;
  border-radius: 5px;
  width: 76px;
}
#invoice .billingList .dateColumn .navi .codeedit {
  background: #FEFEFE;
  border-radius: 5px;
  padding-right: 4px;
  height: 21px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#invoice .billingList .dateColumn .navi .codeedit > i {
  color: #AAA;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
#invoice .billingList .dateColumn .navi .codeedit > i + i {
  margin-left: 6px;
}
#invoice .billingList .mediaColumn {
  width: 10rem;
}
#invoice .billingList .siteColumn {
  width: auto;
}
#invoice .billingList .codeColumn {
  width: 7rem;
}
#invoice .billingList .countColumn {
  width: 40px;
  text-align: right;
}
#invoice .billingList .priceColumn {
  width: 79px;
  text-align: right;
}

#progressList .progressList > div {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
#progressList .progressList .xDataArea {
  overflow: hidden;
}
#progressList .progressList .xDataArea .lockBox {
  float: left;
  width: 12%;
}
#progressList .progressList .xDataArea .lockBox .w50pa {
  width: 50%;
}
#progressList .progressList .xDataArea .lockBox table thead tr th {
  background: rgb(102, 102, 153);
  color: #FFF;
}
#progressList .progressList .xDataArea .lockBox table tbody td {
  text-align: center;
}
#progressList .progressList .xDataArea .lockBox .allIncome,
#progressList .progressList .xDataArea .lockBox .allSpending {
  background: 0;
  color: #666;
}
#progressList .progressList .xDataArea .xScrollBox {
  float: left;
  width: 88%;
  overflow-y: hidden; /* 縦スクロール非表示 */
  overflow-x: scroll; /* 横スクロール */
}
#progressList .progressList .xDataArea .xScrollBox .w220px {
  width: 220px;
}
#progressList .progressList .xDataArea .xScrollBox > div {
  display: block;
}
#progressList .progressList .xDataArea .xScrollBox > div > div {
  display: inline-block;
  vertical-align: top;
}
#progressList .progressList .xDataArea .xScrollBox table thead tr th input {
  display: inline-block;
  width: 100%;
  border: none;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
}
#progressList .progressList .xDataArea .xScrollBox table tbody td {
  text-align: center;
}
#progressList .progressList .xDataArea .lockBox table,
#progressList .progressList .xDataArea .xScrollBox table {
  border-top: 1px solid #999;
}
#progressList .progressList .xDataArea .lockBox table thead tr,
#progressList .progressList .xDataArea .xScrollBox table thead tr {
  height: 20px;
  line-height: 20px;
  box-sizing: initial;
}
#progressList .progressList .xDataArea .lockBox table thead tr th,
#progressList .progressList .xDataArea .xScrollBox table thead tr th {
  font-size: 0.6rem;
  box-sizing: content-box;
}
#progressList .progressList .xDataArea .lockBox table thead tr.hightHeight,
#progressList .progressList .xDataArea .xScrollBox table thead tr.hightHeight {
  height: 25px;
  line-height: 25px;
}
#progressList .progressList .xDataArea .lockBox table thead tr.hightHeight th,
#progressList .progressList .xDataArea .xScrollBox table thead tr.hightHeight th {
  font-size: 0.7rem;
}
#progressList .progressList .xDataArea .lockBox table thead tr.lowHeight,
#progressList .progressList .xDataArea .xScrollBox table thead tr.lowHeight {
  height: 16px;
  line-height: 16px;
}
#progressList .progressList .xDataArea .lockBox table thead tr.lowHeight th,
#progressList .progressList .xDataArea .lockBox table tbody tr.lowHeight th,
#progressList .progressList .xDataArea .xScrollBox table thead tr.lowHeight th,
#progressList .progressList .xDataArea .xScrollBox table tbody tr.lowHeight th {
  height: 16px;
  background: rgb(0, 0, 128);
  color: #FFF;
  font-size: 0.6rem;
}
#progressList .progressList .xDataArea .lockBox table thead tr.lowHeight th .red,
#progressList .progressList .xDataArea .lockBox table tbody tr.lowHeight th .red,
#progressList .progressList .xDataArea .xScrollBox table thead tr.lowHeight th .red,
#progressList .progressList .xDataArea .xScrollBox table tbody tr.lowHeight th .red {
  color: #F33;
}
#progressList .progressList .xDataArea .lockBox table tbody tr,
#progressList .progressList .xDataArea .xScrollBox table tbody tr {
  height: 16px;
  line-height: 16px;
  box-sizing: initial;
}
#progressList .progressList .xDataArea .lockBox table tbody tr.out,
#progressList .progressList .xDataArea .xScrollBox table tbody tr.out {
  background: #D9D9D9;
}
#progressList .progressList .xDataArea .lockBox table tbody tr td,
#progressList .progressList .xDataArea .xScrollBox table tbody tr td {
  font-size: 0.5rem;
  height: 16px;
  box-sizing: content-box;
}

/********* logs ***************************/
#logs {
  padding-bottom: 20px;
}
#logs .logList > div {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#logs .logList .flex-table tbody .separator:nth-child(n+2) {
  padding-top: 1em;
  border-left: none;
  border-bottom: 1px solid #BABABA;
  background: #E9EBEE;
}
#logs .logList .flex-table .logCol {
  width: auto;
}

/********* export ***************************/
#export {
  padding-bottom: 20px;
}
#export .exportList > div, #export .exportList > table {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
#export .exportList .changeView > * + * {
  margin-left: 6px;
}
#export .exportList .changeView .searchGroup {
  height: 100%;
}
#export .exportList .changeView .searchGroup [type=checkbox] {
  display: none;
}
#export .exportList .changeView .searchGroup [type=checkbox] + label {
  height: 100%;
  font-size: 0.6em;
  font-weight: 700;
  border: 1px solid #ACACAC;
  border-radius: 4px;
  margin-right: 6px;
  min-width: 7em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  color: #AAA;
}
#export .exportList .changeView .searchGroup [type=checkbox]:checked + label {
  color: #FFF;
  background: #FE2E2E;
}
#export .exportList .changeView .formSwitchStyle {
  width: 165px;
}
#export .exportList .changeView .formSwitchStyle #switch + label {
  height: 23px;
  border: 1px solid #ACACAC;
  max-width: 165px;
  flex: 0 0 165px;
}
#export .exportList .changeView .formSwitchStyle #switch + label .switchText {
  height: 100%;
  font-weight: bold;
  line-height: 2.1;
  font-size: 0.6em;
  background: #5882FA;
}
#export .exportList .changeView .formSwitchStyle #switch + label .switchText:after {
  content: "まとめ出力";
}
#export .exportList .changeView .formSwitchStyle #switch:checked + label .switchText {
  background: #FE2E9A;
}
#export .exportList .changeView .formSwitchStyle #switch:checked + label .switchText:after {
  content: "細分出力";
}/*# sourceMappingURL=style.css.map */