@charset "UTF-8";

/* ==========================================================================
   ゼミ生紹介
   ========================================================================== */

:root {
    /* 専攻領域ごとのテーマカラー（レコードの色・モーダルのアクセントカラーで共通利用） */
    --major-media: var(--color-NUMATA-Green);
    --major-industrial: var(--color-Primary);
    --major-graphic: var(--color-NUMATA-Orange);
    --major-textile: var(--color-NUMATA-LightBlue);
    --major-animation: #D1495B;
    --major-photography: #6A4C93;
    --major-filmmovingimage: #2E8B8B;
    --major-furnitureInteriorarchitecture: #8C6239;
    --major-painting: #C9A227;
    --major-sculpture: #5C6B73;
    --major-graduate: #C2577F;
    --major-default: var(--color-gray);
}

.p-members {
    width: 100%;
    /* 【調整ポイント】ページの高さの最低値。画面の高さ以上にして、フッターはスクロールした時だけ見えるようにする */
    min-height: 100svh;
    margin: var(--section-margin) auto;
}

.p-members__header {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.p-members__lead {
    font-size: var(--font-size-Text-M);
    margin: 0 auto;
}

.p-members__empty {
    text-align: center;
    color: var(--color-gray);
    font-size: var(--font-size-Text-M);
    margin-top: 4em;
}

@media screen and (max-width:767px) {
    .p-members__lead br {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   ジャケットのグリッド
   -------------------------------------------------------------------------- */
/* JS（members.js）から実際のpx値を読み取れるよう、長さとして登録しておく */
@property --jacket-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 180px;
}

@property --member-disc-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 80px;
}

/* ジャケットは横1列に並べ、左右にスクロールできるようにする（展開したジャケットを中央に寄せるため） */
.p-members__grid {
    /* 【調整ポイント】ジャケットの大きさ・拡大率・透過 */
    --jacket-size: clamp(140px, 16vw, 220px);
    /* 通常時のジャケットの大きさ */
    --jacket-hover-scale: 1.3;
    /* ホバー時の拡大率 */
    --jacket-open-scale: 1.3;
    /* クリック（展開）時の拡大率 */
    --jacket-dim-opacity: .35;
    /* 展開中、他のジャケットの不透明度 */
    --records-space: 0px;
    /* 展開時、レコードの円のぶん上下に空ける余白（members.jsが設定する） */

    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(1.5em, 4vw, 3em);
    /* 【調整ポイント】ジャケットの上下の余白 */
    margin-block: clamp(4em, 10svh, 8em);
    /* 左右の余白は、端のジャケットも画面中央まで移動できるようにするため */
    padding: calc(var(--records-space) + 2em) 50%;
    min-height: calc(var(--jacket-size) * max(var(--jacket-hover-scale), var(--jacket-open-scale)) + var(--records-space) * 2 + 4em);
    overflow-x: auto;
    scrollbar-width: none;
    transition: padding .5s ease, min-height .5s ease;
}

.p-members__grid::-webkit-scrollbar {
    display: none;
}

/* マウスのドラッグで左右にスライドできる（members.js） */
.p-members__grid {
    cursor: grab;
}

.p-members__grid.is-dragging,
.p-members__grid.is-dragging * {
    cursor: grabbing;
    user-select: none;
}

.p-member-jacket {
    position: relative;
    flex: 0 0 auto;
    width: var(--jacket-size);
    transition: width .4s ease, margin .4s ease, opacity .4s ease;
}

/* ホバーで大きくなる（幅が変わるので、周りのジャケットは横にずれてスペースが空く） */
.p-members__grid:not(.is-active) .p-member-jacket:hover {
    width: calc(var(--jacket-size) * var(--jacket-hover-scale));
}

/* 展開中：大きいまま、レコードの円のぶん左右にもスペースを空ける（余白はmembers.jsが設定する） */
.p-member-jacket.is-open {
    z-index: 2;
    width: calc(var(--jacket-size) * var(--jacket-open-scale));
    margin-inline: var(--jacket-open-margin, 0px);
}

/* 展開中、他のジャケットは少し透過する */
.p-members__grid.is-active .p-member-jacket:not(.is-open) {
    opacity: var(--jacket-dim-opacity);
}

/* --------------------------------------------------------------------------
   ジャケット本体（◯期）
   -------------------------------------------------------------------------- */
.p-member-jacket__face {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: var(--color-White);
    box-shadow: 0 .5em 1.2em rgba(25, 36, 76, .18);
}

.p-member-jacket__face--green {
    background-color: var(--color-NUMATA-Green);
}

.p-member-jacket__face--orange {
    background-color: var(--color-NUMATA-Orange);
}

.p-member-jacket__face--lightblue {
    background-color: var(--color-NUMATA-LightBlue);
}

/* 「4th」のような表記。文字の大きさはジャケットの幅に合わせて変わる（拡大時も一緒に大きくなる） */
.p-member-jacket__face {
    container-type: inline-size;
}

.p-member-jacket__label {
    /* 【調整ポイント】数字・接尾辞の大きさ、字間 */
    --label-num-size: 48cqw;
    /* 数字の大きさ（ジャケットの幅に対する割合） */
    --label-suffix-size: .35em;
    /* 接尾辞（st/nd/rd/th）の大きさ（数字に対する割合） */
    --label-tracking-tight: -.02em;
    /* 詰める書体の字間（文字が重なるか重ならないか） */
    --label-tracking-wide: 0.07em;
    /* 空ける書体の字間 */

    display: flex;
    align-items: baseline;
    line-height: 1;
    font-size: var(--label-num-size);
    letter-spacing: var(--label-tracking-tight);
}

.p-member-jacket__suffix {
    font-size: var(--label-suffix-size);
}

/* 書体はジャケットの並び順に1〜6を繰り返す（member-list-content.php で番号を付与） */
.p-member-jacket__label--font-1 {
    font-family: "Lobster", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.p-member-jacket__label--font-2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: var(--label-tracking-wide);
}

.p-member-jacket__label--font-3 {
    font-family: "Jost", sans-serif;
    font-weight: 900;
    font-style: italic;
}

.p-member-jacket__label--font-4 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.p-member-jacket__label--font-5 {
    font-family: "Jost", sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: var(--label-tracking-wide);
}

.p-member-jacket__label--font-6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-style: italic;
}

