@charset "UTF-8";

/*
 * BIANCHI JAPAN CUP 2026 RIDERS（固定ページ: japan-cup2026-riders）専用スタイル
 *
 * japan-cup2026.css（LP本体）の後に読み込み、リセット・トークン・Header・Footer・見出しラベル・
 * スクロール表示・ボタン部品はそちらを共用する。記述の約束（命名・単位・モバイルファースト）も LP 本体に従う。
 *
 * 構成: 1.ページタイトル → 2.選手一覧 → 3.選手別の調整 → 4.戻るボタン → 5.レスポンシブ上書き
 *
 * 選手カード内の寸法はデザインどおりカード幅基準のコンテナクエリ単位（cqw）で指定する。
 */

/* =============================================================
   1. ページタイトル
   ============================================================= */
/* h1 の両脇の帯を画面端まで伸ばすため、はみ出しをここで切る */
.p-japanCup2026RidersHero {
    padding: clamp(72px, 11vh, 120px) 0 clamp(40px, 6vw, 72px);
    overflow: hidden;
    text-align: center;
}

.p-japanCup2026RidersHero__eyebrow {
    justify-content: center;
    margin-bottom: 1.125rem;
}

.p-japanCup2026RidersHero__eyebrow::before {
    display: none;
}

.p-japanCup2026RidersHero__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    font-family: var(--jc-en);
    font-weight: 700;
    font-size: clamp(44px, 13vw, 112px);
    line-height: .92;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.p-japanCup2026RidersHero__titleText {
    flex: none;
}

.p-japanCup2026RidersHero__title::before,
.p-japanCup2026RidersHero__title::after {
    content: "";
    flex: 1 1 0;
    min-width: 2.5rem;
    height: 10px;
}

.p-japanCup2026RidersHero__title::before {
    background: linear-gradient(90deg, transparent 0%, var(--jc-celeste) 86%, var(--jc-celeste-bright) 100%);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%);
}

.p-japanCup2026RidersHero__title::after {
    background: linear-gradient(90deg, var(--jc-celeste-bright) 0%, var(--jc-celeste) 14%, transparent 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%);
}

.p-japanCup2026RidersHero__sub {
    margin-top: 1rem;
    font-weight: 700;
    font-size: clamp(18px, 2.3vw, 28px);
    color: var(--jc-white);
}

.p-japanCup2026RidersHero__wordmark {
    display: block;
    width: min(23.75rem, 100% - 5rem);
    margin: clamp(24px, 4vw, 40px) auto 0;
    aspect-ratio: 2220 / 670;
    background: var(--jc-white);
    opacity: .15;
    -webkit-mask: url("../img/LP/japan-cup2026/riders/wordmark.svg") center / contain no-repeat;
    mask: url("../img/LP/japan-cup2026/riders/wordmark.svg") center / contain no-repeat;
}

.p-japanCup2026RidersHero__lead {
    max-width: 88ch;
    margin: 1.375rem auto 0;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 2;
    color: var(--jc-white);
}

/* =============================================================
   2. 選手一覧
   ============================================================= */
.p-japanCup2026Riders {
    padding-bottom: clamp(56px, 7.7vw, 105px);
}

.p-japanCup2026Riders__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 3.4vw, 44px);
}

.p-japanCup2026Riders__item {
    position: relative;
    width: 100%;
    height: min(100vw - 2.75rem, 37.5rem);
    overflow: hidden;
    container-type: inline-size;
    isolation: isolate;
    background: linear-gradient(118deg, rgba(21, 25, 27, .75) 0%, rgba(16, 20, 22, .75) 46%, rgba(10, 12, 13, .75) 100%);
}

/* 写真の切り抜き位置（拡大率と中心のずれ）を選手ごとに --rider-photo-* で受け取る。
   861px 以上はデザインツールの画像枠の計算（cover で敷いた画像を拡大し、中心を枠の %（-x / -y）だけずらし、
   枠の外が見えない範囲で止める）を枠基準の単位で再現する。
   860px 以下はカードが正方形から横長まで変わり、枠の % で縦にずらすと横長ほど顔が上へ押し出されて
   頭が切れるため、縦位置だけは「はみ出した高さのうち上側へ逃がす割合」（-fy。0.5 で上端揃え）で指定する。
   -fy は 375px 幅でデザインと同じ見え方になる値（デザインの -y を同幅のはみ出し量で割ったもの）にする */
.p-japanCup2026Riders__photo {
    --rider-photo-w: calc(max(100cqw, 100cqh * (var(--rider-photo-ratio))) * var(--rider-photo-scale));
    --rider-photo-h: calc(var(--rider-photo-w) / (var(--rider-photo-ratio)));
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: 100%;
    overflow: hidden;
    container-type: size;
    -webkit-mask: linear-gradient(180deg, #000 50%, transparent 100%);
    mask: linear-gradient(180deg, #000 50%, transparent 100%);
}

.p-japanCup2026Riders__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(10, 12, 13, .6) 75%, rgba(10, 12, 13, .95) 100%);
}

