.team-profile {
    display: grid;
    position: relative;
    padding: var(--fluid-pd1) var(--fluid-pd2);
    --min-pd1: 10; --max-pd1: 15; --min-pd2: 12; --max-pd2: 20;
}
.team-profile::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-image: var(--bg-logo);
    background-position: center;
    opacity: .1;
}
.team-profile a,
.team-profile div,
.team-profile ul {
    z-index: 2;
}
.tp-logo img {
    width: 100%;
    transition: ease .1s;
}
.tp-logo:hover {
    transform: scale(1.05);
    opacity: 1;
}
.tp-name h1 {
    font-size: var(--fluid-fs);   --min-fs: 16; --max-fs: 32;
    color: var(--white);
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
.tp-en-name p {
    margin-left: var(--fluid-md1);     --min-md1: 3; --max-md1: 4;
    font-size: var(--fluid-fs);       --min-fs: 10; --max-fs: 16;
    color: var(--white);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
.tp-rank {
    margin: auto;
    padding: var(--fluid-pd1) var(--fluid-pd2);
    --min-pd1: 1; --max-pd1: 5; --min-pd2: 8; --max-pd2: 12;
    font-size: var(--fluid-fs);   --min-fs: 10; --max-fs: 15;
    font-weight: 500;
    color: var(--white);
    letter-spacing: .05em;
    border-radius: 20px;
    background: var(--gray);
    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;
}
.tp-rank span {
    font-size: var(--fluid-fs);   --min-fs: 11; --max-fs: 18;
}
.tp-bio ul {
    display: grid;
}
.tp-bio li {
    display: flex;
    font-weight: 500;
    border-radius: 4px;
    background: var(--base);
    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;
}
.tp-bio li i,
.tp-bio li .bio {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--fluid-pd1) 0;   --min-pd1: 2; --max-pd1: 6;
    color: var(--text-highlight);
}
.tp-bio li i {
    width: var(--fluid-wd);       --min-wd: 18; --max-wd: 40;
    font-size: var(--fluid-fs);   --min-fs: 9; --max-fs: 16;
    transform: translateY(.5px);
}
.tp-bio li .bio {
    width: calc(100% - var(--fluid-wd));  --min-wd: 18; --max-wd: 40;
    font-size: var(--fluid-fs);   --min-fs: 10; --max-fs: 18;
}
.tp-sns {
    display: flex;
    justify-content: end;
    gap: var(--fluid-gp1);     --min-gp1: 12; --max-gp1: 20;
    /* アイコンガイドライン 空白の条件注意 */
    background: orange;
}
.tp-sns i {
    font-size: var(--fluid-fs);   --min-fs: 20; --max-fs: 35;    
    /* アイコンガイドライン サイズ条件注意 */
    color: var(--black);
    transition: .1s;
}

.tp-logo {background: khaki;}
.tp-name {background: tomato;}
.tp-en-name {background: moccasin;}
.tp-bio {background: greenyellow;}
.tp-logo, .tp-name, .tp-en-name, .tp-sns, .tp-bio {
    background: none;
}

/* PC */ @media only screen and (min-width: 1021px) {
.team-profile {
    height: var(--fluid-PC-hg);   --min-hg: 110; --max-hg: 130;
    grid-template-columns: 2fr 6fr 5fr 3fr 8fr;
    grid-template-rows: auto 1fr;
    gap: 0 10px;
}
.team-profile::before {
    background-size: 140%;
}
.tp-logo {
    grid-row: 1 / span 2;
}
.tp-name {
    grid-column: 2 / span 2;
}
.tp-en-name {
    grid-column: 2;
    grid-row: 2;
}
.tp-rank {
    grid-column: 4;
    margin-right: 0;
}
.tp-bio {
    grid-column: 5;
    grid-row: 1 / span 2;
    padding-left: var(--fluid-PC-pd1);     --min-pd1: 40; --max-pd1: 100;
}
.tp-bio ul {
    grid-template-columns: 3fr 4fr;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--fluid-PC-gp1) var(--fluid-PC-gp2);
    --min-gp1: 10; --max-gp1: 15; --min-gp2: 15; --max-gp2: 20;
}
.tp-bio li:nth-child(2) {
    grid-row: 2;
}
.tp-bio li:nth-child(3) {
    grid-column: 2;
}
.tp-bio li:last-child {
    grid-column: 2;
    grid-row: 2;
}
.tp-sns {
    grid-column: 3 / span 2;
    grid-row: 2;
    padding-top: var(--fluid-PC-pd1);  --min-pd1: 12; --max-pd1: 15;
}
}
/* PC・タブレット */ @media only screen and (min-width: 768px) {
}
/* タブレット */ @media (max-width: 1020.9px) and (min-width: 768px) {
.team-profile {
    height: var(--fluid-TB-hg);      --min-hg: 145; --max-hg: 160;
    grid-template-columns: 1fr 3fr 1fr 2fr;
    grid-template-rows: auto 1fr auto;
    gap: 0 10px;
}
.team-profile::before {
    background-size: 180%;
}
.tp-logo {
    grid-row: 1 / span 3;
}
.tp-name {
    grid-column: 2 / span 2;
}
.tp-en-name {
    grid-column: 2;
    grid-row: 2;
}
.tp-rank {
    grid-column: 4;
    margin-right: 0;
}
.tp-bio {
    grid-column: 2 / span 3;
    grid-row: 3;
    padding-right: var(--fluid-TB-pd1);   --min-pd1: 140; --max-pd1: 280;
}
.tp-bio ul {
    grid-template-columns: 6fr 7fr 9fr 10fr;
    gap: 15px;
}
.tp-sns {
    grid-column: 3 / span 2;
    grid-row: 2;
    padding-top: var(--fluid-TB-pd1);     --max-pd1: 10; --min-pd1: 15;
}
}
/* タブレット・スマホ */ @media only screen and (max-width: 1020.9px) {
}
/* スマホ */ @media only screen and (max-width: 767.9px) {
.team-profile {
    height: var(--fluid-SP-hg);   --min-hg: 135; --max-hg: 175;
    grid-template-columns: 1fr 2fr 4fr;
    grid-template-rows: auto 1fr 3fr auto;
    gap: 0 5px;
}
.team-profile::before {
    background-size: 160%;
}
.tp-logo {
    grid-row: 1 / span 2;
}
.tp-name {
    grid-column: 2 / span 2;
}
.tp-en-name {
    grid-column: 2 / span 2;
    grid-row: 2;
}
.tp-rank {
    grid-column: 2;
    grid-row: 3;
    margin-left: 0;
}
.tp-bio {
    grid-column: 1 / span 3;
    grid-row: 4;
    padding: 0 var(--fluid-SP-pd1);    --min-pd1: 1; --max-pd1: 140;
}
.tp-bio ul {
    grid-template-columns: 7fr 8fr 8fr 9fr;
    gap: var(--fluid-SP-gp1);      --min-gp1: 8; --max-gp1: 12;
}
.tp-sns {
    grid-column: 3;
    grid-row: 3;
    padding-top: 15px;
}
}