@charset "utf-8";

/* 背景が中央から縦に出現＋テキスト */
.bgCH{
  position:relative;/*テキストの基点となる位置を定義*/
}

.bgCH div.mask{
  position:relative;/*背景色の基点となる位置を定義*/
  display: block;/*画像をくくるspanタグをブロック要素にする*/
  overflow: hidden;/*高さからはみ出ているものを隠す*/
}

.bgCH div.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: radial-gradient(141.32% 147.22% at 4.71% 98.53%, #30677A 0%, #29A8A8 69.22%, #32BFC6 100%);
  border-radius: 1rem;
  width: 100%;
  height: 100%;
}

.bgCH div.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: #fcfcfc;/*テキストの色を変えたい場合はここを修正*/
  line-height: 1.5;/*行の高さを1.5にする*/
  width: 100%;
}

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

.grayscale img{
    filter: grayscale(100%);/*モノクロ具合を変更したい場合はこの数値を変更*/
    transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  }
  
.grayscale a:hover img{/*hoverした時の変化*/
    filter:grayscale(0);
}

.zoomIn img{
    transform: scale(1);
    transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
  
.zoomIn a:hover img{/*hoverした時の変化*/
transform: scale(1.5);/*拡大の値を変更したい場合はこの数値を変更*/
}
  
/*　画像のマスク　*/

.mask2 {
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
    border-radius: 0.25rem;
}