@charset "utf-8";
/* CSS Document */

#main #root {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  padding: 0;
}

#main #root .MuiTableContainer-root {
  max-width: 100%;
  box-sizing: border-box;
}

#main #root table,
#main #root .MuiTable-root {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  margin-top: 0;
}

#main #root table.MuiTable-root {
  border-top: none !important;
}

#main #root table.MuiTable-root.articleTable {
  border: none;
  border-collapse: collapse;
}

#main #root table.MuiTable-root.articleTable [class*="MuiTableCell"] {
  box-shadow: none !important;
}

#main #root table.MuiTable-root.articleTable th,
#main #root table.MuiTable-root.articleTable td,
#main #root table.MuiTable-root.articleTable [class*="MuiTableCell"] {
  border-left: none !important;
  border-right: none !important;
}

#main #root table.MuiTable-root > thead > tr > th:nth-child(1) {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
}

#main #root table.MuiTable-root > thead > tr > th:nth-child(2) {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

#main #root table.MuiTable-root > thead > tr > th:nth-child(5) {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

#main #root table.MuiTable-root tbody > tr > td:nth-child(2),
#main #root table.MuiTable-root tbody > tr > td:nth-child(5) {
  text-align: center !important;
}

/*
 * サマリー行と詳細行が tbody 上で交互（奇数=サマリー、偶数=Collapse 詳細）になる。
 * グローバル td の border-bottom !important が詳細行にも当たり、閉じたときに二重に見えるため、
 * 文献テーブルでは偶数行の罫線を消し、奇数行の上罫線だけでレコード間を区切る。
 */
#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) td,
#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) th {
  border-top: none !important;
  border-bottom: none !important;
}

#main #root table.MuiTable-root.articleTable tbody tr:nth-child(odd) td,
#main #root table.MuiTable-root.articleTable tbody tr:nth-child(odd) th {
  border-bottom: none !important;
  border-top: 1px solid lightgray !important;
}

#main #root table.MuiTable-root.articleTable tbody tr:first-child td,
#main #root table.MuiTable-root.articleTable tbody tr:first-child th {
  border-top: none !important;
}

#main #root table.MuiTable-root.articleTable tbody tr:last-child td,
#main #root table.MuiTable-root.articleTable tbody tr:last-child th {
  border-bottom: 1px solid lightgray !important;
}

#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root,
#main #root table.MuiTable-root[aria-label="purchases"] {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0;
}

#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root th,
#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root td,
#main #root table.MuiTable-root[aria-label="purchases"] th,
#main #root table.MuiTable-root[aria-label="purchases"] td {
  border: none !important;
  box-shadow: none !important;
}

#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root tbody > tr:not(:last-child) > th,
#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root tbody > tr:not(:last-child) > td,
#main #root table.MuiTable-root[aria-label="purchases"] tbody > tr:not(:last-child) > th,
#main #root table.MuiTable-root[aria-label="purchases"] tbody > tr:not(:last-child) > td {
  box-shadow: inset 0 -1px 0 lightgray !important;
}

#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root tbody > tr:first-child > th,
#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root tbody > tr:first-child > td,
#main #root table.MuiTable-root[aria-label="purchases"] tbody > tr:first-child > th,
#main #root table.MuiTable-root[aria-label="purchases"] tbody > tr:first-child > td {
  box-shadow: inset 0 1px 0 lightgray, inset 0 -1px 0 lightgray !important;
}

#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root tbody > tr:last-child > th,
#main #root table.MuiTable-root.articleTable tbody tr:nth-child(even) table.MuiTable-root tbody > tr:last-child > td,
#main #root table.MuiTable-root[aria-label="purchases"] tbody > tr:last-child > th,
#main #root table.MuiTable-root[aria-label="purchases"] tbody > tr:last-child > td {
  box-shadow: inset 0 -1px 0 lightgray !important;
}

#main #root th,
#main #root td {
  overflow-wrap: break-word;
  word-break: break-word;
}

#main #root img,
#main #root video,
#main #root iframe,
#main #root embed,
#main #root object {
  max-width: 100%;
  height: auto;
}

#main #root pre {
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}
.categoryArea{
  align-items: center;
}

#main #root .configArea {
  width: 100% !important;
  max-width: 100%;
  align-items: flex-end !important;
  text-align: right;
}

#main #root .reactTable {
  width: 100%;
  align-items: flex-end !important;
}

#main #root .reactTable > .articleTable {
  align-self: flex-start;
  margin-right: auto;
}

h2{
  font-size: 20px;
  margin: 0;
  border-left: none;
  font-weight: 500;
}
table {
  border-top:1px solid lightgray!important;
}
th {
  border-bottom:1px solid lightgray!important;
  padding:2px 4px
}
td {
  border-bottom:1px solid lightgray!important;
}
#main #root table a::after {
  content: none !important;
  display: none !important;
}
#main #root table button {
  background-color: transparent;
}

#main #root table button:hover {
  background-color: #e0e0e0;
}

#main #root table .MuiIconButton-root,
#main #root table .MuiIconButton-root:hover {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
}
.pagingNumber{
  align-items: center;
}
#main #root button {
  background-color: #f1f1f1;
  padding: .6em 1.2em;
}
#main #root button:hover {
  background-color: lightblue;
}
a:hover{
  color: inherit;
}
#main #root a:hover {
  color: #535bf2;
  text-decoration: underline;
}

#main #root table.MuiTable-root[aria-label="purchases"] th,
#main #root table.MuiTable-root[aria-label="purchases"] td {
  text-align: left !important;
}

#main #root table.MuiTable-root[aria-label="purchases"] tbody > tr > td:nth-child(2),
#main #root table.MuiTable-root[aria-label="purchases"] tbody > tr > td:nth-child(5) {
  text-align: left !important;
}

/* MuiTable-root 上端は他と同じ色で1本に統一 */
#main #root table.MuiTable-root {
  border-top: none !important;
}

#main #root table.MuiTable-root > thead > tr > th {
  border-top: 1px solid lightgray !important;
  box-shadow: none !important;
}

@media (max-width: 1239px) {
  #main #root .MuiTableContainer-root,
  #main #root .tableContent {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #main #root table.MuiTable-root {
    width: max-content !important;
    min-width: 890px;
    max-width: none !important;
  }

  #main #root .searchArea {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  #main #root .searchArea .inputSelect {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  #main #root .searchArea .inputSelect > div,
  #main #root .searchArea .inputForm,
  #main #root .searchArea .inputForm input,
  #main #root .searchArea .MuiSelect-select,
  #main #root .searchArea .MuiInputBase-root {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #main #root .pagingConfig {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  #main #root .configArea {
    align-items: stretch !important;
    text-align: left;
  }

  #main #root .fieldButtonArea {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #main #root .fieldButtonArea .buttons {
    width: 100%;
  }

}