/* ==========================================================================
   タレント一覧（/talents/）「3D のタレントカード」（v1.9.0）

   - talent-v2.css の上に乗せる（.tp-page の色・書体・流れる帯・型抜き写真・BOOKING をそのまま使う）
   - クラス名は ti- で始まる。motion.css の !important の層とぶつけない
   - 一人一枚のカード（本人指示 2026-10-07「3D のタレントカードっぽく」）。マウスに合わせて傾き、
     宇宙・ロゴ・写真・名札が別の奥行き（translateZ）で動く。頭はカードの上の縁から少し飛び出す
   - 写真は人物の枠の上から --ti-show 割を見せ、下は名札の裏に隠す（左右は切らない・エフェクトはかけない）
   - カードの中の大きさはカードの幅と高さ（cqw / cqh）で決める。横長の写真（ユニット）は 2 枚分の幅
   ========================================================================== */

.ti-page {
    --ti-head: 120px;
    --ti-adminbar: 0px;
}
body.admin-bar .ti-page { --ti-adminbar: 32px; }

.ti-title,
.ti-filter__opt,
.ti-card__num,
.ti-card__name,
.ti-card__tags,
.ti-card__ghost {
    font-family: var(--tp-display);
    font-stretch: 125%;
    font-variation-settings: 'wdth' 125;
}


/* --------------------------------------------------------------------------
   最初の画面：宇宙＋TALENTS＋全員のロゴの球体
   -------------------------------------------------------------------------- */
.ti-top {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(var(--ti-head) + var(--ti-adminbar));
    border-bottom: 1px solid var(--tp-faint);
}
.ti-top__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../images/galaxy-bg.svg') center center / cover no-repeat;
    opacity: 0.9;
    pointer-events: none;
}
.ti-top__head {
    position: relative;
    z-index: 2;
    padding-block: clamp(40px, 6vw, 88px) 0;
    pointer-events: none;
}
.ti-title {
    display: flex;
    align-items: flex-start;
    margin: 0;
    font-weight: 800;
    font-size: min(15vw, 216px);
    line-height: 0.8;
    letter-spacing: -0.03em;
    color: var(--tp-fg);
}
.ti-title__count {
    margin-left: 0.14em;
    font-size: 0.26em;
    line-height: 1;
    letter-spacing: 0;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--tp-cyan);
    font-variant-numeric: tabular-nums;
}
.ti-nb { white-space: nowrap; }
.ti-lead {
    max-width: 36em;
    margin: clamp(28px, 3vw, 44px) 0 0;
    font: 500 clamp(16px, 1.4vw, 20px)/1.8 var(--tp-text);
    color: rgba(245, 245, 245, 0.86);
}

/* 全員のロゴの球体（本人案 2026-10-07）
   ロゴは球の上の点に置き、いつも正面を向く。奥のロゴほど薄く、押せない。
   後ろの Ice Cyan の点（canvas）が球の形を見せる。位置は JS（talent-index.js）が毎フレーム書き換える。
   --R … 球の半径（JS が舞台の大きさから決める。JS が無いときは 240px で並べて止める） */
