:root {
    --BackgroundColor: #e5f7c5;
    --MainColor: #006837;
    --SubColor: #3ab54a;
    --TextSubtleColor: #777;
    --SecondaryColor: #ff0004;
}

.MokumaruButton {
    margin: 0 auto;

    padding: 10px 20px;
    background-color: var(--MainColor);
    color: #fff;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;

    font-size: 1.3em;
    font-weight: bold;
    text-align: center;

    width: 70%;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);

    &.Light {
        background-color: #fff;
        color: var(--MainColor);
    }
}

.MokumaruInputWrapper {
    display: flex;
    position: relative;

    &::before {
        content: "名前を入力してね\Aニックネームでもいいよ";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--SubColor);
        
        font-size: 1em;
        font-weight: bold;
        text-align: center;
        line-height: 1.4;
        
        pointer-events: none;
        /* 改行の反映 */
        white-space: pre;

        /* Safari対応 */
        z-index: 2;
    }
}

.MokumaruInputWrapper:has(input:not(:placeholder-shown))::before {
    content: none;
}

input.MokumaruInput {
    position: relative;
    margin: 0 auto;

    padding: 20px 20px;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    border: 2px solid #ccc;

    font-size: 1.2em;
    font-weight: bold;
    text-align: center;

    width: 70%;

    &::placeholder {
        /* Safariではplaceholderに文字列が存在しないと:placeholder-shownが動作しない */
        color: transparent;
    }
}