/* 字間を空けると最後の文字の右にも余白が付き中央からずれるため、その分を打ち消す */
.p-member-jacket__label--font-2,
.p-member-jacket__label--font-5 {
    margin-right: calc(var(--label-tracking-wide) * -1);
}

/* --------------------------------------------------------------------------
   レコード（名前）：ジャケットの中心から飛び出し、ジャケットの周りを円形に囲む
   -------------------------------------------------------------------------- */
.p-member-jacket__records {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

:root {
    --member-disc-size: clamp(50px, 8vw, 120px);
    /* 【調整ポイント】レコード(円盤)のサイズ。小さくするほど多くのレコードが重ならず並ぶ */
}

.p-member-record {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--member-disc-size);
    aspect-ratio: 1 / 1;
    margin: calc(var(--member-disc-size) / -2) 0 0 calc(var(--member-disc-size) / -2);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    opacity: 0;
    transform: translate(0, 0) scale(.2);
    transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .6s ease;
    transition-delay: calc(var(--i, 0) * .05s);
}

.p-member-jacket.is-open .p-member-record {
    pointer-events: auto;
    opacity: 1;
    /* 実際の位置（translate）と出てくる動きは members.js が円形に計算して指定する。
       開くときの動きはJSのアニメーションで行うので、CSSのtransformの変化は止めておく（閉じるときは上の指定で中心へ戻る） */
    transition: opacity .3s ease;
}

.p-member-record__disc {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1b1b1b;
    /* 同心円の溝（レコードの質感） */
    background-image: repeating-radial-gradient(circle at center,
            rgba(255, 255, 255, .07) 0,
            rgba(255, 255, 255, .07) 1px,
            transparent 1px,
            transparent 4px);
    box-shadow: 0 .3em .6em rgba(25, 36, 76, .3), inset 0 0 0 1px rgba(255, 255, 255, .08);
    transition: transform .7s ease;
}

/* ホバーで1回転する */
.p-member-record:hover .p-member-record__disc {
    transform: rotate(360deg);
}

/* レコード中央のラベル（専攻領域の色） */
.p-member-record__label {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54%;
    height: 54%;
    border-radius: 50%;
    background-color: var(--major-default);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%);
}

/* 中心の穴（スピンドルホール） */
.p-member-record__hole {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 7%;
    height: 7%;
    border-radius: 50%;
    background-color: #1b1b1b;
    box-shadow: inset 0 .05em .1em rgba(0, 0, 0, .7);
    transform: translate(-50%, -50%);
}

