@charset "utf-8";
/* CSS Document */

.full-img {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url(https://www.umds.ac.jp/wp-content/themes/umds/imgs/company/recruit/guidance/top_img.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

.catch {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================
ボタン
================ */

/*== ボタン共通設定 */
.btn01{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    background-color: #dcdcdc;
    border: 3px solid #00A0E8;/* ボーダーの色と太さ */
    border-radius: 20px;
    padding: 10px 50px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn01 span {
    position: relative;
    z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    color:#333;
    font-size: 120%;
    font-weight: 500;
}

.btn01:hover span{
    color:#fff;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
    content: '';
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: -130%;
    /*色や形状*/
    background:#00A0E8;
    width:120%;
    height: 100%;
    transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
    animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
    100% {
        left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
        }
    }