/* static/css/pages/home.css */

/* Hero Section */
.hero-video-only { height: 90vh; max-height: 900px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bg-video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.particles{ position:absolute; inset:0; opacity:.5; }

/* Hero Text Overlay */
.hero-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 10;
  text-shadow: 0 4px 12px rgba(0,0,0,0.7);
  transition: opacity 1.5s ease-in-out;
  width: 100%; /* 親要素の幅いっぱいに広げる */
}

.hero-text-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-text-overlay .main-title {
  font-size: clamp(1.8rem, 8vw, 4rem); /* 画面幅に応じてサイズを調整 */
  font-weight: 900;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap; /* 改行を防ぐ */
}

.hero-text-overlay .sub-title {
  font-size: clamp(0.9rem, 4vw, 1.8rem); /* 画面幅に応じてサイズを調整 */
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.9;
  white-space: nowrap; /* 改行を防ぐ */
}

/* Scroll Animation */
.scroll-indicator {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) scale(2.2);
  width: 40px;
  height: 40px;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-indicator.is-enlarged {
  transform: translateX(-50%) scale(3.0);
}

.scroll-indicator .arrow {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  opacity: 0;
  animation: scroll-fade 2.5s ease-in-out infinite;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.scroll-indicator .arrow:nth-child(1) { animation-delay: 0s; top: 0; }
.scroll-indicator .arrow:nth-child(2) { animation-delay: 0.2s; top: 10px; }
.scroll-indicator .arrow:nth-child(3) { animation-delay: 0.4s; top: 20px; }

/* ▼▼▼ 修正箇所 ▼▼▼ */
@keyframes scroll-fade {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(45deg) translate(-10px, -10px);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg); /* 中央寄せを維持 */
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(45deg) translate(10px, 10px);
  }
}
/* ▲▲▲ 変更ここまで ▲▲▲ */


/* About Section */
.about-section-v5 { padding-top: 120px; padding-bottom: 120px; overflow: hidden; }
.about-section-v5 .grid.two { align-items: center; }
.about-image-v5 { border-radius: 1.5rem; box-shadow: 0 0 35px -10px var(--accent); overflow: hidden; }
.about-image-v5 img { width: 100%; height: auto; display: block; }
.about-info-v5 { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 981px) { .about-info-v5 { padding-left: 5rem; } }
.about-info-v5 .prose { font-size: 1rem; color: var(--muted); }

/* Responsive */
@media (max-width: 980px) {
  .about-section-v5 .grid.two { grid-template-columns: 1fr; gap: 40px; text-align: center; }
}
@media (max-width: 768px) {
  .hero-video-only { height: 70vh; max-height: 600px; }
  .hero-text-overlay { top: 50%; transform: translate(-50%, -50%); }
  .hero-text-overlay .main-title { font-size: 1.8rem; }
  .hero-text-overlay .sub-title { font-size: 1rem; }
}