@charset "UTF-8";

/* =======================================
voice
======================================= */
#voice {
width: 90%;
max-width: 980px;
margin: 7rem auto 0;
text-align: center;
}

#voice .lead {
margin-top: 3.2rem;
color: #444;
}

.voiceList {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6rem 5%;
margin-top: 5.5rem;
}

.voiceList li {
min-width: 0;
}

.voiceList figure {
width: 200px;
height: 200px;
margin: 0 auto 2rem;
border-radius: 50%;
overflow: hidden;
}

.voiceList figure img {
width: 100%;
height: 100%;
object-fit: cover;
}

.voiceList .scene,
.voiceList .name {
font-size: 1rem;
font-weight: 600;
line-height: 1.6;
}

.voiceList h3 {
color: #8ad7d6;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.45;
}

.voiceList .comment {
margin-top: 1.1rem;
text-align: left;
font-size: 1rem;
font-weight: 600;
}

/* =======================================
#bnrList バナー
======================================= */
#bnrList {
display: flex;
flex-wrap:wrap;
max-width: 1280px;
margin: 5rem auto;
justify-content: center;
}

#bnrList li {
width: 31%;
margin: 0 1%;
}

@media screen and (max-width: 812px) {
#voice {
margin-top: 5rem;
}

.voiceList {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4.5rem 8%;
}

}

@media screen and (max-width: 480px) {
#voice {
width: 86%;
}

#voice .lead {
text-align: left;
}

.voiceList {
grid-template-columns: 1fr;
gap: 4rem;
margin-top: 4rem;
}

.voiceList .comment {
text-align: center;
}

#bnrList li {
width: 48%;
margin-bottom: 1rem;
}

#bnrList li:last-child {
margin-bottom: 0;
}
}