html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  /* font-family: "Noto Serif JP", serif; */
  font-family: Arial, "Arial Unicode MS", sans-serif;
  font-size: 1.7vh;
}

#content {
  height: calc(100vh - 1.5rem);
  min-height: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  /* font-family: "Noto Serif JP", serif; */
}

#root{
  width: 100%;
  height: 100%;
}

#rootContainer {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  column-gap: 1vw;
  /* row-gap: 1vh; */
  width: 100%;
  height: 100%;
}

.mainImg,
.mainVideo,
.mainImgVertical,
.mainVideoVertical {
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 2.5rem - 2vmax);
  height: auto;
  object-fit: contain;
  margin-bottom: calc(1vmax - 0.5vh);
}

.workImg,
.workVideo {
  margin-top: 1vmax;
  /* max-width: 100%; */
  max-height: calc(100vh - 2.5rem - 2vmax);
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: calc(1vmax - 0.5vh);
}

.mainVideoVertical {
  max-width: 50%;
  max-height: calc(100vh - 2.5rem - 2vmax);

  height: auto;
  margin-bottom: calc(1vmax - 0.5vh);
}

.mainImgVertical {
  max-height: calc(100vh - 2.5rem - 2vmax);
  margin-bottom: calc(1vmax - 0.5vh);
  /* height: auto; */
}

#footer {
  position: absolute;
  bottom: 0.25vh;
  left: 1vmax;
  z-index: -1;
  font-size: 0.75rem;
  /* color: gray; */
}

@media screen and (max-width: 768px) {
  html,
body {
  /* font-size: 10px; */
  font-size: 1.8vh;
}
  .mainVideoVertical, .mainVideo{
    max-width: 100%;
    height: auto;
  }

  .mainImgVertical{
    max-width: 100%;
    height: auto;
  }
  
}