/* PC */
@media (min-width: 801px) {
    .div {
        padding: 16px;
        text-align: center;
    }

    body {
        font-family: "メイリオ", Meiryo, sans-serif;
    }

    h2 {
        color: #364e96;
        padding: 0.5em 0;
        border-top: solid 3px #364e96;
        border-bottom: solid 3px #364e96;
        text-align: center;
    }

    .Year {
        color: #000000;
        padding: 0.5em 0;
        border-top: solid 3px #303030;
        border-bottom: solid 3px #303030;
        text-align: center;
    }

    .title {
        text-align: left;
        font-size: 200%;
        font-weight: bold;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 4px;
        margin-bottom: 1px;
        background-color: #309DDD;
        border-bottom: 5px solid #395049;
        color: #334842;
    }

    .back {
        margin-right: 10px;
    }

    .specsheet {
        width: 100%;
        border: 1px solid black;
        border-collapse: collapse;
    }

    .specsheet th {
        width: 41%;
        border: 1px solid black;
    }

    .specsheet td {
        border: 1px solid black;
    }

    .specsheet .minimum {
        background-color: #3875f850;
    }

    .specsheet .recommended {
        background-color: #f76b3850;
    }

    .play {
        text-align: center;
        margin: 5px 0px;
    }

    .newest {
        width: 25%;
        height: 60%;
        display: inline-block;
        text-align: center;
        padding: 0.3em 1em;
        text-decoration: none;
        color: #000000;
        border: solid 2px #3875f8;
        border-radius: 3px;
        transition: .4s;
    }

    .newest:hover {
        background: #3875f8;
        color: white;
    }

    .beta {
        width: 25%;
        height: 60%;
        display: inline-block;
        text-align: center;
        padding: 0.3em 1em;
        text-decoration: none;
        color: #000000;
        border: solid 2px #52f738;
        border-radius: 3px;
        transition: .4s;
        display: none;
    }

    .beta:hover {
        background: #52f738;
        color: white;
    }

    .old {
        width: 25%;
        height: 50%;
        display: inline-block;
        text-align: center;
        padding: 0.3em 1em;
        text-decoration: none;
        color: #000000;
        border: solid 2px #f76b38;
        border-radius: 3px;
        transition: .4s;
    }

    .old:hover {
        background: #f76b38;
        color: white;
    }
}

/* Phone */
@media (max-width: 800px) {
    .div {
        padding: 16px;
        text-align: center;
    }

    footer {
        position: fixed;
        bottom: 0;
    }

    body {
        font-family: "メイリオ", Meiryo, sans-serif;
    }

    .Year {
        color: #364e96;
        padding: 0.5em 0;
        border-top: solid 3px #364e96;
        border-bottom: solid 3px #364e96;
        text-align: center;
    }

    h3 {
        color: #000000;
        padding: 0.5em 0;
        border-top: solid 3px #303030;
        border-bottom: solid 3px #303030;
        text-align: center;
    }

    .title {
        text-align: left;
        font-size: 200%;
        font-weight: bold;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 4px;
        margin-bottom: 1px;
        background-color: #309DDD;
        border-bottom: 5px solid #395049;
        color: #334842;
    }

    .back {
        margin-right: 5px;
    }

    .specsheet {
        width: 100%;
        border: 1px solid black;
        border-collapse: collapse;
    }

    .specsheet th {
        width: 41%;
        border: 1px solid black;
    }

    .specsheet td {
        border: 1px solid black;
    }

    .specsheet .minimum {
        background-color: #3875f850;
    }

    .specsheet .recommended {
        background-color: #f76b3850;
    }

    .play {
        text-align: center;
        margin: 5px 0px;
    }

    .newest {
        width: 45%;
        height: 15%;
        display: inline-block;
        text-align: center;
        padding: 0.3em 1em;
        text-decoration: none;
        color: #000000;
        border: solid 2px #3875f8;
        border-radius: 3px;
        transition: .4s;
    }

    .newest:hover {
        background: #3875f890;
        color: white;
    }

    .beta {
        width: 45%;
        height: 15%;
        display: inline-block;
        text-align: center;
        padding: 0.3em 1em;
        text-decoration: none;
        color: #000000;
        border: solid 2px #52f738;
        border-radius: 3px;
        transition: .4s;
    }

    .beta:hover {
        background: #53f73890;
        color: white;
    }

    .old {
        width: 45%;
        height: 15%;
        display: inline-block;
        text-align: center;
        padding: 0.3em 1em;
        text-decoration: none;
        color: #000000;
        border: solid 2px #f76b38;
        border-radius: 3px;
        transition: .4s;
    }

    .old:hover {
        background: #f76b3890;
        color: white;
    }
}