.custom-video-section {
    position: relative;
    max-width: 720px;
    max-height: 1280px;
    width: 100%;
    aspect-ratio: 720 / 1280; /* アスペクト比を維持 */
    margin: 0 auto;           /* ページ全体での中央揃え */
    overflow: hidden;
    display: flex;
    align-items: center;      /* 動画の上下中央揃え */
    justify-content: center;   /* 動画の左右中央揃え */
    background-color: #fff;   /* 必要に応じて背景色を指定 */
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* エリアいっぱいに動画を表示 */
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 20%;           /* 左右に20%のパディング（指示通り） */
    box-sizing: border-box;
    display: flex;
    align-items: center;      /* 画像の上下中央揃え */
    justify-content: center;   /* 画像の左右中央揃え */
    pointer-events: none;     /* 画像越しに動画操作を邪魔しない設定 */
}

.overlay-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;      /* アスペクト比を維持して収める */
}

/* ページ幅が720px以下の時は自動的に幅100%になります（max-width設定による） */