@charset "utf-8";

/*　画像の拡大＋テキスト出現　*/

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

.zoomInText span.mask {
  position: relative;
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block; /*画像をくくるspanタグをブロック要素にする*/
  line-height: 0; /*行の高さを0にする*/
  overflow: hidden; /*拡大してはみ出る要素を隠す*/
}

.zoomInText:hover span.mask::before {
  /*hoverした時の変化*/
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: rgba(0, 0, 0, 0.5); /*背景色*/
}

.zoomInText img {
  transform: scale(1);
  filter: blur(0);
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomInText:hover img {
  /*hoverした時の変化*/
  transform: scale(1.2); /*拡大の値を変更したい場合はこの数値を変更*/
  filter: blur(5px); /*ぼかし具合を変更したい場合はこの数値を変更*/
}

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

.zoomInText:hover span.cap {
  /*hoverした時の変化*/
  opacity: 1;
  text-shadow: 1px 1px 2px #000;
}

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

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

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

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

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

/*　横幅　*/

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