@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
#contextmenu {
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 250px;
  height: 80px;
  padding: 1rem;
  border: 1px solid #888;
  border-radius: 8px;
  background-color: #fffefe;
  box-shadow: 5px 5px 15px #333;
}
#contextmenu li {
  cursor: pointer;
  list-style: none;
}
#contextmenu.active {
  animation: appear 2s ease;
}
#contextmenu ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

img {
  width: 100%;
  max-width: 500px;
}

.detail {
  width: 337px;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.794);
  display: grid;
  grid-template:
    "mode     mode     fNumber  fNumber  iso   iso   focalL    focalL" 1fr
    "shutterS shutterS shutterS shutterS WB    WB    exposureC exposureC" 1fr
    "date     date     date     date     date  date  date      date" 30px
    "model    model    model    lens     lens  lens  lens      lens" 30px
    /40px 40px 40px 40px 40px 40px 40px 40px;
  gap: 1px;
  border-radius: 5px;
  margin: 20px auto;
}
.shutterSpeed {
  position: relative;
  background: black;
  color: rgb(218, 218, 218);
  width: 162px;
  height: 50px;
  display: grid;
  border-radius: 5px;
}
.mode,
.fNumber,
.FocalLength,
.whiteBalance,
.iso,
.exposureC {
  position: relative;
  background: black;
  color: rgb(218, 218, 218);
  width: 80px;
  height: 50px;
  display: grid;
  border-radius: 5px;
}
.date,
.model,
.lens {
  position: relative;
  background: black;
  color: rgb(218, 218, 218);
  height: 29px;
  padding-left: 15px;
  border-radius: 5px;
  display: flex;
  justify-content: start;
  align-items: center;
}
.date {
  grid-area: date;
  height: 27px;
  padding-top: 2px;
  font-size: 14px;
  font-weight: bold;
}
.date::before {
  content: "撮影日時：";
  font-weight: normal;
}
.model {
  grid-area: model;
  font-size: 12px;
}
.model::before {
  content: "機種：";
  font-weight: normal;
}
.lens {
  grid-area: lens;
  font-size: 9px;
}
.lens::before {
  content: "レンズ：";
  font-weight: normal;
}
.mode {
  grid-area: mode;
  grid-template:
    "maa" 25px
    "mab" 25px;
}
.maa {
  grid-area: maa;
  position: relative;
}
.maa::before {
  content: "撮影モード";
  position: absolute;
  top: 8px;
  left: 17px;
  font-size: 10px;
}
.mab {
  grid-area: mab;
  padding-left: 32px;
  font-size: 18px;
  font-weight: bold;
}

.shutterSpeed {
  grid-area: shutterS;
  grid-template:
    "ssa" 25px
    "ssb" 25px;
}
.ssa {
  grid-area: ssa;
  position: relative;
}
.ssa::before {
  content: "シャッタースピード";
  position: absolute;
  top: 8px;
  left: 37px;
  font-size: 10px;
}
.ssb {
  grid-area: ssb;
  padding-left: 40px;
  font-size: 18px;
  font-weight: bold;
}
.ssb::after {
  content: "秒";
}
.fNumber {
  grid-area: fNumber;
  grid-template:
    "fna" 25px
    "fnb" 25px;
}
.fna {
  grid-area: fna;
  position: relative;
}
.fna::before {
  content: "絞り";
  position: absolute;
  top: 8px;
  left: 30px;
  font-size: 10px;
}
.fnb {
  grid-area: fnb;
  text-align: center;
  font-weight: bold;
}
.iso {
  grid-area: iso;
  grid-template:
    "isoa" 25px
    "isob" 25px;
}
.isoa {
  grid-area: isoa;
}
.isoa::before {
  content: "ISO";
  position: absolute;
  top: 8px;
  left: 31px;
  font-size: 10px;
}
.isob {
  grid-area: isob;
  position: absolute;
  left: 24px;
  font-weight: bold;
}
.FocalLength {
  grid-area: focalL;
  grid-template:
    "fla" 25px
    "flb" 25px;
}
.fla {
  grid-area: fla;
  position: relative;
}
.fla::before {
  content: "焦点距離";
  position: absolute;
  width: 100%;
  top: 8px;
  left: 21px;
  font-size: 10px;
}
.flb {
  grid-area: flb;
  position: relative;
  padding-left: 14px;
  font-weight: bold;
}
.flb::after {
  content: "mm";
  position: absolute;
  top: 6px;
  font-size: 10px;
}

.whiteBalance {
  grid-area: WB;
  grid-template:
    "wba" 25px
    "wbb" 25px;
}
.wba {
  position: relative;
}
.wba::before {
  content: "ホワイトバランス";
  position: absolute;
  top: 7px;
  left: 10px;
  font-size: 8px;
}
.wbb {
  position: relative;
  font-weight: bold;
  text-align: center;
}
.exposureC {
  grid-area: exposureC;
  grid-template:
    "eca" 25px
    "ecb" 25px;
}
.eca {
  position: relative;
}
.eca::before {
  content: "露出補正";
  position: absolute;
  top: 5px;
  left: 20px;
  font-size: 10px;
}
.ecb {
  position: relative;
  text-align: center;
  font-weight: bold;
}