@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
.history-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8rem 0; width: 90%; max-width: 1080px; margin: 0 auto; padding: 10rem 0 16rem; }
.history-container .movie-box { width: 48%; }
.history-container .movie-box .movie-ttl { text-align: center; padding: 1rem 0 2rem; margin-bottom: 2rem; border-bottom: 2px solid #a78840; font-size: 2.5rem; line-height: 1.5; }
.history-container .movie-box .movie-ttl .t-mini { font-size: 0.8em; margin: 0 -0.3em; }
.history-container .movie-box .movie-radius { background-color: #fff; border-radius: 10px; overflow: hidden; }
.history-container .movie-box .movie-btn { position: relative; cursor: pointer; transition: filter 0.3s ease-out 0s; }
.history-container .movie-box .movie-btn img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.history-container .movie-box .movie-btn::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background-image: url("../images/history/img-icon-arrow.png"); background-repeat: no-repeat; background-size: 16% auto; background-position: center center; transition: filter 0.3s ease-out 0s; }
.history-container .movie-box .movie-btn:hover { filter: brightness(1.4); }
.history-container .movie-box .movie-btn:hover::after { filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 20px #fff); }
.history-container .movie-box .movie-btn.soon { cursor: auto; }
.history-container .movie-box .movie-btn.soon::after { display: none; }
.history-container .movie-box .movie-btn.soon:hover { filter: none; }
.history-container .movie-box .movie-txt { text-align: left; padding: 1.5rem 1rem 1.5rem; font-size: 2.0rem; line-height: 1.5; color: #777; }
@media screen and (max-width: 960px) { .history-container { gap: 6rem 0; }
  .history-container .movie-box { width: 48%; }
  .history-container .movie-box .movie-ttl { font-size: 1.8rem; }
  .history-container .movie-box .movie-txt { font-size: 1.2rem; } }
@media screen and (max-width: 768px) { .history-container { padding: 6rem 0 10rem; }
  .history-container .movie-box { width: 100%; }
  .history-container .movie-box .movie-ttl { font-size: 2rem; }
  .history-container .movie-box .movie-txt { font-size: 1.4rem; } }
@media screen and (max-width: 480px) { .history-container .movie-box .movie-ttl { font-size: 4.5vw; }
  .history-container .movie-box .movie-txt { font-size: 2.5vw; } }

.modal-video:focus { outline: none; }