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



#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 {
    display: none;
    position: absolute;
    top: 15%; /* 上端から10%の位置 */
    overflow: auto;
    background-color: #f9f9f9; /* 背景色を柔らかいグレーに */
    border: 1px solid #ddd; /* ボーダーを薄いグレーに */
    border-radius: 8px; /* 角を丸く */
    
    margin: 20px;
    width: 100%; /* 幅を少し広げる */
    height: 80%;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
    z-index: 3;
    transition: all 0.3s ease; /* トランジションを追加 */
}
#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ブラウザでスクロールバーを非表示 */
    }
}