@charset "UTF-8";

video {
  width: 100%;
  aspect-ratio: 924 / 520;
}
.remodal-overlay {
  background-color: rgba(222, 233, 243, .9);
}
.remodal {
  padding: 0;
  background-color: transparent;
}
img {
  width: 100%;
  height: auto;
}
a.remodal-toggle {
  transition: var(--transition);
}
a.remodal-toggle:hover {
  filter: brightness(.5);
}

h3,
.title {
  margin-bottom: 2em;
}
.movie_list {
  list-style-type: decimal;
  margin-left: 2em;
}
blockquote {
  background-color: #f5f5f5;
  margin: 2em auto 4em;
  padding: 2vw;
  font-size: 16px;
}
blockquote li a {
  border-bottom: 1px dashed #ccc;
  line-height: 1.5;
  padding: .5em 0;
}

.row {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2em;
  flex-wrap: wrap;
}
.row .box {
  width: calc(calc(100% - 2em) / 2);
}
.row .box h4 {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 1.5em;
  border: none;
}
.row .box h4 span.name {
  font-size: 14px;
  font-weight: normal;
  margin-top: .5em;
}
.row .box h4 span.filesize {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}
.row .box h4 time {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.remark {
  color: #cc0000;
}

@media screen and (max-width: 768px) {
  .row {
    gap: 1em;
  }
  .row .box {
    width: 100%;
  }
}