body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    margin: 0;
    padding: 0; }
.mainvisual img{
    width:100%;
    height: 40vw;
    object-fit: cover;}
.description{
    padding: 2vw;
    font-size:1.8vw;}
.page {
    display: none;
    padding: 2vw;
    background: #fff;
    border-radius: 8px;}
.visible {
    display: block; }
h2 {
    color: #333; }
button {
    padding: 1vw 2vw;
    font-size: 1.5vw;
    margin: auto; }
button#endGame, button#backToSelect, button#startGame{
    display: block;
    width:30vw;}
.counter {
    font-size: 32px;
    margin-top: 10px; }

/* 選手一覧のFlexレイアウト */
.player-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    justify-content: center;
    margin-bottom: 5vw;}
.player-item {
    display: flex;
    flex-direction: column;
    align-items: center; }
.player-item input[type="checkbox"] {
    display: none; }
.player-item label {
    display: flex;
    flex-direction: column;
    width: 18vw;
    cursor: pointer;
    align-items: center;
    text-align: center;
    border: 2px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    transition: border-color 0.3s; }
.player-item label:hover {
    border-color: #888; }
.player-item input[type="checkbox"]:checked + label {
    border-color: #007BFF; }
.player-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 10px; }

/* 試合中の各選手ブロック */
#matchPlayersContainer, #resultContainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}
.match-player {
    display: flex;
    flex-direction: column;
    width: 30%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10vw; }
.match-player img {
    width: 20vw;
    height: 20vw;
    object-fit: cover;}
.match-player .player-info {
    text-align: center;
    margin: 2vw 0 4vw;
    line-height: 2vw;}
.match-player .player-controls button {
    margin: 0 5px; }

@media screen and (max-width:700px){
.mainvisual img{
    height: 100%;}
h2{
    font-size:5vw;}
.description{
    padding: 5vw;
    font-size:3vw;}
.player-item label{
    width: 35vw;}
button {
    padding: 3vw;
    font-size: 4vw;}
button#endGame, button#backToSelect, button#startGame {
    width: 80%;
    margin-bottom: 10vw;}
.match-player{
    width:50%;}
.match-player img {
    width: 40vw;
    height: 40vw;}
.match-player .player-info {
    margin: 5vw 0;
    line-height: 5vw;}
}