@charset "UTF-8";

/* ---------------------------------------------
	キャラクター紹介ページ
--------------------------------------------- */
@media screen and (min-width: 1420px){
    .content__body{ width: 1400px;}
}
@media screen and (max-width: 1420px){
    .content__body{ width: 96%;}
}
@media screen and (max-width: 768px) {
    .content__body{ margin: 2rem 0.8rem 0 0.8rem;}
}
.character__list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* .character__list.main{
    width: 800px;
    margin: 0 auto;
} */
.character__list li{
    box-shadow: 1px 1px 1em rgba(87,48,23,0.4);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0.8em;
    margin-bottom: 1em;
}
.webp .character__list li { background-image: url("../../img/bg_news.webp");}
.no-webp .character__list li { background-image: url("../../img/bg_news.jpg");}
.character__list.main li{
    width: 24.5%;
}
.character__list.sub li{ width: 24.5%;}
@media screen and (max-width: 1420px) {
    .character__list li{ padding: 1vw;}}
@media screen and (max-width: 1000px) {
    .character__list li{ padding: 2vw;}
    .character__list.main li{ width: 49%;}
    .character__list.sub li{ width: 33%; padding: 1.6vw;}
}
@media screen and (max-width: 768px) {
    .character__list li{ padding: 3vw;}
    .character__list.main li{ width: 100%;}
    .character__list.sub li{ width: 49%; padding: 2.4vw;}
}
.character__list__data__photo{ margin-bottom: 0.8em;}
.character__list__data__name1{
    font-weight: bold;
    font-size: 180%;
    line-height: 1.2;
}
.sub .character__list__data__name1{ font-size: 150%;}
.character__list__data__name1 [data-ruby] {
    position: relative;
}
.character__list__data__name1 [data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -0.5em;
    left: 0;
    /* right: 0; */
    margin: auto;
    font-size: 0.3em;
    width: 8em;
}
.character__list__data__name2{
    font-weight: bold;
    font-size: 110%;
    line-height: 1.2;
    margin-bottom: 0.3em;
    background-color: #f2ee00;
    display: inline-block;
}
.sub .character__list__data__name2{ font-size: 100%;}
.character__list__data__name2 span{ font-size: 80%;}
.character__list__data__intro{
    font-size: 94%;
    line-height: 1.6;
}
.character__list li.none{ opacity: 0; padding: 0; margin-bottom: 0;}
.character__attention{
    font-size: 84%;
    text-align: right;
    margin-top: -2em;
}
@media screen and (max-width: 768px) {
    .character__attention{ margin-top: 0;}
}