.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: -1;
}
   
   
   #rotateLogo {
  transition: transform 0.1s linear;
  width:300px; position:fixed; top:20px; right:20px; z-index:100;
}
    .value-card, .scene-card {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform 0.3s ease;
}
.value-card:hover, .scene-card:hover {
  transform: scale(1.05);
}
.value-card img, .scene-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 5px;
}
.value-card h3, .scene-card h3 {
  font-size: 18px;
  color: #FFD700;
}
.value-card p, .scene-card p {
  font-size: 14px;
  color: #fff;
}
    { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Noto Sans JP', sans-serif; background-color: #000; color: white; line-height: 1.6; }
    .top-bar { position: absolute; top: 0; left: 0; padding: 20px 30px; z-index: 10; }
    .logo { height: 50px; }
    .hero { position: relative; width: 100%; height: 100vh; overflow: hidden; }
    .hero video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
    .hero-text.bottom-copy { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 5; }
    .hero-text.bottom-copy h1 { font-family: 'Orbitron', sans-serif; font-size: 45px; letter-spacing: 4px; color: #fff; }
    .hero-text.bottom-copy p { margin-top: 10px; font-size: 25px; color: #ccc; }

    
    section { padding: 60px 30px; max-width: 1100px; margin: 0 auto; }
    .section-title { font-family: 'Orbitron', sans-serif; font-size: 28px; font-weight: bold; margin-bottom: 20px; text-align: center; border-bottom: 2px solid #fff; display: inline-block; color: #FFD700; }
    .values-grid, .gallery-grid, .team-grid, .faq-grid, .scene-grid, .review-grid, .policy-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
      text-align: center;
    }
    .item-card {
      background-color: rgba(255, 255, 255, 0.05);
      padding: 15px;
      border-radius: 12px;
      text-align: center;
      transition: transform 0.3s ease;
    }
    .item-card:hover { transform: scale(1.05); }
    .item-card img {
      width: 100%;
      border-radius: 10px;
      margin-bottom: 10px;
    }
    .item-card h3 { font-size: 16px; margin: 10px 0 5px; color: #fff; }
    .price { color: #ffd700; font-weight: bold; margin-bottom: 30px; }
    .item-card button {
      background: #fff;
      color: #000;
      border: none;
      padding: 8px 16px;
      border-radius: 20px;
      cursor: pointer;
      font-weight: bold;
      transition: background 0.3s ease;
    }
    .item-card button:hover { background: #ffd700; color: #000; }
    .form-container {
      background: rgba(255,255,255,0.05);
      padding: 20px;
      border-radius: 12px;
    }
    .form-container input, .form-container textarea {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border: none;
      border-radius: 5px;
    }
    .form-container button {
      margin-top: 30px;
      background: #FFD700;
      border: none;
      padding: 10px 20px;
      font-weight: bold;
      cursor: pointer;
    }
    footer {
      text-align: center;
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      margin-top: 60px;
      font-size: 14px;
      color: #888;
    }
    .item-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

   /* 横並びにするためのスタイル */
.event-img-grid {
  display: flex;        /* 横並びにする */
  gap: 20px;            /* 画像の間隔を20pxに設定 */
  justify-content: center; /* 画像を中央に配置 */
  flex-wrap: wrap;      /* 画面幅が小さくなった場合に折り返し */
}

.event-img-grid img {
  max-width: 100%;      /* 画像が親要素の幅を超えないように設定 */
  height: 100px;         /* 高さを自動調整 */
}