
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-768   - デスクトップ（デフォルトのグリッド）
768-less    - スマホ
--------------------------------------------*/
html {
    user-select: none;
    overflow: hidden;
}

/* パソコン */
@media all and (min-width: 950px) {
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: 'Noto Sans JP', sans-serif;
    }

    .softkeyboard {
        display: none;
    }

    a,
    button {
        color: #303134;
        text-decoration: none;
        display: block;
        font-size: 20px;
        border: none;
        text-overflow: ellipsis;
        display: block;
    }
    header {
        background-color: #fafafa;
    }
    .backTo {
        color: #303134;
        display: inline;
        margin-left: 30px;
    }
    .backTo::before{
        content: '< ';
    }
    .notAvailable {
        display: none;
    }
    main {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        background-color: #fafafa;
    }



    .key {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border: 1px solid #303134;
        text-align: center;
        height: 60px;
    }



    .keyboard {
        width: 900px;
        display: grid;
        grid-template-columns: repeat(60, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .div1 {grid-area: 1 / 1 / 2 / 5;}
    .div2 {grid-area: 1 / 5 / 2 / 9;}
    .div3 {grid-area: 1 / 9 / 2 / 13;}
    .div4 {grid-area: 1 / 13 / 2 / 17;}
    .div5 {grid-area: 1 / 17 / 2 / 21;}
    .div6 {grid-area: 1 / 21 / 2 / 25;}
    .div7 {grid-area: 1 / 25 / 2 / 29;}
    .div8 {grid-area: 1 / 29 / 2 / 33;}
    .div9 {grid-area: 1 / 33 / 2 / 37;}
    .div10 {grid-area: 1 / 37 / 2 / 41;}
    .div11 {grid-area: 1 / 41 / 2 / 45;}
    .div12 {grid-area: 1 / 45 / 2 / 49;}
    .div13 {grid-area: 1 / 49 / 2 / 53;}
    .div14 {grid-area: 1 / 53 / 2 / 61;}
    .div15 {grid-area: 2 / 1 / 3 / 7;}
    .div16 {grid-area: 2 / 7 / 3 / 11;}
    .div17 {grid-area: 2 / 11 / 3 / 15;}
    .div18 {grid-area: 2 / 15 / 3 / 19;}
    .div19 {grid-area: 2 / 19 / 3 / 23;}
    .div20 {grid-area: 2 / 23 / 3 / 27;}
    .div21 {grid-area: 2 / 27 / 3 / 31;}
    .div22 {grid-area: 2 / 31 / 3 / 35;}
    .div23 {grid-area: 2 / 35 / 3 / 39;}
    .div24 {grid-area: 2 / 39 / 3 / 43;}
    .div25 {grid-area: 2 / 43 / 3 / 47;}
    .div26 {grid-area: 2 / 47 / 3 / 51;}
    .div27 {grid-area: 2 / 51 / 3 / 55;}
    .div28 {grid-area: 2 / 55 / 3 / 61;}
    .div29 {grid-area: 3 / 1 / 4 / 8;}
    .div30 {grid-area: 3 / 8 / 4 / 12;}
    .div31 {grid-area: 3 / 12 / 4 / 16;}
    .div32 {grid-area: 3 / 16 / 4 / 20;}
    .div33 {grid-area: 3 / 20 / 4 / 24;}
    .div34 {grid-area: 3 / 24 / 4 / 28;}
    .div35 {grid-area: 3 / 28 / 4 / 32;}
    .div36 {grid-area: 3 / 32 / 4 / 36;}
    .div37 {grid-area: 3 / 36 / 4 / 40;}
    .div38 {grid-area: 3 / 40 / 4 / 44;}
    .div39 {grid-area: 3 / 44 / 4 / 48;}
    .div40 {grid-area: 3 / 48 / 4 / 52;}
    .div41 {grid-area: 3 / 52 / 4 / 61;}
    .div42 {grid-area: 4 / 1 / 5 / 10;}
    .div43 {grid-area: 4 / 10 / 5 / 14;}
    .div44 {grid-area: 4 / 14 / 5 / 18;}
    .div45 {grid-area: 4 / 18 / 5 / 22;}
    .div46 {grid-area: 4 / 22 / 5 / 26;}
    .div47 {grid-area: 4 / 26 / 5 / 30;}
    .div48 {grid-area: 4 / 30 / 5 / 34;}
    .div49 {grid-area: 4 / 34 / 5 / 38;}
    .div50 {grid-area: 4 / 38 / 5 / 42;}
    .div51 {grid-area: 4 / 42 / 5 / 46;}
    .div52 {grid-area: 4 / 46 / 5 / 50;}
    .div53 {grid-area: 4 / 50 / 5 / 61;}
    .div54 {grid-area: 5 / 1 / 6 / 6;}
    .div55 {grid-area: 5 / 6 / 6 / 11;}
    .div56 {grid-area: 5 / 11 / 6 / 16;}
    .div57 {grid-area: 5 / 16 / 6 / 41;}
    .div58 {grid-area: 5 / 41 / 6 / 46;}
    .div59 {grid-area: 5 / 46 / 6 / 51;}
    .div60 {grid-area: 5 / 51 / 6 / 56;}
    .div61 {grid-area: 5 / 56 / 6 / 61;}


    .pushed {
        background-color: #f56500;
    }
    .correctType{
        background-color: lightgreen;
    }


    .typingGAME {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        z-index: 200;
        background-color: #fafafa;
        min-height: 150px;
    }

}

/* タブレット */
@media all and (min-width: 500px) and (max-width: 950px) {
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: 'Noto Sans JP', sans-serif;
    }

    .keyboard {
        display: none;
    }

    a,
    button {
        margin: 0;
        color: #303134;
        text-decoration: none;
        display: block;
        width: 100%;
        min-height: 50px;
        padding: 20px;
        font-size: 20px;
        text-align: left;
        border: none;
    }
    header {
        background-color: #fafafa;
        width: 100vw;
        height: 100dvh;
        position: fixed;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .backTo{
        display: none;
    }

    main {
        display: none;
    }


}

 /* スマホ */
@media all and (max-width: 500px) {
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: 'Noto Sans JP', sans-serif;
    }

    .keyboard {
        display: none;
    }
    a,
    button {
        margin: 0;
        color: #303134;
        text-decoration: none;
        display: block;
        width: 100%;
        min-height: 50px;
        padding: 20px;
        font-size: 20px;
        text-align: left;
        border: none;
    }
    header {
        background-color: #fafafa;
        width: 100vw;
        height: 100dvh;
        position: fixed;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .backTo{
        display: none;
    }

    main {
        display: none;
    }
}


.va-c {
    display: flex;
    flex-direction: column;
    align-items: center;
}



.typing-kanji {
    font-family: 'DM Mono', monospace;
    font-size: 30px;
    font-weight: normal;
    max-width: 1000px;
    text-align: center;
}
.typing {
    font-family: 'DM Mono', monospace;
    font-size: 40px;
    font-weight: bold;
    max-width: 1000px;
    text-align: center;
}

.typing-input {
    font-family: 'DM Mono', monospace;
    color: gainsboro;
}

.typing-input-correct {
    font-family: 'DM Mono', monospace;
    color: #303134;
}

.typing-input-error {
    font-family: 'DM Mono', monospace;
    color: #f56500;
}

.typing-input-space {
    font-family: 'DM Mono', monospace;
    display: inline-block;
    border-bottom: 4px solid;
    border-left: 4px solid;
    border-right: 4px solid;
    width: 24px;
    height: 10px;
}
.typing-input-space-jp {
    font-family: 'DM Mono', monospace;
    display: inline-block;
    vertical-align: -40px;
    border-bottom: 4px solid;
    border-left: 4px solid;
    border-right: 4px solid;
    width: 40px;
    height: 10px;
}

.score, .author {
    font-family: 'DM Mono', monospace;
    font-size: 20px;
    font-weight: normal;
    margin: 0 10px;
}
.author {
    font-style: italic;
}

.score::before {
    content: 'SCORE ';
}

