@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Oswald&display=swap');
html, body{
    margin: 0;
    padding: 0;
}

#volumsim{
    max-width: 220px;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
}
#volumsim .container{
    border-radius: 11px;
    background-color: rgb(240, 236, 231);
    padding: 10px;
    box-sizing: border-box;
}
#volumsim .container > p{
    font-size: .75rem;
    line-height: 150%;
}

#volumsim .sample-amount{
    display: none;
}
#volumsim .sample-amount.done{
    display: block;
}
#volumsim h1{
    font-size: 1.2rem;
    text-align: center;
    font-weight: normal;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 130%;
    margin: 0;
    color: rgb(71, 48, 18);
}
#volumsim .fields{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
}
#volumsim .fields.wide{
    grid-template-columns: 1fr;
}
#volumsim .fields .row{
    flex-shrink: 1;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
#volumsim .fields .row .caption{
    font-size: .8rem;
    display: block;
    margin-bottom: 5px;
    color: #c01717;
    text-align: center;
}
#volumsim .fields .row .caption::after{
    content: "▼";
    display: block;
    text-align: center;
    font-size: .65rem;
    line-height: 100%;
}

#volumsim .fields .field.radiogroup{
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
#volumsim .fields .field.radiogroup input{
    visibility: hidden;
    position: absolute;
    opacity: 0;
}
#volumsim .fields .field.radiogroup input:checked + label{
    background-color: #c01717;
    color: white;
}

#volumsim .fields .field.radiogroup label{
    font-size: .7rem;
    background-color: white;
    color: black;
    text-align: center;
    line-height: 120%;
    border-radius: 5px;
    padding: 8px 2px;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 1;
    flex-grow: 1;
}
#volumsim .fields .row .field input{
    width: 100%;
    border: 0;
    outline: none;
    padding: .25rem .5rem;
    font-size: 1rem;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    border-radius: 5px;
    background-color: white;
    color: black;
    box-sizing: border-box;
}
#volumsim .fields .row .field input:placeholder-shown{
    background-color: white;
    color: black;
}
#volumsim .fields .row .field input{
    background-color: #c01717;
    color: white;
}
#volumsim .fields .row .field input.error{
    background-color: white;
    color: #c01717;
}
#volumsim .fields .row .field input.error::before{
    content: "ERROR";
}
#volumsim .fields .row .field input + .output{
    display: none;
    font-size: .6rem;
    line-height: 120%;
    margin-top: 5px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;    
}
#volumsim .fields .row .field input.error + .output{
    display: block;
}
#volumsim .ninzu .field{
    position: relative;
}
#volumsim .ninzu .field::after{
    content: "人";
    display: none;
    position: absolute;
    bottom: .25rem;
    right: .25rem;
    font-size: .7rem;
}

#volumsim .note{
    margin-top: 1rem;
    font-size: .68rem;
    line-height: 150%;
}
#volumsim .result{
    margin-top: 1rem;
    font-size: .8rem;
    text-align: center;
}
#volumsim .result p{
    margin: 0;
    display: block;
    padding: .3rem;
    line-height: 100%;
    background-color: darkgoldenrod;
    color: white;
    margin-bottom: 10px;
    font-size: .9rem;
    font-family: 'Kosugi Maru', sans-serif;
}
#volumsim .result .num{
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: end;
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
}
#volumsim .result .num::before{
    content: "約";
    font-size: .9rem;
    font-weight: bold;
    line-height: 100%;
    background-color: white;
    padding: 5px 0 5px 5px;
}

#volumsim .result .num::after{
    content: "g";
    font-size: .9rem;
    font-weight: bold;
    line-height: 100%;
    background-color: white;
    padding: 5px 5px 5px 0;
}
#volumsim .result .num b{
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    line-height: 100%;
    font-size: 1.9rem;
    display: inline-block;
    background-color: white;
    padding: 5px;
}



@media screen and (min-width: 300px) {

    #volumsim{
        max-width: none;
        margin: 0 10px;
        margin-top: 20px;
    }
    #volumsim .container{
    }
    #volumsim .container > p{
        margin: 10px;
        line-height: 130%;
        font-size: .9rem;
    }
    #volumsim h1{
        font-weight: bold;
        margin: 15px 0;
    }
    #volumsim h1 br{
        display: none;
    }
    #volumsim .fields{
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 15px;
    }
    #volumsim .fields .field.radiogroup{
        gap: 15px;
    }
    #volumsim .fields .field.radiogroup label{
        flex: 1;
        padding: 15px 2px;
        font-size: .8rem;
        font-weight: bold;
    }
    #volumsim .note{
        margin-top: .25rem;
    }
    #volumsim .result{
        display: flex;
        justify-content: space-between;
        align-items: end;
        text-align: right;
        gap: 5px;
    }
    #volumsim .result p{
        margin: 0;
        padding: 0 0 3px 0;
        flex-grow: 1;
        letter-spacing: 0;
        font-size: .85rem;
        font-weight: bold;
        background-color: transparent;
        color: darkgoldenrod;
    }
    #volumsim .result p::after{
        content: "、";
        display: none;
    }

    #volumsim .result .visual {
        display: block;
        width: 50px;
        height: 36px;
        position: relative;
        margin-bottom: -7px;
        margin-left: 10px;
        background-image: url(../images/osara.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    #volumsim .result .visual .meat{
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 50px;
        height: 36px;
        background-image: url(../images/niku.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    #volumsim .result .visual .meat:nth-of-type(1){ margin-top: -7px; }
    #volumsim .result .visual .meat:nth-of-type(2){ margin-top: -14px; }
    #volumsim .result .visual .meat:nth-of-type(3){ margin-top: -21px; }
    #volumsim .result .visual .meat:nth-of-type(4){ margin-top: -28px; }
    #volumsim .result .visual .meat:nth-of-type(5){ margin-top: -35px; }
}