@charset "UTF-8";

/* ============================================
 * ファーストビュー（FV）
 * ============================================ */
h2 {
    /* fv */
    background-image: url(../img/employee-fv.jpg);
}

/* ============================================
 * 社員一覧セクション
 * ============================================ */

#syainn {
    display: block;
}

/* 検索エリア */
.search-area {
    margin: 0 5%;
}

#searchDept {
    width: 20%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    margin-right: 10px;
}

#searchName {
    width: 30%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    margin-right: 10px;
}

/* 社員リスト */
#employeeList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5%;
}

/* 個々の社員情報カード */
.employee {
    display: flex;
    width: 45%;
    padding: 10px;
    margin: 1% 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    align-items: center;
}

/* リストアイテムのリセット */
li {
    list-style: none;
}

/* 社員画像 */
.employee img {
    width: 30%;
    aspect-ratio: 4 / 5;
    /* 幅:高さ を 4:5 に設定 */
    object-fit: cover;
    /* 指定した領域に合わせて画像をトリミング・拡大縮小する */
    margin: 2%;
}

/* ============================================
 * Media Queries (スマートフォン対応)
 * ============================================ */

@media screen and (max-width: 767px) {
    #syainn {
        display: block;
    }

    /* 検索エリア */
    .search-area {
        width: 100%;
    }

    #searchDept {
        padding: 5px;
        width: 45%;
    }

    #searchName {
        padding: 5px;
        width: 45%;
    }

    /* 社員リスト */
    #employeeList {
        display: block;
        margin: 5%;
    }

    /* 個々の社員情報カード */
    .employee {
        width: 100%;
    }
}

/*font
英語
font-family: "Quicksand", sans-serif;
font-weight: Light-300,Regular-400,Medium-500,SemiBold-600,Bold-700;

日本語
font-family: "Murecho", sans-serif;
font-weight: Thin-100,ExtraLight-200,Light-300,Regular-400,Medium-500,SemiBold-600,Bold-700,ExtraBold-800,Black-900;
*/