@charset "UTF-8";

/*↓↓*/
.main {
background:linear-gradient(#000,#233);
border-bottom:solid 1px #FFF;
text-align:center;
padding:96px 32px;
}
.main img {
display:inline-block;
max-width:600px; width:100%;
}
/*↑↑*/
/*↓↓*/
.number {
 display:flex; flex-wrap:wrap;
 background:#000;
 }
.number li { width:33.33%; border-bottom:solid 1px #FFF; overflow:hidden;}
@media screen and ( max-width:720px ){ .number li { width:50%;}}
@media screen and ( max-width:480px ){ .number li { width:100%;}}
.number li.full { width:100%;}

.number a {
position:relative;
display:block; width:100%; height:200px;
background:rgba(0,0,0,0.4);
color:#FFF; font-size:12px; text-align:center; text-decoration:none;
transition:background 0.5s;
}
.number a:hover { background:rgba(255,255,255,0.2);}

.number div:nth-of-type(1),
.number div:nth-of-type(2) {
position:absolute; left:0; right:0; bottom:0;
transition:transform 0.5s, opacity 0.5s;
}
.number div:nth-of-type(1) {/* 画像 */
z-index:1; top:0;
background:no-repeat center center; background-size:cover;
opacity:0.4;
}
.number div:nth-of-type(2) {/* 文字 */
z-index:2;
background:linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.8) 16px);
padding:16px;
}
@media screen and ( min-width:769px ){
.number a:hover div:nth-of-type(1) { transform:scale(1.05); opacity:1;}
.number a:hover div:nth-of-type(2) { transform:translate(0,16px); opacity:0;}
}

.number img { display:block; width:100%;}
.number h3,
.number p { overflow:hidden;}
.number h3 { font-size:18px; line-height:1; color:#F00;}
.number p  { font-size:14px; line-height:1.25; margin-top:8px;}
@media screen and ( max-width:768px ){
.number h3 { font-size:16px;}
.number p  { font-size:12px;}
}
/*↑↑*/