.ti-orbit {
    --R: 240px;
    /* 球の中心の横位置（PC は案内文を避けて少し右へ） */
    --cx: 50%;
    position: relative;
    z-index: 1;
    height: clamp(440px, 66vh, 700px);
    margin-top: clamp(-56px, -3.6vw, -20px);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
.ti-orbit.is-dragging { cursor: grabbing; }
.ti-orbit__dots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ti-orbit__ring {
    position: absolute;
    inset: 0;
    perspective: 1400px;
    perspective-origin: var(--cx) 50%;
}
.ti-orbit__item {
    position: absolute;
    left: var(--cx);
    top: 50%;
    display: block;
    color: var(--tp-fg);
    will-change: transform, opacity;
    -webkit-user-drag: none;
}
.ti-orbit__item.is-back { pointer-events: none; }
.ti-orbit__mark {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    transform: translate(-50%, -50%);
    transition: transform 0.45s var(--tp-ease);
}
/* 横長のロゴは幅、縦に高いロゴ（エンブレム）は高さでそろえる */
.ti-orbit__mark--logo {
    width: min(var(--R) * 0.5, var(--R) * 0.2 * var(--tp-ratio));
    aspect-ratio: var(--tp-ratio);
}
.ti-orbit__mark--logo .tp-cut {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.ti-orbit__mark--logo img { pointer-events: none; }
.ti-orbit__mark--text {
    font-family: var(--tp-display);
    font-stretch: 125%;
    font-variation-settings: 'wdth' 125;
    font-weight: 800;
    font-size: calc(var(--R) * 0.085);
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
/* 触れたとき：少し大きくなり、番号と名前が出る（回転は JS が止める） */
.ti-orbit__cap {
    position: absolute;
    left: 0;
    top: calc(var(--R) * 0.1 + 14px);
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
    font: 600 11px/1 var(--tp-text);
    letter-spacing: 0.22em;
    white-space: nowrap;
    color: var(--tp-fg);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.ti-orbit__cap b {
    font-weight: 600;
    color: var(--tp-cyan);
    font-variant-numeric: tabular-nums;
}
.ti-orbit__item:hover .ti-orbit__mark { transform: translate(-50%, -50%) scale(1.14); }
.ti-orbit__item:hover .ti-orbit__mark--text { color: var(--tp-cyan); }
.ti-orbit__item:hover .ti-orbit__cap { opacity: 1; }

@media (min-width: 1100px) {
    .ti-orbit { --cx: 60%; }
}

/* 舞台の下：左に案内文、右に DRAG TO SPIN */
.ti-orbit__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(24px, 3vw, 44px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    pointer-events: none;
}
.ti-orbit__foot .ti-lead {
    margin: 0;
    pointer-events: auto;
}
.ti-orbit__hint {
    display: flex;
    align-items: center;
    gap: 14px;
    font: 500 11px/1 var(--tp-text);
    letter-spacing: 0.24em;
    color: var(--tp-mute);
}
.ti-orbit__hint::before {
    content: '';
    width: 48px;
    height: 1px;
    background: var(--tp-cyan);
}

/* JS が動かないとき：球にせず、ロゴを並べて止める */
.ti-orbit:not(.is-on) { height: auto; cursor: auto; }
.ti-orbit:not(.is-on) .ti-orbit__dots,
.ti-orbit:not(.is-on) .ti-orbit__hint { display: none; }
.ti-orbit:not(.is-on) .ti-orbit__ring {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px 56px;
    padding: 56px var(--tp-gutter) 40px;
}
.ti-orbit:not(.is-on) .ti-orbit__item,
.ti-orbit:not(.is-on) .ti-orbit__mark { position: relative; left: auto; top: auto; transform: none; }
.ti-orbit:not(.is-on) .ti-orbit__cap { display: none; }
.ti-orbit:not(.is-on) .ti-orbit__foot { position: static; padding-bottom: 40px; }

/* --------------------------------------------------------------------------
   絞り込み（UNIT / SOLO・ジャンル）。ボタンの箱にせず、文字と下線だけ
   -------------------------------------------------------------------------- */
.ti-roster {
    padding-block: clamp(40px, 5vw, 72px) clamp(72px, 9vw, 136px);
}
.ti-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 20px 56px;
    margin-bottom: clamp(36px, 4.4vw, 64px);
}
.ti-filter[hidden] { display: none; }
.ti-filter__group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 24px;
}
.ti-filter__key {
    min-width: 64px;
    font: 500 11px/1 var(--tp-text);
    letter-spacing: 0.24em;
    color: var(--tp-mute);
}
.ti-filter__opt {
    appearance: none;
    margin: 0;
    padding: 6px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tp-mute);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.ti-filter__opt:hover { color: var(--tp-fg); }
.ti-filter__opt[aria-pressed="true"] {
    color: var(--tp-fg);
    border-bottom-color: var(--tp-cyan);
}
.ti-filter__opt:focus-visible,
.ti-empty button:focus-visible {
    outline: 1px solid var(--tp-cyan);
    outline-offset: 6px;
}
.ti-filter__n {
    margin-left: 0.45em;
    font: 500 11px/1 var(--tp-text);
    letter-spacing: 0.04em;
    color: var(--tp-cyan);
    font-variant-numeric: tabular-nums;
}
.ti-filter__status {
    margin: 0 0 0 auto;
    font: 500 12px/1 var(--tp-text);
    letter-spacing: 0.2em;
    color: var(--tp-mute);
    font-variant-numeric: tabular-nums;
}
.ti-filter__status b {
    font-weight: 700;
    color: var(--tp-fg);
}


/* --------------------------------------------------------------------------
   3D のタレントカード
   -------------------------------------------------------------------------- */
.ti-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: clamp(56px, 6vw, 88px) clamp(16px, 1.8vw, 28px);
    margin: 0;
    /* 1 列目のカードの頭が上に飛び出す分 */
    padding: clamp(28px, 3vw, 44px) 0 0;
    list-style: none;
}
.ti-card {
    /* 傾き・光の位置（JS がマウスの位置で書き換える） */
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 30%;
    /* 名札の高さと、写真の下端（名札の裏に 4cqh 入れて切れ目を隠す） */
    --ti-plate: 22cqh;
    --ti-plate-gap: 4cqh;
    --ti-photo-bottom: calc(var(--ti-plate) + var(--ti-plate-gap) - 4cqh);
    --ti-radius: 14px;

    position: relative;
    container-type: size;
    aspect-ratio: 0.68;
}
.ti-card[hidden] { display: none; }
.ti-card--wide {
    grid-column: span 2;
    aspect-ratio: 1.41;
}

.ti-card__link {
    position: absolute;
    inset: 0;
    display: block;
    perspective: 1100px;
    color: var(--tp-fg);
    outline: none;
}
.ti-card__inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.8s var(--tp-ease);
}
.ti-card.is-on .ti-card__inner { transition-duration: 0.2s; }
/* v1.9.4：スマホ（指の画面）は、カードがひとりでに傾く（talent-index.js が毎フレーム角度を書く）。光の照り返しも少し出す */
.ti-card.is-auto .ti-card__inner { transition: none; }
.ti-card.is-auto .ti-card__glare { opacity: 0.55; }

