/* 黒い塊（ブラックホール） */
#black-hole-1, #black-hole-2, #black-hole-3 {
    width: 50px; /* 初期サイズ */
    height: 50px;
    background-color: black;
    border-radius: 50%; /* 球状にする */
    position: fixed; /* 常に画面中央 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* 初期では非表示 */
}

/* 第0ブロック: 黒丸がしばらく表示されるセクション */
#intro-section {
    background-color: transparent;
    height: 50vh;
    position: relative;
}

#progress-section {
    background-color: transparent;
    height: 80vh;
    position: relative;
}

/* 特定セクションのみ背景色を変える */
#expand-section {
    background-color: transparent;
    height: 150vh; /* セクション全体が画面を覆う */
    position: relative;
}

/* transition-sectionで黒背景を作成 */
#transition-section {
    background-color: black; /* 黒い背景 */
    height: 300vh;
    margin: 0 calc(50% - 50vw);
    position: relative;
    padding-top: 10vh;
}

#transition-section p {
    color: white;
}

/* タブレット用 */
@media only screen and (max-width: 1199px) and (min-width: 768px) {
    #transition-section {
        height: 245vh; /* タブレット用の高さ */
    }
}

/* スマホ用 */
@media only screen and (max-width: 767px) {
    #transition-section {
        height: 220vh; /* スマホ用の高さ */
    }
}