body,
html {
    margin: 0;
    /* マージンを削除 */
    padding: 0;
    /* パディングを削除 */
    width: 100%;
    /* 幅を100%に設定 */
    height: 100%;
    /* 高さを100%に設定 */
    overflow: hidden;
    /* オーバーフローを隠す */
    font-family: 'Roboto', sans-serif;
    /* フォントファミリーを設定 */
    background: transparent;
    /* 背景を透明に設定 */
}

#threeContainer {
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#content {
    background: transparent;
    pointer-events: none;
    z-index: 2;
    position: absolute;
    /* 絶対位置指定 */
    top: 0;
    left: 0;
    display: none;
    /* 初期状態で非表示 */
    overflow: auto;
    display: flex;
    /* フレックスボックスを使用 */
    flex-direction: column;
    /* 縦に並べる */
    width: 100%;
    height: 100%;
    scrollbar-width: none;
}

.sub_content {
    background: rgba(255, 255, 255, 0.8);
    /* 背景を追加して視認性を向上 */
    pointer-events: auto;
    display: inline-block;
    /* コンテンツがある部分のみ表示 */

}

.sub_content::before {
    content: "";
    position: absolute;
    /* 位置を絶対指定 */
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    pointer-events: none;
    /* マージン部分のポインターイベントを無効化 */
}

#control {
    position: absolute;
    /* 絶対位置指定 */
    top: 0;
    /* 上端に配置 */
    left: 0;
    /* 左端に配置 */
    width: 100%;
    /* 幅を100%に設定 */
    height: 100%;
    /* 高さを100%に設定 */
    z-index: 3;
    /* z-indexを3に設定 */
    pointer-events: none;
    /* ポインターイベントを無効化 */
}

#topBar {
    padding: 10px;
    /* パディングを追加 */
    background-color: rgba(66, 145, 98, 0.61);
    /* 背景を半透明の黒に */
    color: rgb(222, 226, 235);
    /* テキスト色を白に */
    pointer-events: auto;
    /* ポインターイベントを有効化 */
    text-align: center;
    /* テキストを中央揃え */
    position: relative;
    /* 相対位置指定 */
}

#explanation {
    position: absolute;
    top: 8%;
    /* 上端から10%の位置 */
    overflow: auto;
    background-color: #f9f9f9;
    /* 背景色を柔らかいグレーに */
    border: 1px solid #ddd;
    /* ボーダーを薄いグレーに */
    border-radius: 8px;
    /* 角を丸く */
    padding: 30px;
    /* パディングを増やす */
    width: 100%;
    /* 幅を少し広げる */
    height: 92%;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 影を追加 */
    z-index: 3;
    transition: all 0.3s ease;
    /* トランジションを追加 */
/* 背景をさらに薄くする */
    background-color: #fcfcfc6b;
}

#backButton {
    position: relative;

    font-size: 18px;
    /* フォントサイズを設定 */
    padding: 20px 30px;
    /* パディングを追加 */
    cursor: pointer;
    /* カーソルをポインターに */
    border-radius: 50px;
    /* 角を丸く */
    background-color: #4caf4fd7;
    /* 背景色を設定 */
    color: white;
    /* テキスト色を白に */
    border: none;
    /* ボーダーを削除 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 影を追加 */
    transition: transform 0.3s;
    /* トランジションを追加 */
    pointer-events: auto;
    /* ポインターイベントを有効化 */
    z-index: 3;
    /* z-indexを3に設定 */
}

#backButton:hover {
    transform: scale(1.1);
    /* ホバー時のスケール効果 */
}

#contentButton {
    position: relative;

    font-size: 18px;
    /* フォントサイズを設定 */
    padding: 20px 30px;
    /* パディングを追加 */
    cursor: pointer;
    /* カーソルをポインターに */
    border-radius: 50px;
    /* 角を丸く */
    background-color: #4CAF50;
    /* 背景色を設定 */
    color: white;
    /* テキスト色を白に */
    border: none;
    /* ボーダーを削除 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 影を追加 */
    transition: transform 0.3s;
    /* トランジションを追加 */
    pointer-events: auto;
    /* ポインターイベントを有効化 */
    z-index: 3;
    /* z-indexを10に設定 */
}

#contentButton:hover {
    transform: scale(1.1);
    /* ホバー時のスケール効果 */
}

#explainButton {
    position: relative;

    font-size: 18px;
    /* フォントサイズを設定 */
    padding: 20px 30px;
    /* パディングを追加 */
    cursor: pointer;
    /* カーソルをポインターに */
    border-radius: 50px;
    /* 角を丸く */
    background-color: #4CAF50;
    /* 背景色を設定 */
    color: white;
    /* テキスト色を白に */
    border: none;
    /* ボーダーを削除 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 影を追加 */
    transition: transform 0.3s;
    /* トランジションを追加 */
    pointer-events: auto;
    /* ポインターイベントを有効化 */
    z-index: 3;
    /* z-indexを10に設定 */
}

#explainButton:hover {
    transform: scale(1.1);
    /* ホバー時のスケール効果 */
}

@media (max-width: 600px) {

    #backButton,
    #contentButton,
    #explainButton {
        font-size: 10px;
        /* フォントサイズを少し小さく */
        padding: 5px 5px;
        /* パディングを調整 */
        border-radius: 40px;
        /* 角を少し小さく */
    }

    #topBar {
        font-size: 10px;
        /* フォントサイズを少し小さく */
    }
}


#startButton {
    position: fixed;
    /* 固定位置指定 */
    top: 50%;
    /* 上端から50%の位置 */
    left: 50%;
    /* 左端から50%の位置 */
    transform: translate(-50%, -50%);
    /* 要素を中央に移動 */
    font-size: 24px;
    /* フォントサイズを設定 */
    padding: 20px 40px;
    /* パディングを追加 */
    cursor: pointer;
    /* カーソルをポインターに */
    border-radius: 30px;
    /* 角を丸く */
    background-color: #4caf4fd7;
    /* 背景色を設定 */
    color: white;
    /* テキスト色を白に */
    border: none;
    /* ボーダーを削除 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 影を追加 */
    transition: transform 0.3s;
    /* トランジションを追加 */
    pointer-events: auto;
    /* ポインターイベントを有効化 */
    z-index: 10;
    /* z-indexを10に設定 */
}

#startButton:hover {
    transform: translate(-50%, -50%) scale(1.1);
    /* ホバー時のスケール効果を中央基準で適用 */
}

* {
    scrollbar-width: thin;
    /* スクロールバーを細く */
    scrollbar-color: rgba(136, 136, 136, 0.5) transparent;
    /* スクロールバーの色を設定 */
}

*::-webkit-scrollbar {
    width: 6px;
    /* スクロールバーの幅を設定 */
    height: 6px;
    /* スクロールバーの高さを設定 */
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.5);
    /* スクロールバーのつまみの色を設定 */
    border-radius: 10px;
    /* つまみの角を丸く */
}

*::-webkit-scrollbar-track {
    background-color: transparent;
    /* スクロールバーのトラックを透明に */
}

@media (hover: none) and (pointer: coarse) {
    * {
        scrollbar-width: none;
        /* Firefoxでスクロールバーを非表示 */
        -ms-overflow-style: none;
        /* IEとEdgeでスクロールバーを非表示 */
    }

    *::-webkit-scrollbar {
        display: none;
        /* Webkitブラウザでスクロールバーを非表示 */
    }
}