/* カードの面：宇宙＋細い Ice Cyan の縁。光の筋と照り返しは面の上だけ（写真にはかからない） */
.ti-card__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(110, 231, 255, 0.24);
    border-radius: var(--ti-radius);
    background:
        url('../images/galaxy-bg.svg') center 30% / 260% auto no-repeat,
        linear-gradient(180deg, #0B1424 0%, #070B14 100%);
    box-shadow: 0 28px 48px -28px rgba(0, 0, 0, 0.9);
    transition: border-color 0.5s ease, box-shadow 0.8s var(--tp-ease);
}
.ti-card__foil {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(245, 245, 245, 0) 0 13px, rgba(245, 245, 245, 0.035) 13px 14px);
    background-size: 160% 100%;
    background-position: var(--mx) 0;
}
.ti-card__glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(110, 231, 255, 0.34), rgba(110, 231, 255, 0) 52%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.ti-card.is-on .ti-card__glare { opacity: 1; }
.ti-card.is-on .ti-card__face,
.ti-card__link:focus-visible .ti-card__face {
    border-color: rgba(110, 231, 255, 0.6);
    box-shadow: 0 46px 64px -30px rgba(0, 0, 0, 0.95);
}
.ti-card__link:focus-visible .ti-card__face {
    outline: 1px solid var(--tp-cyan);
    outline-offset: 5px;
}