.p-japanCup2026Riders__photoImage {
    position: absolute;
    top: calc(50cqh + (var(--rider-photo-h) - 100cqh) * var(--rider-photo-fy));
    left: calc(50cqw + clamp((100cqw - var(--rider-photo-w)) / 2, var(--rider-photo-x) * 1cqw, (var(--rider-photo-w) - 100cqw) / 2));
    width: var(--rider-photo-w);
    max-width: none;
    height: var(--rider-photo-h);
    transform: translate(-50%, -50%);
}

.p-japanCup2026Riders__sign {
    position: absolute;
    bottom: calc(30cqw + 2.75rem);
    left: 5cqw;
    z-index: 6;
    width: 39cqw;
    pointer-events: none;
    filter: brightness(0) invert(1);
}

.p-japanCup2026Riders__mark {
    position: absolute;
    right: -6cqw;
    bottom: -10cqw;
    z-index: 1;
    width: 56cqw;
    height: 56cqw;
    object-fit: contain;
    opacity: .1;
    pointer-events: none;
}

.p-japanCup2026Riders__id {
    position: absolute;
    bottom: 6cqw;
    left: 0;
    z-index: 5;
    max-width: 96cqw;
    padding-left: 5cqw;
}

/* 字間の em はこの要素の文字サイズで確定して子へ継承されるため、テーマ（Bootstrap）の h2 の文字サイズを本文サイズへ戻す */
.p-japanCup2026Riders__name {
    font-family: var(--jc-en);
    font-size: 1rem;
    font-weight: 600;
    line-height: .96;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jc-white);
}

.p-japanCup2026Riders__firstName,
.p-japanCup2026Riders__lastName {
    display: block;
    text-shadow: 0 .4cqw 2cqw rgba(0, 0, 0, .5);
}

.p-japanCup2026Riders__firstName {
    font-size: 10.1cqw;
}

.p-japanCup2026Riders__lastName {
    font-size: 13.5cqw;
}

.p-japanCup2026Riders__band {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    min-width: 38cqw;
    max-width: 96cqw;
    margin: 0.8125rem 0 .2cqw -10.2cqw;
    padding: .7cqw 4cqw .7cqw 10.2cqw;
    background: linear-gradient(90deg, var(--jc-celeste-bright) 0%, var(--jc-celeste) 100%);
    box-shadow: 0 .4cqw 2cqw rgba(0, 0, 0, .35);
    font-family: var(--jc-en);
    font-weight: 500;
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--jc-on-celeste);
    transform: translateY(-2px);
}

.p-japanCup2026Riders__kana {
    position: relative;
    margin-top: 0.375rem;
    font-weight: 700;
    font-size: clamp(11px, 3.2vw, 16.5px);
    line-height: 1;
    letter-spacing: .1em;
    color: var(--jc-white);
    transform: translateY(2px);
}

/* =============================================================
   3. 選手別の調整（写真の切り抜き位置・サインの位置）
   ============================================================= */
.p-japanCup2026Riders__item--borgo {
    --rider-photo-ratio: 598 / 896;
    --rider-photo-scale: 1.0876975607568318;
    --rider-photo-x: -4.384878037841588;
    --rider-photo-fy: 0.2993;
    --rider-photo-y: 18.84815043688605;
}

.p-japanCup2026Riders__item--tiberi {
    --rider-photo-ratio: 597 / 896;
    --rider-photo-scale: 1.0109024437699725;
    --rider-photo-x: -0.5001905042770856;
    --rider-photo-fy: 0.5;
    --rider-photo-y: 29.941030669563585;
}

/* feldhoffer はデザインが 860px 以下で別の横位置を持つ（861px 以上は 5. で上書き） */
.p-japanCup2026Riders__item--feldhoffer {
    --rider-photo-ratio: 597 / 896;
    --rider-photo-scale: 1.0624877831528856;
    --rider-photo-x: -1.3440512459850078;
    --rider-photo-fy: 0.5;
}

.p-japanCup2026Riders__item--valter {
    --rider-photo-ratio: 597 / 896;
    --rider-photo-scale: 1;
    --rider-photo-x: 0;
    --rider-photo-fy: 0.4686;
    --rider-photo-y: 26.179956154164124;
}

.p-japanCup2026Riders__item--borgo .p-japanCup2026Riders__sign {
    bottom: 37cqw;
}

.p-japanCup2026Riders__item--tiberi .p-japanCup2026Riders__sign,
.p-japanCup2026Riders__item--valter .p-japanCup2026Riders__sign {
    right: 5cqw;
    bottom: calc(8.2cqw + 2.9375rem);
    left: auto;
}

