@charset "utf-8";

/* ボタン共通設定 */
.btn04 {
    width:100%;
    max-width:350px;
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display:inline-block;
    padding: 10px 30px;
    color:var(--black);
    font-weight:bold;
    font-size:1.2rem;
    margin:15px auto;
    text-decoration: none;
    text-align:center;
    outline: none;
    /*はみ出す背景色を隠す*/
    overflow: hidden;
}

.btn04.on{
    border:2px solid var(--black);
}

/*hoverした際のボタンの形状*/
.btn04:hover {
    color:var(--secondary);
    border-color: transparent;
    /*色の変化を遅らせる*/
    transition-delay: .6s;
}

/*線の設定*/
.btn04 span{
    display: block;
    z-index: 2;
}

/*== 線から塗りに変化（中央から外） */

/*線の設定*/
.bordercenter span::before,
.bordercenter span::after{
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    /*線の形状*/
    width: 100%;
    height:1px;
    background:var(--black);
    /*アニメーションの設定*/
    transition: all .3s;
    transform: scale(0,1);
    transform-origin: center;
}

/*上線*/
.bordercenter span::before {
    left:0;
    top:0;
}

/*下線*/
.bordercenter span::after {
    left:0;
    bottom:0;
}

/*hoverをすると線が伸びる*/
.bordercenter:hover span::before,
.bordercenter:hover span::after{
    transform: scale(1,1);
}

/*背景の設定*/
.bordercenter::before{
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    left: 0;
    top:0;
    z-index: -1;
    /*背景の形状*/
    height: 100%;
    width:100%;
    background:var(--primary);
    /*アニメーションの設定*/
    transition: all .3s;
    transform: scale(0,1);
    transform-origin: center;
}

/*hoverをすると背景が伸びる*/
.bordercenter:hover::before{
    width: 100%;
    /*0.4秒遅れてアニメーション*/
    transition-delay: .4s;
    transform: scale(1,1);
}