/* ロゴ：名札の上、いちばん手前（本人指示「ロゴが被って見えない」）。
   横長のロゴは名札の中に収まり、縦に高いロゴ（エンブレム）は名札から体の前へはみ出す */
.ti-card__logo {
    /* 手前に出すほど遠近で下へずれるので、読みの行より少し上に置く */
    --ti-logo-bottom: 13.5cqh;
    position: absolute;
    left: 50%;
    bottom: calc(var(--ti-plate-gap) + var(--ti-logo-bottom));
    width: min(66cqw, 19cqh * var(--tp-ratio));
    aspect-ratio: var(--tp-ratio);
    transform: translateX(-50%) translateZ(72px);
    /* 白い服の前でも読めるように、ロゴの文字のまわりだけ影を落とす（写真にはかけない） */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}
.ti-card__logo .tp-cut {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 写真：人物の枠の上から --ti-show 割。幅は人物の枠ごと（左右は切らない）、頭はカードの上の縁から少し出る */
.ti-card__photo {
    --ti-show: 0.78;
    --ti-maxh: calc(100cqh - var(--ti-photo-bottom) + 8cqh);
    position: absolute;
    left: 50%;
    bottom: var(--ti-photo-bottom);
    width: min(86cqw, var(--ti-maxh) * var(--tp-ratio) / var(--ti-show));
    aspect-ratio: calc(var(--tp-ratio) / var(--ti-show));
    transform: translateX(-50%) translateZ(40px);
    pointer-events: none;
}
.ti-card__clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* v1.9.4：写真の下端は、名札の上の縁に向けてフェードで消す（本人指示 2026-10-19「アー写下がフェードなどで枠に収まるように」）。
   写真は名札の裏に 4cqh 入れて切っているが、名札は左右に 5cqw 内側なので、名札の脇に写真の切れ目が見えていた。
   消し始めは写真の下端から 14cqh、消し終わりは名札の上の縁（下端から 4.5cqh。手前に浮かせた分の拡大も見込む）。顔には触れない */
.ti-card__photo {
    -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 4.5cqh, #000 14cqh);
            mask-image: linear-gradient(to top, transparent 0, transparent 4.5cqh, #000 14cqh);
}

/* 顔の大きさをそろえる（tools/face-sync.sh で測った顔の枠を使う）
   --f-h   顔の高さ（画像の高さに対する割合。2 人なら 1 人あたり）  --f-top 顔の上端  --f-cx 顔の中心（横）
   --f-r   画像の横 / 縦   --f-bl / --f-br 人物の枠の左端・右端（画像の幅に対する割合）  --f-bw 人物の枠の幅（画像の高さを 1 として）
   --f-zoom / --f-dy  一人ずつの微調整（投稿メタ _hundred_card_fit。顔の大きさの倍率／顔を下げる量）
   画像の高さ＝顔の高さが --ti-face × --f-zoom になる大きさ（全員の顔の大きさがそろう。本人指示 2026-10-07）。
   顔を横の中央に置き、人物の枠がカードの中に収まる人は、枠がカードからはみ出さないように内側へずらす。
   カードより幅の広い人（腕を広げた写真など）は、カードの左右の縁で切れる（頭は上の縁から出る）。下は名札の裏で切る。 */
.ti-card__photo--face {
    --ti-face: calc(18cqh * var(--f-zoom, 1));
    --ti-face-top: calc(6cqh + var(--f-dy, 0cqh));
    --ti-hd: calc(var(--ti-face) / var(--f-h));
    --ti-wd: calc(var(--ti-hd) * var(--f-r));
    top: -60cqh;
    left: 0;
    right: 0;
    width: auto;
    aspect-ratio: auto;
    overflow: hidden;
    transform: translateZ(40px);
    /* 手前に 40px 浮かせると遠近で約 3.8% 大きく見え、左右がカードの枠から 2cqw ほどはみ出していた。その分だけ左右を切る */
    clip-path: inset(0 1.9cqw);
}
.ti-card__img {
    position: absolute;
    top: calc(60cqh + var(--ti-face-top) - var(--f-top) * var(--ti-hd));
    /* 人物の枠の左端を 0、右端を 100cqw にそろえる位置の間に、顔を中央に置く位置を収める（枠がカードより広くても狭くても効く） */
    left: clamp(
        min(0cqw - var(--f-bl) * var(--ti-wd), 100cqw - var(--f-br) * var(--ti-wd)),
        50cqw - var(--f-cx) * var(--ti-wd),
        max(0cqw - var(--f-bl) * var(--ti-wd), 100cqw - var(--f-br) * var(--ti-wd))
    );
    width: auto;
    max-width: none;
    height: var(--ti-hd);
    filter: none;
}

/* 写真がまだない人：名前を「輪郭・実体・輪郭」で 3 段に重ねる */
.ti-card__ghost {
    position: absolute;
    top: 13cqh;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 800;
    /* 名前の長さに合わせて、カードの幅の 8 割ほどに収める */
    font-size: min(11cqh, 96cqw / var(--len, 6));
    line-height: 0.92;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transform: translateZ(30px);
    pointer-events: none;
}
.ti-card__ghost span {
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(110, 231, 255, 0.7);
}
.ti-card__ghost span:nth-child(2) {
    color: rgba(245, 245, 245, 0.92);
    -webkit-text-stroke: 0;
}

/* 番号と肩書き（四隅） */
.ti-card__num {
    position: absolute;
    top: 3.6cqh;
    left: 7cqw;
    font-weight: 800;
    font-size: min(13cqw, 9cqh);
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--tp-cyan);
    font-variant-numeric: tabular-nums;
    transform: translateZ(56px);
}
.ti-card__role {
    position: absolute;
    top: 4.6cqh;
    right: 7cqw;
    font: 600 10px/1 var(--tp-text);
    letter-spacing: 0.28em;
    color: var(--tp-mute);
    transform: translateZ(30px);
}

/* 名札：写真の下を隠し、いちばん手前に浮く */
.ti-card__plate {
    position: absolute;
    left: 5cqw;
    right: 5cqw;
    bottom: var(--ti-plate-gap);
    height: var(--ti-plate);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.4cqh;
    padding: 0 5cqw 3cqh;
    border-top: 1px solid rgba(110, 231, 255, 0.55);
    border-radius: 0 0 calc(var(--ti-radius) - 6px) calc(var(--ti-radius) - 6px);
    background: rgba(5, 5, 5, 0.96);
    transform: translateZ(56px);
}
.ti-card__name {
    margin: 0;
    min-width: 0;
    font-weight: 800;
    font-size: min(9.5cqw, 6.6cqh);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}
.ti-card.is-on .ti-card__name,
.ti-card__link:focus-visible .ti-card__name { color: var(--tp-cyan); }
.ti-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.ti-card__credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
    font: 500 10px/1.4 var(--tp-text);
    letter-spacing: 0.16em;
    color: var(--tp-mute);
}
.ti-card__credit .tp-arrow {
    width: min(6cqw, 4.2cqh);
    height: min(6cqw, 4.2cqh);
    margin-left: auto;
    color: var(--tp-cyan);
}
.ti-card.is-on .ti-card__credit .tp-arrow,
.ti-card__link:focus-visible .ti-card__credit .tp-arrow { transform: translate(3px, -3px); }
.ti-card__tags {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(245, 245, 245, 0.9);
}
.ti-card__tags > span:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 8px;
    border-radius: 50%;
    background: var(--tp-cyan);
    vertical-align: 0.24em;
}
.ti-card__more { color: var(--tp-cyan); }

