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

/*ボタン共通CSS---------------------------------------------*/

.b_box{
	position: relative;
	/*text-align:center;*/
	/*margin-bottom:20px;*/
}/*******/

.fs_btn {
	        /*padding: 0.5rem;*/
	display: inline-block;
	width:200px;/*pxと％表示できればなお可******/
	text-align: center;
	text-decoration: none;
	line-height: 30px;/*高さ******/
	outline: none;
	border-radius:4px;/*角丸******/
	/*background-color: #333;******/
	/*border: 2px solid #333;******/
	/*color: #fff;******/
}

.fs_btn_text{
    /*padding: 0.5rem;*/
}

.fs_btn:hover {
	/*background-color: #fff;******/
	/*border-color: #59b1eb;******/
	/*color: #59b1eb;******/
}

.fs_btn::before,
.fs_btn::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.fs_btn,
.fs_btn::before,
.fs_btn::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/*⑧サークルボタン---------------------------------------------*/

.fs_cir{
	width: 150px;/*******/
	height: 150px;/*******/
	line-height: 150px;/*******/
	/*background-color: #333;******/
	/*border: 2px solid #333;******/
	/*color: #fff;******/
	font-size: 32px;/*******/
	display: inline-block;
	padding: 0px;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	-ms-transition: .5s;
	transition: .5s;
	z-index: 10;
}

.fs_cir:hover {
/*	background-color: #fff;*****
	border-color: #59b1eb;*****
	color: #59b1eb;******/
	z-index: 100;
	overflow:hidden
}

.fs_cir::before,
.fs_cir::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	overflow:hidden
}
.fs_cir,
.fs_cir::before,
.fs_cir::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	overflow:hidden
}





/*　要素をふわっと変更する-------------------

①と②に関しては設定できる項目を

・background-color
・color
・border

---------------------------------------------*/


/*①背景・ボーダー・文字カラーをふわっと変更する---------------------------------------------*/





/*②背景カラーが左右に分かれていく---------------------------------------------*/



.fs_btn02:hover::before,
.fs_btn02:hover::after {
	width: 0;
	/*background-color: #59b1eb;分かれていく色******/
}

.fs_btn02 {
	position: relative;
	z-index: 2;
}


.fs_btn02::before,
.fs_btn02::after {
	top: 0;
	width: 50%;
	height: 100%;
}
.fs_btn02::before {
	right: 0;
}
.fs_btn02::after {
	left: 0;
}

/*③背景カラーが上下に分かれていく---------------------------------------------*/


.fs_btn03:hover::before,
.fs_btn03:hover::after {
	height: 0;
	/*background-color: #59b1eb;分かれていく色******/
}

.fs_btn03 {
	position: relative;
	z-index: 2;
}

.fs_btn03::before,
.fs_btn03::after {
	left: 0;
	width: 100%;
	height: 50%;
}
.fs_btn03::before {
	top: 0;
}
.fs_btn03::after {
	bottom: 0;
}


/*④文字間隔を広げる---------------------------------------------*/

.fs_btn04:hover {
	letter-spacing: 5px;/*文字間******/
}

/*⑤背景を透過させ、ホバー時にうっすらと背景色を出す（ゴーストボタン）---------------------------------------------*/


.fs_btn05:hover {
	/*background-color: rgba(255, 255, 255, .2);透過させる色と濃さ******/
}

.fs_btn05 {
	background-color: transparent;
}

/*⑥上から背景がするっと降りてくる---------------------------------------------*/

.fs_btn06 {
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.fs_btn06::after {
	top: -100%;
	width: 100%;
	height: 100%;
}
.fs_btn06:hover::after {
	top: 0;
	/*background-color: #333;エフェクトの色******/
}

/*⑦奥から背景をふわっと表示させる #1---------------------------------------------*/

.fs_btn07 {
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.fs_btn07::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}
.fs_btn07:hover::after {
	background: #333;/*エフェクトの色******/
	-webkit-transform: scale(1);
	transform: scale(1);
}

.fs_btn_text_sub{
    font-size: 0.8em;
}