@charset "utf-8";



/*メインの設定*/

main
{
    position: relative;
    width: 100%;
    min-height: 100vh;
    text-align: center;
}
main .container
{
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 1em 0;
    text-align: center;
}

.sel-box
{
    width: 40em;
    max-width: 98%;
    height: 23em;
    padding: 0.8em;
    margin: 1%;
    display: inline-block;
    color: var(--dark);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    box-sizing: border-box;

    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
    .sel-box:hover
    {
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
        transition: 0.6s;

        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: grayscale(0);
    }
.img-area
{
    width: 100%;
    height: 88%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.sel-box img
{
    width: auto;
    height: 100%;
}


@media screen and (max-width: 480px){
    .sel-box
    {
        height: 60vw;
    }
}