/* スクロールで画面に入るとき、カードが配られるように起き上がる（対応ブラウザだけ） */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ti-card {
            animation: ti-deal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }
}
@keyframes ti-deal {
    from { transform: perspective(1100px) rotateX(26deg) translateY(14%); opacity: 0.2; }
    to   { transform: none; opacity: 1; }
}

/* 絞り込みで誰も残らないとき */
.ti-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 28px;
    margin: 0;
    padding-block: 48px;
    border-block: 1px solid var(--tp-faint);
    font: 500 15px/1.8 var(--tp-text);
    color: rgba(245, 245, 245, 0.84);
}
.ti-empty[hidden] { display: none; }
.ti-empty button {
    appearance: none;
    margin: 0;
    padding: 0 0 4px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tp-cyan);
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    color: var(--tp-fg);
}
.ti-empty button:hover { color: var(--tp-cyan); }

/* BOOKING：CTA の行を 2 本（問い合わせ・アカデミー） */
.ti-ctas { grid-column: 5 / -1; }
.ti-ctas .tp-booking__cta + .tp-booking__cta { border-top: 0; }


/* --------------------------------------------------------------------------
   トップの TALENTS：カードを横に並べる（template-parts/sections/members-teaser.php）
   -------------------------------------------------------------------------- */
