/* 山平プロフィールページ専用（feature/self-introduction/shinichi-yamahira/index.html）
   他メンバーのプロフィールには影響しないよう .page--profile-yamahira 配下のみ指定

   【About円・写真位置の調整】
   円の枠は固定。中の写真だけ変数で動かす。
   - position-x … 左右（0%=左 / 50%=中央 / 100%=右）※効かせるため width は 100%超推奨
   - position-y … 上下（0%=上 / 50%=中央 / 100%=下）
   - top / left … 写真ボックス自体のずらし（マイナスで上・左）
   - width / height … 拡大（大きいほどズーム。左右移動を効かせるなら 130%〜150%）
*/

.page--profile-yamahira {
    /* ===== ヒーロー（四角）SP：375=top0% width150% left-50% / 767=top0% width150% left-39% ===== */
    --profile-hero-img-yamahira-top-sp: 0%;
    --profile-hero-img-yamahira-left-sp: clamp(-50%, calc(-50% + (100vw - var(--fv-sp-base)) * 11% / 24.5rem), -39%);
    --profile-hero-img-yamahira-width-sp: 150%;
    --profile-hero-img-yamahira-height-sp: 120%;
    --profile-hero-img-yamahira-position-x-sp: 50%;
    --profile-hero-img-yamahira-position-y-sp: 0%;

    /* ===== Aboutアバター（円）SP：375px=top-10% left-17% width150% / 767px=top-15% left-9% width140% ===== */
    --profile-about-avatar-img-yamahira-top-sp: clamp(-15%, calc(-10% + (100vw - var(--fv-sp-base)) * -5% / 24.5rem), -10%);
    --profile-about-avatar-img-yamahira-left-sp: clamp(-17%, calc(-17% + (100vw - var(--fv-sp-base)) * 8% / 24.5rem), -9%);
    --profile-about-avatar-img-yamahira-width-sp: clamp(140%, calc(150% - (100vw - var(--fv-sp-base)) * 10% / 24.5rem), 150%);
    --profile-about-avatar-img-yamahira-height-sp: clamp(140%, calc(150% - (100vw - var(--fv-sp-base)) * 10% / 24.5rem), 150%);
    --profile-about-avatar-img-yamahira-position-x-sp: 64%;
    --profile-about-avatar-img-yamahira-position-y-sp: 0%;

    /* ヒーローキャッチSP：375px=11px / 5px、767px=13px / 3px */
    --profile-hero-catch-yamahira-sp: clamp(11px, calc(11px + (100vw - var(--fv-sp-base)) * 2px / 24.5rem), 13px);
    --profile-hero-catch-padding-top-yamahira-sp: clamp(3px, calc(5px + (100vw - var(--fv-sp-base)) * -2px / 24.5rem), 5px);

    /* ===== ヒーロー（四角）PC：768=1440=width150% left-38% ===== */
    --profile-hero-img-yamahira-top-pc: 0%;
    --profile-hero-img-yamahira-left-pc: -38%;
    --profile-hero-img-yamahira-width-pc: 150%;
    --profile-hero-img-yamahira-height-pc: var(--profile-hero-img-yamahira-height-sp);
    --profile-hero-img-yamahira-position-x-pc: var(--profile-hero-img-yamahira-position-x-sp);
    --profile-hero-img-yamahira-position-y-pc: var(--profile-hero-img-yamahira-position-y-sp);

    /* ===== Aboutアバター（円）PC：768px=top-10% left-12% / 1440px=top-15% left-9% ===== */
    --profile-about-avatar-img-yamahira-top-pc: clamp(-15%, calc(-10% + (100vw - var(--layout-pc-base)) * -5% / var(--layout-pc-span)), -10%);
    --profile-about-avatar-img-yamahira-left-pc: clamp(-12%, calc(-12% + (100vw - var(--layout-pc-base)) * 3% / var(--layout-pc-span)), -9%);
    --profile-about-avatar-img-yamahira-width-pc: var(--profile-about-avatar-img-yamahira-width-sp);
    --profile-about-avatar-img-yamahira-height-pc: var(--profile-about-avatar-img-yamahira-height-sp);
    --profile-about-avatar-img-yamahira-position-x-pc: var(--profile-about-avatar-img-yamahira-position-x-sp);
    --profile-about-avatar-img-yamahira-position-y-pc: var(--profile-about-avatar-img-yamahira-position-y-sp);

    /* ヒーロー英字名・role / About nickname（PC：768→1440可変）
       name-en: 14px/5px → 40px/6px
       role: 10px → 20px
       nickname: 11px → 22px */
    --profile-hero-name-en-yamahira-pc: clamp(14px, calc(14px + (100vw - var(--layout-pc-base)) * 26px / var(--layout-pc-span)), 40px);
    --profile-hero-name-en-letter-yamahira-pc: clamp(5px, calc(5px + (100vw - var(--layout-pc-base)) * 1px / var(--layout-pc-span)), 6px);
    --profile-hero-role-yamahira-pc: clamp(10px, calc(10px + (100vw - var(--layout-pc-base)) * 10px / var(--layout-pc-span)), 20px);
    --profile-about-nickname-yamahira-pc: clamp(11px, calc(11px + (100vw - var(--layout-pc-base)) * 11px / var(--layout-pc-span)), 22px);

    /* LINKアイコン間隔（メール削除後の3つ用） */
    --profile-yamahira-socials-gap-sp: clamp(1.5rem, calc(1.5rem + (100vw - var(--fv-sp-base)) * 0.75rem / 24.5rem), 2.25rem);
    --profile-yamahira-socials-gap-pc: clamp(1.75rem, calc(1.75rem + (100vw - var(--layout-pc-base)) * 0.75rem / var(--layout-pc-span)), 2.5rem);
}

