/* CSS Document */

/* 背景が中央から縦に出現＋テキスト */

.bgCH{
    position: relative;
    float: left;
    height: 200px;
    width: 32%;
    margin-top: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 10px;
    margin-left: 0.5%;
}

.bgCH span.mask{
    position: relative;/*背景色の基点となる位置を定義*/
    display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*高さからはみ出ているものを隠す*/
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.bgCH span.mask img{
    width: 100%;
    height: auto;    
}

.bgCH span.mask::before {
	content:"";
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;/*移り変わる速さを変更したい場合はこの数値を変更*/
	transform: scale(1, 0);
	transform-origin:center;
    background:rgba(41,171,226,0.8);/*背景色*/
	width: 100%;
	height: 100%;
	
}

.bgCH span.mask:hover::before{/*hoverした時の変化*/
	transform:scale(1, 1)
}

.bgCH span.cap{
	position: absolute;
	opacity:0;
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
	display: block;
}

.bgCH a:hover span.cap{/*hoverした時の変化*/
	opacity:1;
}
/*──────────────────
sp_phone
──────────────────*/

@media screen and (max-width: 896px){
.bgCH{
    position: relative;
    float: left;
    height: 140px;
    width: 49%;
    margin-bottom: 10px;
    margin-top: 0.5%;
    margin-right: 0.5%;
    margin-left: 0.5%;
}

.bgCH span.mask{
	position:relative;/*背景色の基点となる位置を定義*/
	display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*高さからはみ出ているものを隠す*/
	border-radius: 10px;
	height: 140px;
	
    align-items: center;
    justify-content: center;
}
.bgCH span.mask img{
	width: auto;
	height: 100%;
}

.bgCH span.mask::before {
	content:"";
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;/*移り変わる速さを変更したい場合はこの数値を変更*/
	transform: scale(1, 0);
	transform-origin:center;
    background:rgba(41,171,226,0.8);/*背景色*/
	width: 100%;
	height: 100%;
}

.bgCH span.mask:hover::before{/*hoverした時の変化*/
	transform:scale(1, 1)
}

.bgCH span.cap{
	position: absolute;
	opacity:0;
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
	display: block;
}

.bgCH a:hover span.cap{/*hoverした時の変化*/
	opacity:1;
}	
	
	
	
	
	
	
	
}