.frame{
    margin: 0 auto 3.2rem;
    background-color: #c0c0c0;
    border-top: 0.5rem solid #fff;
    border-left: 0.5rem solid #fff;
    border-bottom: 0.5rem solid #808080;
    border-right: 0.5rem solid #808080;
}

.info{
    display: grid;
    grid-template-columns: 6.2rem 1fr 6.2rem;
    column-gap: 0.5rem;
    margin: 0.7rem 0.7rem 0;
    padding: 0.5rem;
    border-top: 0.3rem solid #808080;
    border-left: 0.3rem solid #808080;
    border-bottom: 0.3rem solid #fff;
    border-right: 0.3rem solid #fff;
}

.seg{
    display: grid;
    grid-template-columns: repeat(3, 2rem);
    border-top: 0.1rem solid #808080;
    border-left: 0.1rem solid #808080;
    border-bottom: 0.1rem solid #fff;
    border-right: 0.1rem solid #fff;
    align-self: center;
    height: 3.1rem;
}

.seg span{
    display: block;
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.seg0{
    background-image: url("../images/0.png");
}

.seg1{
    background-image: url("../images/1.png");
}

.seg2{
    background-image: url("../images/2.png");
}

.seg3{
    background-image: url("../images/3.png");
}

.seg4{
    background-image: url("../images/4.png");
}

.seg5{
    background-image: url("../images/5.png");
}

.seg6{
    background-image: url("../images/6.png");
}

.seg7{
    background-image: url("../images/7.png");
}

.seg8{
    background-image: url("../images/8.png");
}

.seg9{
    background-image: url("../images/9.png");
}

.seg_minus{
    background-image: url("../images/minus.png");
}

.reset_button{
    width: 3.5rem;
    aspect-ratio: 1 / 1;
    justify-self: center;
}

.reset_button button{
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    background-color: #c0c0c0;
    border-top: 0.3rem solid #fff;
    border-left: 0.3rem solid #fff;
    border-bottom: 0.3rem solid #404040;
    border-right: 0.3rem solid #404040;
    background-size: 2.5rem;
    background-position: center;
    background-repeat: no-repeat;
    line-height: normal;
}

.normal{
    background-image: url("../images/normal.png");
}

.success{
    background-image: url("../images/success.png");
}

.failed{
    background-image: url("../images/failed.png");
}

/*1023px以下*/
@media screen and (max-width: 1023px){
    .info{
        grid-template-columns: 9.2rem 1fr 9.2rem;
        column-gap: 0.5rem;
    }

    .seg{
        grid-template-columns: repeat(3, 3rem);
        height: 4.55rem;
    }

    .reset_button{
        width: 5.25rem;
        aspect-ratio: 1 / 1;
        justify-self: center;
    }

    .reset_button button{
        background-size: 3.75rem;
    }
}

.board{
    border-spacing: 0;
    margin: 0.7rem;
    border-top: 0.3rem solid #808080;
    border-left: 0.3rem solid #808080;
    border-bottom: 0.3rem solid #fff;
    border-right: 0.3rem solid #fff;
}

.board td{
    width: 2.3rem;
    height: 2.3rem;
    box-sizing: border-box;
    border-top: 0.2rem solid #fff;
    border-left: 0.2rem solid #fff;
    border-bottom: 0.2rem solid #404040;
    border-right: 0.2rem solid #404040;
}

/*1023px以下*/
@media screen and (max-width: 1023px){
    .board td{
        width: 3.2rem;
        height: 3.2rem;
    }
}

.board button{
    width: 100%;
    height: 100%;
    background-color: transparent;
    margin: 0;
    padding: 0;
    border: none;
    line-height: normal;
}

.board td.open{
    font-size: 1.9rem;
    line-height: 1.9rem;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border: 0.1rem dotted #808080;
}

.board td.bomb{
    background-image: url("../images/bomb.png");
    background-size: 1.9rem;
    background-position: center;
    background-repeat: no-repeat;
}

.board td.cross{
    background-image: url("../images/cross.png");
    background-size: 1.9rem;
    background-position: center;
    background-repeat: no-repeat;
}

.board td.flag{
    background-image: url("../images/flag.png");
    background-size: 1.9rem;
    background-position: center;
    background-repeat: no-repeat;
}

.board td.explosion{
    background-color: #f00;
}

.board td.bomb1{
    color: #00f;
}

.board td.bomb8{
    color: #808080;
}