/* 名前：円盤の内側・左半分に沿ってラウンドさせて表示する */
.p-member-record__nametrack {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.p-member-record__nametext {
    font-family: var(--Jp-font);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .04em;
    fill: var(--color-White);
    paint-order: stroke fill;
    stroke: rgba(0, 0, 0, .45);
    stroke-width: 2.5px;
    stroke-linejoin: round;
}

.p-member-record--media .p-member-record__label {
    background-color: var(--major-media);
}

.p-member-record--industrial .p-member-record__label {
    background-color: var(--major-industrial);
}

.p-member-record--graphic .p-member-record__label {
    background-color: var(--major-graphic);
}

.p-member-record--textile .p-member-record__label {
    background-color: var(--major-textile);
}

.p-member-record--animation .p-member-record__label {
    background-color: var(--major-animation);
}

.p-member-record--photography .p-member-record__label {
    background-color: var(--major-photography);
}

.p-member-record--filmmovingimage .p-member-record__label {
    background-color: var(--major-filmmovingimage);
}

.p-member-record--furnitureInteriorarchitecture .p-member-record__label {
    background-color: var(--major-furnitureInteriorarchitecture);
}

.p-member-record--painting .p-member-record__label {
    background-color: var(--major-painting);
}

.p-member-record--sculpture .p-member-record__label {
    background-color: var(--major-sculpture);
}

.p-member-record--graduate .p-member-record__label {
    background-color: var(--major-graduate);
}

/* --------------------------------------------------------------------------
   プロフィールモーダル
   -------------------------------------------------------------------------- */
.c-member-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5em;
    background-color: rgba(25, 36, 76, .75);
    --modal-accent: var(--major-default);
}

.c-member-modal[hidden] {
    display: none;
}

.c-member-modal__panel {
    position: relative;
    width: min(90vw, 560px);
    max-height: 85vh;
    overflow-y: auto;
    padding: clamp(2em, 5vw, 3em);
    background-color: var(--color-White);
    border-radius: 12px;
    border-top: .5em solid var(--modal-accent);
}

.c-member-modal__close {
    position: absolute;
    top: 1em;
    right: 1em;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-gray);
    cursor: pointer;
}

.c-member-modal__major {
    font-size: var(--font-size-Text-S);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--modal-accent);
    margin-bottom: .3em;
}

.c-member-modal__name {
    font-size: var(--font-size-Heading-R);
    font-weight: 700;
    color: var(--color-Primary);
    line-height: 1.3;
}

.c-member-modal__cohorts {
    font-size: var(--font-size-Text-S);
    color: var(--color-gray);
    margin-top: .3em;
    margin-bottom: 1.2em;
}

.c-member-modal__titles {
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin-bottom: 1.2em;
}

.c-member-modal__titles:empty {
    display: none;
}

.c-member-modal__title {
    padding: .6em 0;
    font-size: var(--font-size-Text-R);
    color: var(--color-Primary);
    line-height: 1.5;
}

.c-member-modal__tags {
    display: flex;
    flex-direction: column;
    gap: .8em;
}

.c-member-modal__tag {
    font-size: var(--font-size-Text-R);
    line-height: 1.6;
    color: var(--color-Primary);
}

.c-member-modal__tag-label {
    font-weight: 700;
    color: var(--modal-accent);
    margin-right: .3em;
}

.c-member-modal--media {
    --modal-accent: var(--major-media);
}

.c-member-modal--industrial {
    --modal-accent: var(--major-industrial);
}

.c-member-modal--graphic {
    --modal-accent: var(--major-graphic);
}

.c-member-modal--textile {
    --modal-accent: var(--major-textile);
}

.c-member-modal--animation {
    --modal-accent: var(--major-animation);
}

.c-member-modal--photography {
    --modal-accent: var(--major-photography);
}

.c-member-modal--filmmovingimage {
    --modal-accent: var(--major-filmmovingimage);
}

.c-member-modal--furnitureInteriorarchitecture {
    --modal-accent: var(--major-furnitureInteriorarchitecture);
}

.c-member-modal--painting {
    --modal-accent: var(--major-painting);
}

.c-member-modal--sculpture {
    --modal-accent: var(--major-sculpture);
}

.c-member-modal--graduate {
    --modal-accent: var(--major-graduate);
}

@media screen and (max-width: 767px) {
    .p-members__header {
        width: 100%;
        padding: 0 25px;
    }

    .p-members__grid {
        --jacket-size: clamp(110px, 32vw, 160px);
        gap: 1.2em;
    }

    :root {
        /* 【調整ポイント】スマホでのレコードの大きさ。名前の文字もこの大きさに合わせて拡大される */
        --member-disc-size: clamp(76px, 24vw, 110px);
    }

    .p-member-record__nametext {
        font-size: 12.5px;
        /* レコードの円を100としたときの大きさ（実際の文字の大きさはレコードの大きさに比例） */
    }
}