@charset "utf-8";



/* ベース */
body {
	margin: 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color:#191970;
	font-size:16px;
	background-color: #e0ffff;
}

.container {
	margin: 0 auto;
	max-width: 1000px;
}

header {
	padding: 10px 10px 5px 10px;
	background:#8a2be2;
	margin-bottom: 80px;
}

footer{
	background-color: #008000;
	color:#fff;
	text-align: center;
	font-size: 14px;
	padding: 10px;
	margin-top: 50px;
}

h1{
	font-size: 24px;
	color: #fff;
}

.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

.ao{
	color:deepskyblue;
	font-weight: bold;
}


/* フレックスボックスレイアウトCSS */
.item {
  width: 30%;
}

.item-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: bold;
  color: #000cc;
}

.items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.items .item {
  margin: 10px
}

@media screen and (max-width: 767px) {
  .items {
    flex-direction: column;
  }
  .items .item  {
    width: 100%;
  }
}
.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;
}