.page--profile-yamahira .profile-hero__img--yamahira {
    position: absolute;
    max-width: none;
    top: var(--profile-hero-img-yamahira-top-sp);
    left: var(--profile-hero-img-yamahira-left-sp);
    width: var(--profile-hero-img-yamahira-width-sp);
    height: var(--profile-hero-img-yamahira-height-sp);
    object-fit: cover;
    object-position:
        var(--profile-hero-img-yamahira-position-x-sp)
        var(--profile-hero-img-yamahira-position-y-sp);
}

.page--profile-yamahira .profile-about__avatar-img--yamahira {
    position: absolute;
    inset: auto;
    max-width: none;
    top: var(--profile-about-avatar-img-yamahira-top-sp);
    left: var(--profile-about-avatar-img-yamahira-left-sp);
    width: var(--profile-about-avatar-img-yamahira-width-sp);
    height: var(--profile-about-avatar-img-yamahira-height-sp);
    object-fit: cover;
    object-position:
        var(--profile-about-avatar-img-yamahira-position-x-sp)
        var(--profile-about-avatar-img-yamahira-position-y-sp);
}

.page--profile-yamahira .profile-section__social-icon--homepage,
.page--profile-yamahira .profile-section__social-icon--note {
    object-fit: contain;
}

@media (max-width: 767px) {
    .page--profile-yamahira #links .profile-section__socials {
        gap: var(--profile-yamahira-socials-gap-sp);
    }

    .page--profile-yamahira .profile-hero__catch {
        padding-top: var(--profile-hero-catch-padding-top-yamahira-sp);
        font-size: var(--profile-hero-catch-yamahira-sp);
    }
}

@media (min-width: 768px) {
    .page--profile-yamahira .profile-hero__img--yamahira {
        top: var(--profile-hero-img-yamahira-top-pc);
        left: var(--profile-hero-img-yamahira-left-pc);
        width: var(--profile-hero-img-yamahira-width-pc);
        height: var(--profile-hero-img-yamahira-height-pc);
        object-position:
            var(--profile-hero-img-yamahira-position-x-pc)
            var(--profile-hero-img-yamahira-position-y-pc);
    }

    .page--profile-yamahira .profile-about__avatar-img--yamahira {
        top: var(--profile-about-avatar-img-yamahira-top-pc);
        left: var(--profile-about-avatar-img-yamahira-left-pc);
        width: var(--profile-about-avatar-img-yamahira-width-pc);
        height: var(--profile-about-avatar-img-yamahira-height-pc);
        object-position:
            var(--profile-about-avatar-img-yamahira-position-x-pc)
            var(--profile-about-avatar-img-yamahira-position-y-pc);
    }

    .page--profile-yamahira .profile-hero__name-en {
        font-size: var(--profile-hero-name-en-yamahira-pc);
        letter-spacing: var(--profile-hero-name-en-letter-yamahira-pc);
        /* 1440超でカード幅固定・padding増により本文幅が狭まり折り返すため1行固定 */
        white-space: nowrap;
    }

    .page--profile-yamahira .profile-hero__role {
        font-size: var(--profile-hero-role-yamahira-pc);
    }

    .page--profile-yamahira .profile-about__value--nickname {
        font-size: var(--profile-about-nickname-yamahira-pc);
    }

    .page--profile-yamahira #links .profile-section__socials {
        gap: var(--profile-yamahira-socials-gap-pc);
    }
}