@charset "UTF-8";
.main {
    flex: 1; /* 余白を埋める */
    display: flex; /* フレックスボックスを使用 */
    padding: 120px 20px 100px 20px; /* ヘッダーの高さ分の余白を上に追加 */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
    align-items: flex-start; /* 上に揃える */
    justify-content: center; /* 左右中央揃え */
    width: 100%;
    }

    /* ページ切り替え用のwindow */
.window {
    position: relative;
    width: 100%;
    max-width: 750px; /* 横幅の最大サイズ */
    height: 450px; /* 高さの固定サイズ */
    background: rgba(255, 255, 255, 0.03); /*グラスモーフィズムを実装*/
    border: 1px solid var(--color-sub); /* 枠線の色をサブカラーに設定 */
    border-radius: 16px; /* 角を丸くする */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* 影を追加 */
    backdrop-filter: blur(10px); /* 背景をぼかす */
    -webkit-backdrop-filter: blur(10px); /* Safari用*/
    overflow: hidden; /* はみ出した要素を隠す */
    padding: 40px; /* 内側の余白を追加 */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
    }

    /* ライトテーマ時のwindowのスタイル */
body.light-theme .window {
    background: rgba(0, 0, 0, 0.05); /* ライトテーマ時の背景色 */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* ライトテーマ時の影 */
    }

.page-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 初期状態では非表示 */
    visibility: hidden; /* 初期状態では非表示 */
    transform: scale(0.95); /* 初期状態では少し縮小 */
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; /* アニメーションの設定 */
    }

.page-section.active {
    opacity: 1; /* 表示 */
    visibility: visible; /* 表示 */
    transform: scale(1); /* 元のサイズに戻す */
    }

.section-content {
    width: 100%;
    text-align: center;
    }