@charset "UTF-8";

.member-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: var(--space60);
    row-gap: var(--space100);
}

.member-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "figure eng"
        "jp eng";
    height: 100%;
}

.member-jp {
    --charge: 12px;
    --name: var(--base-font16);
    grid-area: jp;
    display: flex;
    flex-direction: column-reverse;
    background-color: var(--dark-grey);
    color: var(--white);
    letter-spacing: 0.03em;
    padding: var(--base-font16) var(--base-font20);
    min-height: calc(var(--name) * 2 + var(--charge) * 2 + var(--name) * 1.5);
}

.member-link:hover .member-jp {
    opacity: 0.7;
    transition: 0.3s ease-out;
}

.member-name {
    font-size: var(--base-font16);
    line-height: 1.5;
}

.member-figure {
    grid-area: figure;
    overflow: hidden;
}

.member-figure img {
    width: 100%;
    /* height: 100%; */
    aspect-ratio: 3 / 4;
}

.member-link:hover .member-figure img {
    scale: 1.1;
    filter: sepia(0.3);
    transform: rotate(3deg);
    transition: 0.3s ease-out;
  }

.member-eng {
    grid-area: eng;
    writing-mode: vertical-rl;
    font-size: var(--base-font40);
    line-height: 1.2;
}

.member-charge {
    font-size: 12px;
}
/**************************************/
/*  パンくず
/**************************************/
.breadcrumb {
    background: var(--light-grey);
}

@media screen and (max-width: 600px) {
    .member-name {
        font-size: 16px;
    }
}