/* パララックス背景動画セクション */
.parallax-video-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
}

.parallax-video-section h2 {
    position: relative;
    z-index: 10;
    margin: 0;
    padding: 1rem 0;
    flex-shrink: 0; /* h2のサイズを固定 */
}

.parallax-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1; /* 動画表示領域を3:1のアスペクト比に設定 */
    max-height: 70vh; /* 最大高さを制限 */
    min-height: 250px; /* 最小高さを確保 */
    overflow: hidden;
}

/* YouTube動画を背景として配置 */
#bg-youtube-player {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; /* 表示領域の横幅100% */
    height: 56.25vw; /* 16:9比率で横幅100%に対応する高さ (100vw * 9/16) */
    min-height: 200%; /* パララックス効果のため上下に大きく伸ばす */
    transform: translate(-50%, -50%); /* コンテナの中央に配置 */
    pointer-events: none; /* クリックを無効化 */
    z-index: 1;
    transition: transform 0.05s ease-out; /* より滑らかなパララックス */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .parallax-video-container {
        max-height: 60vh; /* タブレットで最大高さを調整 */
        min-height: 200px; /* 最小高さを調整 */
    }
    
    #bg-youtube-player {
        width: 100%; /* タブレットでも横幅100% */
        height: 56.25vw; /* 16:9比率での高さ */
        min-height: 220%; /* パララックス効果のため上下に大きく伸ばす */
    }
}

@media (max-width: 480px) {
    .parallax-video-container {
        max-height: 50vh; /* モバイルで最大高さを調整 */
        min-height: 150px; /* 最小高さを調整 */
    }
    
    #bg-youtube-player {
        width: 100%; /* モバイルでも横幅100% */
        height: 56.25vw; /* 16:9比率での高さ */
        min-height: 250%; /* パララックス効果のため上下に大きく伸ばす */
    }
}

/* パララックススクロール効果 */
@media (prefers-reduced-motion: no-preference) {
    .parallax-video-container {
        transform: translateZ(0); /* ハードウェアアクセラレーションを有効化 */
    }
}