/* レスポンシブデザインの調整 */
@media (max-width: 1024px) {
    .site-logo {
        font-size: 2em;
    }

    .main-nav {
        gap: 20px;
    }

    #hero h2 {
        font-size: 2.8em;
    }

    #hero p {
        font-size: 1.1em;
    }

    .section-padding {
        padding: 60px 0;
    }

    .section-padding h2 {
        font-size: 2em;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    header .container {
        flex-wrap: wrap;
        /* モバイルでは要素の並び順を変更するために、display: flex; は維持しつつ、
           align-items: center; は必要に応じて調整 */
        justify-content: space-between; /* ロゴと言語/ハンバーガーを両端に寄せる */
    }

    .site-logo {
        flex-basis: auto; /* ロゴが幅いっぱいにならないように調整 */
        text-align: center;
        margin-bottom: 0; /* モバイルでのロゴ下の余白をリセット */
    }

    .language-switcher {
        order: 2; /* モバイルではハンバーガーの隣に */
        margin-left: 0; /* PC用のマージンをリセット */
        padding-left: 0;
        margin-right: 15px; /* ハンバーガーボタンとの隙間 */
    }

    .menu-toggle {
        order: 3; /* ハンバーガーボタンを最後に配置 */
        display: block;
        position: static; /* position: absolute; を static に変更してフロー内に配置 */
        margin-right: 0; /* 余白を調整 */
    }

    .main-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        background-color: rgb(234 235 235);
        position: absolute;
        top: 90px;
        left: 0;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgb(0 0 0 / 0.3);
        order: 4; /* ナビゲーションメニューは最後に配置 */
        flex-basis: 100%; /* メニューは幅いっぱい */
        margin-top: 15px; /* 必要であればメニュー上部に余白 */
    }

    .main-nav.active {
        display: flex; /* アクティブ時に表示 */
    }

    .main-nav li {
        margin: 10px 0;
    }

    .main-nav a {
        padding: 10px 0;
        display: block;
    }

    .main-nav a::after {
        content: none; /* モバイルでは下線を非表示 */
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    #hero {
        padding: 30px 20px;
    }

    #hero h2 {
        font-size: 2.2em;
    }

    #hero p {
        font-size: 1em;
    }

    .game-grid {
        grid-template-columns: 1fr; /* 1列表示 */
    }

    .news-item, .note-item {
        padding: 20px;
    }

    .news-item h3, .note-item h3 {
        font-size: 1.3em;
    }

    .news-item time, .note-item time {
        font-size: 0.8em;
    }

    .back-to-top {
        bottom: 20px;
        right: 20px;
        /* widthとheightも小さくする場合はここで指定 */
    }
    .back-to-top img {
        width: 50px;
        height: 50px;
    }
    
    .game-title {
        font-size: 2.2em;
    }
    .game-info h3, .game-rules h3, .game-resources h3 {
        font-size: 1.5em;
    }
    .game-resources ul {
        flex-direction: column;
    }
    .game-resources .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .language-switcher .lang-button {
        padding: 3px 8px;
        font-size: 0.8em;
    }

    /* ヘッダーの要素間のスペースを調整 */
    header .container {
        /* justify-content: space-between; は維持しつつ、
           要素が密着しないようにpaddingやgapを調整 */
        padding: 0 15px; /* 左右のパディングを少し減らすか調整 */
    }

    /* language-switcher と menu-toggle の間の隙間を明示的に確保 */
    .language-switcher {
        margin-right: 10px; /* ハンバーガーボタンとの隙間を調整 */
        /* 必要に応じて、ボタン自体の幅を調整 */
    }

    .site-logo {
        font-size: 1.8em;
    }

    #hero h2 {
        font-size: 1.8em;
    }

    #hero p {
        font-size: 0.9em;
    }

    .section-padding {
        padding: 40px 0;
    }

    .section-padding h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    /*
    .game-tile img {
        height: 180px;
    }
    */

    .game-tile h3 {
        font-size: 1.2em;
    }
}