@charset "UTF-8";
/*
Theme Name: tridot
Description: tridot WordPressテーマ
Version: 1.0
Author: shimesu
*/

main {
    color: #FFFFFF;
    /* ハンバーガーメニューの前面に来るのを防止 */
    position: relative; 
    z-index: -1;
}

.mobile_header_logo {
    margin-left: 73px;
}

.content {
    margin: 0 auto;
}

/* Wordpress用 */
#loading {
    display: none;
}

/* ゲーム限定 ---------------------------------------------------------- */

    .game_image {
        object-fit: cover; /* 変倍防止 */
        border-radius: 5px; /* 角丸 */
        background-color:#96C369;
        transition: background-color 0.5s ease;
    }

    .game_image:hover {
        background-color: var(--accent-color);
    }

/* MOBILE SIZE ========================================================================== */

@media (max-width: 767px) {
    .content {
        display: flex;
        gap: 1rem 1rem;
    }

    /* ソートボタン */
    .sort_btn {
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 0.5rem;
    }
    
    .sort_cont {
        position: relative;
        top: -0.25rem;
    }

    .sort_name {
        margin-block-start: 0; /* 余白が勝手に設定されるので削除 */
        font-size: 1rem; /* 文字サイズ */
        margin-bottom: 0.15rem;
    }

    .sort_key {
        width: 5rem;
        display: flex; /* 子要素のレイアウト */
        flex-direction: column;
        flex-wrap: wrap; /* 折り返し */
        gap: 0.4rem 0.5rem; /* 子要素の間隔 */
    }

    .sort_label {
        cursor: pointer; /* カーソルをポインターに */
        height: 1.25rem; /* ボタンの高さ */
    }

    .sort_label input {
        display: none; /* チェックボックスの非表示 */
    }

    .sort_label span {
        display: flex; /* 子要素のレイアウト */
    	justify-content: center; /* 要素の中央揃え */
    	align-items: center; /* 要素を天地中央 */
        text-align: center; /* 文字の中央揃え */
        height: 1.25rem; /* ボタンの高さ */
        width: 5rem; /* ボタンの幅 3分割*/
        padding: 0.25rem; /* ボタン内側の余白 */
        border: none; /* 枠線はなし */
        border-radius: 3px; /* 角丸 */
        font-size: 0.75rem; /* 文字サイズ */
        color: var(--main-color); /* 文字色 */
        background-color: #FFFFFF; /* 背景色 */
    }

    .sort_label input:checked + span {
        background-color: var(--accent-color); /* チェックされたら色変更 */
    }

    /* ソートイメージ */
    .sort_image {
        display: flex; /* 子要素のレイアウト */
        flex-wrap: wrap; /* 折り返し */
        gap: 1rem 1rem; /* 子要素の間隔 */
    }

    .game_box {
        width: calc((100% - 1rem) / 2); /* 幅 */
        height: calc(16rem + 0.5rem + clamp(0.9rem, 5vw, 1rem));
    }

    .game_box .ja_b {
        margin-block-start: 0;
        margin-top: 0.5rem;
        font-size: clamp(0.9rem, 5vw, 1rem);
        line-height: clamp(0.9rem, 5vw, 1rem);
    }

    .game_image {
        width: 100%;
        height: 16rem;
    }

    .game_box:nth-of-type(4) p, .game_box:nth-of-type(5) p {
        letter-spacing: -0.1rem;
    }

}



/* DESKTOP SIZE ============================================================================== */

@media (min-width: 768px) {

    @media (height <= 1080px) {
        .directory {
            margin-top: 7vh;
        }
    }
    /*main*/
    main {
        padding-right: max(var(--content-margin), calc((100% - var(--contentWidth)) / 2)); /* 右端までレイアウト */
        padding-left: max(var(--header-vw) + var(--header-margin), calc((100% - var(--contentWidth)) / 2 + var(--header-vw) + 103px + var(--content-margin)));
        padding-top: 24px;
        padding-bottom: 50px;
    }

    .content {
        display: flex;
        gap: var(--content-margin);
    }

    .sort_btn {
        display: flex;
        flex-direction : column;
        gap: 1rem;
    }
    
    .sort_cont {
        display: flex;
        flex-direction: column;
        gap: 0.3rem 0; /* nameとkeyの間隔 */
    }

    .sort_name {
        min-width: 103px; /* 幅は5文字分 */
        margin-block-start: 0; /* 余白が勝手に設定されるので削除 */
        font-size: 1rem; /* 文字サイズ */
        line-height: 1rem;
    }

    .sort_key {
        display: flex; /* 子要素のレイアウト */
        flex-direction: column;
        gap: 0.4rem; /* 子要素の間隔 */
    }

    .sort_label {
        cursor: pointer; /* カーソルをポインターに */
        height: 1.6rem; /* ボタンの高さ */
    }

    .sort_label input {
        display: none; /* チェックボックスの非表示 */
    }

    .sort_label span {
        display: flex; /* 子要素のレイアウト */
    	justify-content: center; /* 要素の中央揃え */
    	align-items: center; /* 要素を天地中央 */
        text-align: center; /* 文字の中央揃え */
        height: 1.6rem; /* ボタンの高さ */
        padding: 0.25rem; /* ボタン内側の余白 */
        border: none; /* 枠線はなし */
        border-radius: 5px; /* 角丸 */
        font-size: 0.8rem; /* 文字サイズ */
        color: var(--main-color); /* 文字色 */
        background-color: #FFFFFF; /* 背景色 */
    }

    .sort_label input:checked + span {
        background-color: var(--accent-color); /* チェックされたら色変更 */
    }

    /* ソートイメージ */
    .sort_image {
        display: flex; /* 子要素のレイアウト */
        flex-wrap: wrap; /* 折り返し */
        gap: var(--content-margin); /* 子要素の間隔 */
    }   

    .game_box {
        width: calc((100% - (var(--content-margin) * 2)) / 3); /* 幅 */
        overflow: hidden;
    }

    .game_image {
        height: calc((810px - 2px - var(--content-margin) * 2)/ 2); /* 幅 */
    }

    .game_box .ja_b {
        margin-top: 0.5rem;
        font-size: 0.8rem;
        line-height: 0.8rem;
    }
    
}