.ti-home {
    padding-block: clamp(72px, 9vw, 136px) clamp(56px, 7vw, 104px);
    border-top: 1px solid var(--tp-faint);
}
.ti-home__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
}
.ti-home__title {
    display: flex;
    align-items: flex-start;
    gap: 0.16em;
    margin: 0;
    font-family: var(--tp-display);
    font-stretch: 125%;
    font-variation-settings: 'wdth' 125;
    font-weight: 800;
    font-size: min(12vw, 168px);
    line-height: 0.8;
    letter-spacing: -0.03em;
    color: var(--tp-fg);
}
.ti-home__num {
    margin-top: 0.04em;
    font-size: 0.3em;
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--tp-cyan);
    font-variant-numeric: tabular-nums;
}
.ti-home__title .ti-title__count { margin-left: 0; }
.ti-home__lead {
    max-width: 24em;
    margin: 0;
    font: 500 clamp(15px, 1.2vw, 18px)/1.8 var(--tp-text);
    color: rgba(245, 245, 245, 0.86);
}

/* 横に流れるカードの列。上の余白は、カードの頭が飛び出す分 */
.ti-rail {
    --ti-card-w: clamp(220px, 21vw, 300px);
    --ti-gap: clamp(16px, 1.8vw, 28px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: clamp(48px, 5vw, 72px) 0 clamp(28px, 3vw, 40px);
    scroll-snap-type: x proximity;
    scroll-padding-inline: max(var(--tp-gutter), (100% - 1320px) / 2);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
}
.ti-rail::-webkit-scrollbar { display: none; }
.ti-rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}
.ti-rail.is-dragging .ti-card__link { pointer-events: none; }
.ti-rail__track {
    display: flex;
    gap: var(--ti-gap);
    width: max-content;
    margin: 0;
    padding: 0 max(var(--tp-gutter), (100vw - 1320px) / 2);
    list-style: none;
}
.ti-rail .ti-card {
    flex: 0 0 auto;
    width: var(--ti-card-w);
    scroll-snap-align: start;
    animation: none;
}
.ti-rail .ti-card--wide {
    width: calc(var(--ti-card-w) * 2 + var(--ti-gap));
    aspect-ratio: 1.41;
}

