@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  height: 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* 映画画像枠 共通 */
.houga-img,
.youga-img {
  height: 250px;
  position: relative;
  overflow: hidden;
}
.houga-img img,
.youga-img img {
  display: block;
  height: 250px;
  object-fit: cover;
  width: 100%;
}

/* hover-mask 共通設定 */
.houga-img .hover-mask,
.youga-img .hover-mask {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

/* hover-mask 内テキスト */
.houga-img .hover-mask p,
.youga-img .hover-mask p {
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  animation: poyopoyo 2s ease-out infinite;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.houga-img .hover-mask,
.youga-img .hover-mask {
    opacity: 1;
    background: none; /* 背景ぼかしは消す */
    }
.top-text {
background-color: #000;
 height: 170px; 
 position: relative; 
 animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
 }
.top-text h1 {
  color: #fff;
  text-align: center;
  font-size: 48px;  
  animation: poyoyon2 1s ease-in-out forwards;
}
.text-container {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* 英語・カテゴリ部分 */
.category {
  display: flex;
  align-items: center;
  justify-content: center;
}
.English-text {
  color: #fff;
  text-align: center;
  font-size: 16px;   
}
.Japanese-movie {
  color: #fff;
  font-size: 18px;
  margin-right: 20px;
}
.Western-movie {
  color: #fff;
  font-size: 18px;
  margin-left: 20px;
}


/* PC：hover時のみ表示 */
@media (min-width: 768px) {
  body {
    height: 100vh;
  }

  .houga-img {
    height: 35vh;
  }
  .houga-img img {
    height: 35vh;
  }
  .houga-img .hover-mask p {
    font-size: 80px;
  }

  .youga-img {
    height: 40vh;
  }
  .youga-img img {
    height: 40vh;
  }
  .youga-img .hover-mask p {
    font-size: 80px;
  }

  .houga-img .hover-mask,
  .youga-img .hover-mask {
    background: rgba(0, 0, 0, 0.18);
    opacity: 0;
  }
  .houga-img:hover .hover-mask,
  .youga-img:hover .hover-mask {
    opacity: 1;
  }

/* タイトルエリア */
.top-text {
  background-color: #000;
  height: 25vh;
  position: relative;
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.text-container {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.top-text h1 {
  color: #fff;
  text-align: center;
  font-size: 80px;
  animation: poyoyon2 1s ease-in-out forwards;
}

/* 英語・カテゴリ部分 */
.category {
  display: flex;
  align-items: center;
  justify-content: center;
}
.English-text {
  color: #fff;
  text-align: center;
  font-size: 20px;
}
.Japanese-movie {
  color: #fff;
  font-size: 40px;
  margin-right: 200px;
}
.Western-movie {
  color: #fff;
  font-size: 40px;
  margin-left: 200px;
}
}
/* フッター */
footer {
  background-color: #000;
  height: 30px;
  color: #fff;
  text-align: center;
}

/* アニメーション */
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes poyoyon2 {
  0% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}