/* =============================================================
   4. 戻るボタン（LP の応募ボタンの配色違い）
   ============================================================= */
.p-japanCup2026Riders__back {
    display: flex;
    justify-content: center;
    margin-top: clamp(40px, 5vw, 64px);
}

.p-japanCup2026Riders__backLink {
    width: 100%;
    max-width: 30rem;
    margin-top: 0;
    border-color: rgba(255, 255, 255, .55);
    background: transparent;
}

.p-japanCup2026Riders__backLink .p-japanCup2026__applyIcon {
    background: var(--jc-white);
}

/* =============================================================
   5. レスポンシブ上書き（デザインの max-width:860px の裏返し）
   ============================================================= */
@media (min-width: 861px) {

    .p-japanCup2026RidersHero {
        padding-top: clamp(120px, 15vh, 180px);
    }

    .p-japanCup2026RidersHero__title {
        gap: clamp(16px, 2.2vw, 34px);
        font-size: clamp(54px, 8vw, 108px);
    }

    .p-japanCup2026RidersHero__subBreak {
        display: none;
    }

    .p-japanCup2026RidersHero__wordmark {
        margin-top: clamp(40px, 6vw, 64px);
    }

    .p-japanCup2026Riders__item {
        height: auto;
        min-height: 24.375rem;
        aspect-ratio: 16 / 5.67;
    }

    .p-japanCup2026Riders__photo {
        width: 40%;
        -webkit-mask: linear-gradient(90deg, transparent 0%, #000 10%);
        mask: linear-gradient(90deg, transparent 0%, #000 10%);
    }

    .p-japanCup2026Riders__photo::before {
        content: none;
    }

    .p-japanCup2026Riders__photoImage {
        top: calc(50cqh + clamp((100cqh - var(--rider-photo-h)) / 2, var(--rider-photo-y) * 1cqh, (var(--rider-photo-h) - 100cqh) / 2));
    }

    .p-japanCup2026Riders__sign {
        right: 2cqw;
        bottom: 3cqw;
        left: auto;
        width: 26cqw;
    }

    .p-japanCup2026Riders__mark {
        right: auto;
        bottom: -6cqw;
        left: 1cqw;
        width: 46cqw;
        height: 46cqw;
    }

    .p-japanCup2026Riders__id {
        top: 50%;
        bottom: auto;
        left: 7cqw;
        max-width: 66cqw;
        padding-left: 0;
        transform: translateY(calc(-50% + 1cqw));
    }

    .p-japanCup2026Riders__firstName {
        font-size: 4rem;
    }

    .p-japanCup2026Riders__lastName {
        font-size: 8.4cqw;
    }

    .p-japanCup2026Riders__band {
        max-width: 72cqw;
        margin: 2cqw 0 .2cqw -10.2cqw;
        font-size: 1.6cqw;
        white-space: normal;
        transform: none;
    }

    .p-japanCup2026Riders__kana {
        margin-top: 1.4cqw;
        font-size: 1.125rem;
        transform: none;
    }

    .p-japanCup2026Riders__item--mirror .p-japanCup2026Riders__photo {
        right: auto;
        left: 0;
        -webkit-mask: linear-gradient(90deg, #000 90%, transparent 100%);
        mask: linear-gradient(90deg, #000 90%, transparent 100%);
    }

    .p-japanCup2026Riders__item--mirror .p-japanCup2026Riders__mark {
        right: 1cqw;
        left: auto;
    }

    .p-japanCup2026Riders__item--mirror .p-japanCup2026Riders__id {
        left: calc(50% + 1.875rem);
        max-width: 44cqw;
    }

    /* 帯だけはカード右端まで伸ばす */
    .p-japanCup2026Riders__item--mirror .p-japanCup2026Riders__band {
        max-width: none;
        margin-right: -50cqw;
        margin-left: -1.875rem;
        padding-right: 50cqw;
        padding-left: 1.875rem;
    }

    .p-japanCup2026Riders__item--mirror .p-japanCup2026Riders__sign {
        right: auto;
        bottom: -.5cqw;
        left: 2cqw;
    }

    .p-japanCup2026Riders__item--borgo .p-japanCup2026Riders__sign,
    .p-japanCup2026Riders__item--valter .p-japanCup2026Riders__sign {
        right: 2cqw;
        bottom: 1cqw;
    }

    .p-japanCup2026Riders__item--valter .p-japanCup2026Riders__id {
        transform: translateY(-50%);
    }

    .p-japanCup2026Riders__item--valter .p-japanCup2026Riders__lastName {
        font-size: 5rem;
    }

    .p-japanCup2026Riders__item--feldhoffer {
        --rider-photo-x: -2.8756108423557194;
        --rider-photo-y: 34.09681869107412;
    }
}