@charset "utf-8";

/* マウスオーバーで画像を拡大 */
.mo1{
  width: 300px;
  height: 220px;
margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.mo1 img{
  width: 100%;
  transition-duration: 0.5s;
}
.mo1:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}

/* マウスオーバーで画像を明るく */
.mo2{
  width: 300px;
  height: 220px;
margin: 0 auto;
  overflow: hidden;
}
.mo2 img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.mo2:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

/* マウスオーバーで画像を暗く */
.mo3{
  width: 300px;
  height: 220px;
	margin: 0 auto;
  overflow: hidden;
  background: #000;
}
.mo3 img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.mo3:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

/* マウスオーバーで画像を少し傾けながら拡大 */
.mo4{
  width: 300px;
  height: 220px;
	margin: 0 auto;
  overflow: hidden;
}
.mo4 img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.mo4 img:hover{
  transform: scale(1.2) rotate(9deg);
  transition-duration: 0.5s;
}

/* マウスオーバーで画像を浮かせる */
.mo5{
  width: 300px;
  height: 220px;
  margin: 20px auto 0;
  transition-duration: 0.5s;
}
.mo5 img{
  width: 100%;
  cursor: pointer;
}
.mo5:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

/* マウスオーバーで画像のぼかしを消す */
.mo6{
  width: 300px;
  height: 220px;
  margin: 0 auto;
  overflow: hidden;
}
.mo6 img{
  width: 100%;
  transform: scale(1.1);
  cursor: pointer;
  filter: blur(5px);
  transition-duration: 0.5s;
}
.mo6 img:hover{
  filter: blur(0);
  transition-duration: 0.5s;
}

/* マウスオーバーでモノクロからカラー */
.mo7{
  width: 300px;
  height: 220px;
  margin: 0 auto;
  overflow: hidden;
}
.mo7 img{
  width: 100%;
  transform: scale(1.1);
  cursor: pointer;
  filter: grayscale(100%);
  transition-duration: 0.5s;
}
.mo7 img:hover{
  filter: grayscale(0);
  transition-duration: 0.5s;
}

/* マウスオーバーでヨコに回転 */
.mo8{
  width: 300px;
  height: 220px;
  margin: 0 auto;
  overflow: hidden;
}
.mo8 img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.mo8:hover img{
  transform: rotateY( 360deg );
  transition-duration: 0.5s;
}

/* マウスオーバーで画像が回転 */
.mo9{
  width: 250px;
  height: 250px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}
.mo9 img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.mo9 img:hover{
  transform: rotate(360deg);
  transition-duration: 0.5s;
}