@charset "utf-8";


/* 回転X軸
   ----------------------------- */

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

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

.flipX a:hover img {/*hoverした時の変化*/
  transform: rotateX(-180deg);/*縦軸に回転*/
  opacity: 0;
}

.flipX span.cap {
/*ここからエリアの絶対配置の指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
/*ここまでエリアの絶対配置の指定*/
  transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
  transform: rotateX(90deg);/*縦軸に回転*/
  transform-origin: 0% 50%;/*回転する基点*/
  opacity: 0;
  background:#333;/*背景色*/
  color: #fff;/*テキストの色を変えたい場合はここを修正*/
	/*ここからテキスト中央寄せの指定*/
  display: flex;
  justify-content: center;
  align-items: center;
	/*ここまでテキスト中央寄せの指定*/
}

.flipX a:hover span.cap {/*hoverした時の変化*/
  transform: rotateX(0);
  opacity: 1;
  transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}


/*========= レイアウトのためのCSS ===============*/

a{
	color: #333;
	text-decoration: none;
}

.lead{
	text-align: center;
	padding: 50px 20px;
}

/*画像のレスポンシブ*/

img{
	width:100%;
	height: auto;
}

/*横幅*/

.flipX{
	width: 70%;
    margin: 0 auto;/*中央揃え*/
}