@charset "UTF-8";
@font-face {
  font-family: "IBM-BIOS";
  src: url("/font/OldSchoolPCFont/Px437_IBM_BIOS.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "IBM-BIOS";
  src: url("/font/OldSchoolPCFont/Px437_IBM_BIOS.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "IBM-BIOS-2y";
  src: url("/font/OldSchoolPCFont/Px437_IBM_BIOS-2y.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "IBM-BIOS-2y";
  src: url("/font/OldSchoolPCFont/Px437_IBM_BIOS-2y.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "PixelMplus10";
  src: url("/font/PixelMplus/PixelMplus10-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "PixelMplus10";
  src: url("/font/PixelMplus/PixelMplus10-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansJP";
  src: url("/font/SourceHanSans/SourceHanSansJP-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansJP";
  src: url("/font/SourceHanSans/SourceHanSansJP-Bold.otf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "NotoSerifJP";
  src: url("/font/Noto_Serif_JP/NotoSerifJP-VariableFont_wght.ttf") format("truetype");
}
* {
  box-sizing: border-box;
}

html {
  font-family: "IBM-BIOS", "PixelMplus10", "メイリオ", "MS Gothic", "ＭＳ 明朝";
  font-size: 25px;
  background-color: black;
  color: #00ff00;
}
html body {
  width: 900px;
  margin: 20px auto;
}
html body h1 {
  text-align: center;
  font-weight: bold;
  font-size: 50px;
}
html body main {
  display: grid;
  grid-template-rows: 510px 230px;
  grid-template-columns: 1fr 510px 230px 1fr;
  grid-template-areas: ". viewer     thumbnail-list ." ". properties properties     .";
  font-family: "IBM-BIOS-2y", "PixelMplus10";
  line-height: 0.8;
  color: #ffffff;
}
html body main #viewer {
  grid-area: viewer;
  border: solid 4px #00ff00;
  border-bottom: none;
}
html body main #viewer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html body main #properties {
  grid-area: properties;
  padding: 15px;
  background-color: #0000ff;
  border: solid 4px #00ff00;
}
html body main #properties table#data-table {
  text-align: left;
  margin-bottom: 15px;
}
html body main #properties table#data-table tr {
  height: 30px;
}
html body main #properties table#data-table tr th {
  font-weight: normal;
  width: 170px;
}
html body main #properties #memo-area {
  font-family: "IBM-BIOS", "PixelMplus10";
}
html body main #properties #memo-area #memo-content {
  font-size: 20px;
  line-height: 1.2;
  font-weight: bold;
}
html body main #properties #memo-area #memo-content p {
  margin: 10px 0;
}
html body main #properties #memo-area #memo-content a {
  text-decoration: none;
  color: #00ffff;
}
html body main #properties #memo-area #memo-content a:hover {
  color: #ffff00;
}
html body main #default-message, html body main #default-name, html body main #default-date, html body main #default-img-path {
  display: none;
}
html body main #thumbnail-list {
  grid-area: thumbnail-list;
  display: flex;
  width: 230px;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #0000ff;
  border: solid 4px #00ff00;
  border-bottom: none;
  border-left: none;
  overflow-y: scroll;
  overflow-x: hidden;
}
html body main #thumbnail-list::-webkit-scrollbar {
  width: 12px;
  background-color: #000000;
  border: solid 1px #000000;
}
html body main #thumbnail-list::-webkit-scrollbar-thumb {
  width: 100%;
  background-color: #ffffff;
  border: solid 1px #000000;
}
html body main #thumbnail-list .item {
  display: block;
  background-color: #000000;
  width: 80px;
  height: 80px;
  margin: 10px;
  border: solid 2px #ff00ff;
  padding: 0;
  border-image-width: 0;
}
html body main #thumbnail-list .item:hover {
  border: solid 2px #ffff00;
}
html body main #thumbnail-list .item img {
  width: 100%;
  margin: 0;
  object-fit: contain;
}
html body main #thumbnail-list .item .name, html body main #thumbnail-list .item .date, html body main #thumbnail-list .item .memo, html body main #thumbnail-list .item .img-path {
  display: none;
}
html body .return {
  text-align: center;
  font-size: 25px;
  margin: 30px;
}
html body .return a {
  text-decoration: none;
  color: #00ff00;
}
html body .return a:hover {
  color: white;
}
html body #credit {
  font-family: "SourceHanSansJP", "メイリオ", "MS Gothic", "ＭＳ 明朝";
  font-size: 23px;
  border: 2px solid #00ff00;
  box-shadow: 0 0 20px #00ff00;
  border-radius: 30px;
  margin-top: 230px;
  padding: 15px 30px;
  text-align: center;
}
html body #credit .space {
  height: 38px;
}
html body #credit h2 {
  font-size: 35px;
  font-weight: bold;
}
html body #credit ul {
  padding: 0;
}
html body #credit ul li {
  list-style: none;
}
html body #credit a {
  text-decoration: none;
  color: #00ffff;
}
html body #credit a:hover {
  color: #ffff00;
}