@charset "utf-8";

/*== ボタン共通設定 */
.btn7-1-8{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
    padding: 10px 30px;
    text-align: center;
    outline: none;
	/* border-radius: 50px; */
    /*アニメーションの指定*/   
    transition: ease .2s;
    background-color: rgb(0,0,87);
}

@media screen and (min-width: 992px) {
    .btn7-1-8 {
        max-width: 500px;
        padding: 15px 50px;
    }
}

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

.btn7-1-8 span i {
    color: #ffffff;
}
/*

.btn7-1-8:hover {
    background-color: rgb(0,0,87);
}
*/

.btn7-1-8:hover, .btn7-1-8:hover span, .btn7-1-8:hover span i {
	color:#FFFFFF;
}

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

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

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



/*---------------------------------------------
blue　→　darkblue -reverse
===============================================*/
.btn7-1-8-reverse{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
    background-color: rgb(0,0,87);
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
    color: #ffffff;
}

@media screen and (min-width: 992px) {
    .btn7-1-8-reverse {
        max-width: 500px;
        padding: 15px 50px;
        color: #ffffff;
    }
}

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

.btn7-1-8-reverse:hover, .btn7-1-8-reverse:hover span, .btn7-1-8-reverse:hover span i {
	color:#ffffff!important;
}

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

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

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