.tm-list {
    display: grid;
    gap: var(--fluid-gp1) var(--fluid-gp2);
    --min-gp1: 15; --max-gp1: 25; --min-gp2: 20; --max-gp2: 60;
}
.tm-list .player {
    position: relative;
    text-align: center;
}
.tm-list .player a {
    pointer-events: none;   /* 個人ページ実装までの間 */
}
.tm-list .player img {
    display: block;
    width: 100%;
    border-radius: 5px;
    box-shadow: var(--fluid-sd1) var(--fluid-sd1) var(--fluid-sd2) 0 rgba(0, 0, 0, .3);
    --min-sd1: 1; --max-sd1: 2; --min-sd2: 3; --max-sd2: 5;
}
.tm-list .player span {
    display: inline-block;    /* リンク範囲を文字上のみにするため */
    margin-top: var(--fluid-mg1);  --min-mg1: 1; --max-mg1: 10;
    font-size: var(--fluid-fs);   --min-fs: 12; --max-fs: 20;
    color: var(--text);
}
.tm-list .player .role {
    position: absolute;
    top: var(--fluid-tp);    --min-tp: 1; --max-tp: 2;
    font-size: var(--fluid-fs);   --min-fs: 12; --max-fs: 20;
    font-weight: 500;
    color: var(--white);
    text-shadow: 1px 1px 2px var(--shadow);
}

/* PC */ @media only screen and (min-width: 1021px) {
.tm-list {
    grid-template-columns: repeat(5, 1fr);
}
.tm-list .player .role {
    left: var(--fluid-PC-lf);     --min-lf: 20; --max-lf: 25;
}
}
/* PC・タブレット */ @media only screen and (min-width: 768px) {
}
/* タブレット */ @media (max-width: 1020.9px) and (min-width: 768px) {
.tm-list {
    grid-template-columns: repeat(4, 1fr);
}
.tm-list .player .role {
    left: var(--fluid-TB-lf);    --min-lf: 20; --max-lf: 25;
}
}
/* タブレット・スマホ */ @media only screen and (max-width: 1020.9px) {
}
/* スマホ */ @media only screen and (max-width: 767.9px) {
.tm-list {
    grid-template-columns: repeat(3, 1fr);
}
.tm-list .player .role {
    left: var(--fluid-SP-lf);     --min-lf: 10; --max-lf: 25;
}
}