/* 回転Y軸
   ----------------------------- */

.flipY a{/*テキストの基点となる位置を定義*/
  position: relative;
  display: block;
}

.flipY img {
  transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
  backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}

.flipY a:hover img {/*hoverした時の変化*/
  transform: rotateY(-180deg);
  opacity: 0;
}

.flipY span.cap {
/*ここからエリアの絶対配置の指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
/*ここまでエリアの絶対配置の指定*/
  transition: all 0.42s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
  transform: rotateY(90deg);/*横軸に回転*/
  transform-origin: 50% 0%;/*回転する基点*/
  opacity: 0;
  background: white;
  color: #292f89;/*テキストの色を変えたい場合はここを修正*/
 /*ここからテキスト中央寄せの指定*/
  display: flex;
  justify-content: center;
  align-items: center;
 /*ここまでテキスト中央寄せの指定*/
  width: 90%;
  padding: 0 12px;
  border: solid 1px #292f89;
  border-radius: 8px;
  font-weight: 600;
}

.flipY a:hover span.cap {/*hoverした時の変化*/
  transform: rotateY(0);/*横軸に回転*/
  opacity: 1;
  transition-delay: 0.2s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}


@media screen and (max-width: 767.98px) {
.flipY span.cap {
    width: 100%;
}
}