/* 対決ブロック全体(.vote)のスタイル */
.vote {
    display: flex;              /* 子要素を横並びにする (Flexbox) */
    justify-content: space-around; /* 左右の要素を両端に、中央の要素を真ん中に配置 */
    align-items: center;        /* 上下の高さを中央で揃える */
    padding-bottom: 1.5rem;     /* 下線との間に余白を作る */
    margin-bottom: 1.5rem;      /* 次の要素との間に余白を作る */
    border-bottom: 1px solid #eee; /* 指示1：薄い線を引く */
}

/* 左右の対決要素のコンテナ */
.vote .left,
.vote .right {
    flex: 1; /* 横幅の比率を1にして、均等にスペースを分け合う */
    text-align: center; /* 中の要素を中央揃えにする */
}

/* 真ん中の「vs」テキスト */
.vote > p {
    font-size: 1.5rem;
    font-weight: bold;
    color: #888;
    margin: 0 1rem; /* 左右の要素との間に余白 */
}

/* --- 以下、内部要素の調整 --- */

.vote img {
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.vote .votes {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.vote button {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background-color: black; 
    color: white;         
}

.vote button:hover {
    background-color: #ddd; 
}