@charset "utf-8";


/*表示するテキストが切り替わる*/
.btntextchange{
    display: inline-block;
    position: relative;
    width:100px;
	height:100px;
    box-sizing: border-box;
    text-align: center;
    border-radius:50%;
    text-decoration: none;
    background:#61A5F2;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    border:1px solid #fff;
    outline: none;
    transition: all 0.4s ease-out;
}

/*hoverした際の変化*/
.btntextchange:hover{
    color: #fff;
    background-color: #001F5B;
    background-size: 100% auto;
    background-position: top center;
    box-shadow: 0 5px 10px #aaa;
}

.btntextchange span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:50%;
    transform:translate(-50%,-50%);
    /*アニメーションの指定*/
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
	display: block;
	white-space: nowrap;
}

.btntextchange span img{
    position:relative;
    padding-bottom: 7px;
    width: 100%;
}
/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
	opacity:0;/*透過0に*/
    font-size: 20px;
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
	opacity:0;/*透過0に*/
}

.btntextchange:hover span:nth-child(2){
	opacity:1;/*不透明に*/
}