@charset "UTF-8";

/* -----------------------------------------
 専門家監修（マンスリーマンション専門家）セクション・PC — 共通スタイルの正本

 トップ（/css/top.css）とエリアトップ（/css/pc/prefectures.css）が同一セクションの
 スタイルを二重に持ち、object-fit（cover/contain）・カード枠線・フォント指定が
 ページ間でずれていたため本ファイルへ集約した（BRATTO_HP2026-346）。
 元の2ファイルからは .staff__* を撤去済み。ここ以外に .staff__* を書かない。

 - マークアップの正本は common/views/scripts/partial/staff-section.phtml と対
 - SP 版は /css/mobile/staff-section.css と twin（構造は同一・値のみ vw 系）
 - マスコットは本ファイルの .staff__headline::before で描画（エリアトップにも表示、213279 で追加）。
   トップだけはリンク付きの実体 <img>（.img_mascot--staff）を index.phtml に持つため、
   .staff__mascot-host 配下ではこの ::before を打ち消し、実体側の位置・アニメーションを
   top.css の [class*="img_mascot--"] 系ルールに委ねる（二重表示防止。BraTTo君表示対応 FB）
 - カスタムプロパティはフォールバック付き。エリアトップ SP は view-common.css を
   読まないため、変数未定義でも同値に落ちるようにしている
 - 全セレクタを .staff__section 配下にスコープするのは、トップの top.css が持つ
   広域リセット .org-main *{font-size:14px;font-weight:400}（詳細度0,1,0）が
   単クラスの .staff__* と同詳細度＋後読みで後勝ちし、見出し・担当者名・肩書を
   14px/400 に潰していたため（エリアトップの prefectures.css には無く差異になっていた）。
   .staff__section 前置で 0,2,0 に上げて確実に勝たせる（エリアトップは競合が無く値は不変）。
----------------------------------------- */

.staff__section {
    padding: 100px 0;
    background: var(--color-primary-grayscale-background-01, #F4F4F4);
}
    .staff__section .staff__headline {
        font-size: var(--size-XL, 30px);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 1.2px;
        text-align: center;
        margin-bottom: 30px;
        position: relative;
    }
        .staff__section .staff__headline span {
            font-size: var(--size-XL, 30px);
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: 1.2px;
            color: var(--color-primary-default-main, #FF5800);
        }
        .staff__section .staff__headline::before {
            content: '';
            background: url(/images/top/icon_mascot03.webp) no-repeat center / cover;
            display: block;
            width: 97px;
            height: 134px;
            position: absolute;
            top: -74px;
            left: 119px;
            animation: fluffy 2s infinite;
        }
        /* トップページ（default/index/index.phtml）はリンク付きの実体 <img class="img_mascot--staff">
           を .staff__mascot-host 配下に持つため、ここでは装飾用の ::before を打ち消して二重表示を防ぐ。
           実体側の位置・アニメーションは top.css の [class*="img_mascot--"] 系ルールが担う。 */
        .staff__mascot-host .staff__section .staff__headline::before {
            content: none;
        }
    .staff__section .staff__text-wrap {
        margin-bottom: 30px;
    }
        .staff__section .staff__text {
            line-height: 1.8;
            text-align: center;
        }
        .staff__section .staff__text:not(:last-of-type) {
            margin-bottom: 15px;
        }
    .staff__section .staff__list {
        display: flex;
        gap: 0 20px;
    }
        .staff__section .staff__card {
            width: 560px;
            padding: 30px;
            background: var(--color-primary-grayscale-white, #FFFFFF);
            border: 1px solid var(--color-primary-grayscale-border-light, #EBEBEB);
        }
            .staff__section .staff__profile {
                display: flex;
                gap: 0 30px;
                margin-bottom: 19px;
            }
                .staff__section .staff__image {
                    min-width: 120px;
                    width: 120px;
                    height: 120px;
                }
                    .staff__section .staff__image img {
                        width: 100%;
                        height: 100%;
                        /* 元写真の縦横比によらず正方形トリミング表示（contain だと縦長写真が長方形見えになる） */
                        object-fit: cover;
                    }
                .staff__section .staff__detail {
                    width: 100%;
                    height: auto;
                    border-bottom: 1px solid var(--color-primary-grayscale-border-2, #D2D2D2);
                    padding-top: 25px;
                }
                .staff__section .staff__detail:has(.staff__area) {
                    padding-top: 0;
                }
                    .staff__section .staff__label {
                        font-weight: 500;
                        line-height: 1.26;
                        margin-bottom: 10px;
                    }
                    .staff__section .staff__name {
                        font-size: var(--size-L, 24px);
                        font-weight: 700;
                        line-height: 1;
                    }
                    /* 担当エリア（出身地の値を項目名なしで表示。BRATTO_HP2026-XXX 先方確定） */
                    .staff__section .staff__area {
                        margin-top: 10px;
                        font-weight: 500;
                        line-height: 1.26;
                    }
            .staff__section .staff__comment {
                line-height: 1.5;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                margin-bottom: 19px;
            }
                .staff__section .staff__more-item:not(:last-child) {
                    margin-bottom: 5px;
                }
                    .staff__section .staff__more-item a {
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        gap: 0 10px;
                        font-size: var(--size-S, 16px);
                        font-weight: 700;
                        line-height: 1.5;
                    }
                    .staff__section .staff__more-item a .more__arrow {
                        background: var(--color-primary-default-main);
                        position: unset;
                        transform: unset;
                        border: 1px solid var(--color-primary-default-main);
                    }
                    .staff__section .staff__more-item a .more__arrow svg {
                        stroke: var(--color-primary-grayscale-white);
                    }

                    .staff__section .staff__more-item a:hover .more__arrow {
                        background: var(--color-primary-grayscale-white);
                        transition: 0.4s;
                    }
                    .staff__section .staff__more-item a:hover .more__arrow svg {
                        stroke: var(--color-primary-default-main);
                        transition: 0.4s;
                    }

/* マスコット揺れアニメーション（旧 top.css 残置分を集約） */
@keyframes fluffy {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}