/*== ボタン共通設定 */

.btn__element {
    display: inline-block;
    padding: 12px 24px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn__element {
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    border: 1px solid #b99576;
    /* ボーダーの色と太さ */
    /* padding: 10px 30px; */
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 4px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
    cursor: pointer;
}
@media (max-width: 768px) {
    .btn__element {
        padding: 12px 24px;
        font-size: 14px;
        border-radius: 4px;
    }
}


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

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

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

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

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