/* 下：左右のボタンと進み具合の線、右に ALL TALENTS */
.ti-home__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
}
.ti-rail__ctrl {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ti-rail__btn {
    appearance: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: none;
    border: 1px solid var(--tp-faint);
    border-radius: 0;
    color: var(--tp-cyan);
    cursor: pointer;
    transition: border-color 0.3s ease, opacity 0.3s ease;
}
.ti-rail__btn .tp-arrow {
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
}
.ti-rail__btn--prev .tp-arrow { transform: rotate(-135deg); }
.ti-rail__btn:hover { border-color: var(--tp-cyan); }
.ti-rail__btn:focus-visible {
    outline: 1px solid var(--tp-cyan);
    outline-offset: 4px;
}
.ti-rail__btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.ti-rail__bar {
    position: relative;
    width: clamp(96px, 14vw, 200px);
    height: 1px;
    margin-left: 14px;
    background: var(--tp-faint);
}
.ti-rail__bar i {
    position: absolute;
    inset: 0;
    background: var(--tp-cyan);
    transform-origin: left center;
    transform: scaleX(0.1);
    transition: transform 0.2s linear;
}
.ti-home__all {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--tp-cyan);
    font-family: var(--tp-display);
    font-stretch: 125%;
    font-variation-settings: 'wdth' 125;
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 20px);
    letter-spacing: 0.04em;
    color: var(--tp-fg);
}
.ti-home__all .tp-arrow {
    width: 18px;
    height: 18px;
    color: var(--tp-cyan);
}
.ti-home__all:hover { color: var(--tp-cyan); }
.ti-home__all:hover .tp-arrow { transform: translate(3px, -3px); }

@media (max-width: 767px) {
    .ti-rail { --ti-card-w: 60vw; --ti-gap: 12px; }
    /* 2 枚分の幅のカード（ユニット）は画面の幅に収め、高さはほかのカードとそろえる */
    .ti-rail .ti-card--wide {
        width: calc(100vw - var(--tp-gutter) * 2);
        height: calc(var(--ti-card-w) / 0.68);
        aspect-ratio: auto;
    }
    .ti-home__num { -webkit-text-stroke-width: 1px; }
    .ti-rail__btn { width: 40px; height: 40px; }
}


/* --------------------------------------------------------------------------
   タブレット（3 列）
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
    .ti-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ti-ctas { margin-top: 28px; }
}
@media (max-width: 782px) {
    body.admin-bar .ti-page { --ti-adminbar: 46px; }
}


/* --------------------------------------------------------------------------
   スマホ（2 列）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ti-page { --ti-head: 92px; }
    .ti-title__count { -webkit-text-stroke-width: 1px; }
    /* スマホ：球の舞台（高さ 380px）の下に案内文 */
    .ti-orbit { height: auto; margin-top: 0; padding-top: 380px; }
    .ti-orbit__dots,
    .ti-orbit__ring { bottom: auto; height: 380px; }
    .ti-orbit__foot { position: static; display: block; padding-bottom: 28px; }
    .ti-orbit:not(.is-on) { padding-top: 0; }
    .ti-orbit:not(.is-on) .ti-orbit__ring { height: auto; }
    .ti-orbit__hint { display: none; }
    .ti-orbit:not(.is-on) .ti-orbit__ring { gap: 24px 32px; padding-top: 32px; }
    .ti-filter { gap: 18px; }
    .ti-filter__group { gap: 8px 18px; }
    .ti-filter__key { min-width: 0; flex-basis: 100%; }
    .ti-filter__status { margin-left: 0; }

    .ti-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 12px;
        padding-top: 20px;
    }
    .ti-card {
        --ti-plate: 21cqh;
        --ti-radius: 10px;
    }
    .ti-card__plate { gap: 0.8cqh; padding: 0 5cqw 3cqh; }
    .ti-card__logo { --ti-logo-bottom: 10.5cqh; width: min(72cqw, 15cqh * var(--tp-ratio)); }
    .ti-card--wide .ti-card__logo { --ti-logo-bottom: 14cqh; }
    /* v1.9.2：8〜9px では読み仮名が読めなかった */
    .ti-card__role { font-size: 9px; letter-spacing: 0.18em; }
    .ti-card__credit { font-size: 10px; letter-spacing: 0.08em; }
    .ti-card__credit > span + span { display: none; }
    .ti-card__tags { display: none; }
    .ti-card--wide .ti-card__tags { display: flex; font-size: 9.5px; }
    .ti-card__num { -webkit-text-stroke-width: 1px; }
}