@charset "utf-8";

#list {padding:80px 0; text-align:left;}
#list > h1 {display:none;}
#list > ul {display:flex; flex-wrap:wrap; justify-content:flex-start; margin:-60px -15px 0;}
#list > ul > li {flex:0 1 calc(50% - 30px); margin:60px 15px 0;}
#list > ul > li > a {display:block; text-decoration:none;}
#list > ul > li .image {position:relative;}
#list > ul > li .image::after {display:block; content:''; height:0; padding:76.2963% 0 0; overflow:hidden;}
#list > ul > li .image > img {width:100%; height:100%; position:absolute; left:0; top:0; object-fit:cover;}
#list > ul > li h2 {margin:1em 0 0; font-size:2.8rem;}
#list > ul > li small {display:flex; margin:0.5em 0 0; font-size:1.8rem; line-height:1.5;}
#list > ul > li small span {display:flex; align-items:center;}
#list > ul > li small span::before {display:block; content:'/'; margin:0 0.5em; color:#aaa;}
#list > ul > li small span:first-child::before {display:none;}
#list > ul > li > a:hover {color:var(--color-main-bit-lighter);}

@media screen and (max-width:599px) {
#list {padding:8vw 0;}
#list > h1 {}
#list > ul {display:block; margin:-6.6666vw 0 0;}
#list > ul > li {margin:6.6666vw 0 0;}
#list > ul > li > a {}
#list > ul > li .image {}
#list > ul > li .image::after {}
#list > ul > li .image > img {}
#list > ul > li h2 {margin:0.8em 0 0; font-size:1.6rem;}
#list > ul > li small {margin:0.5em 0 0; font-size:1rem;}
#list > ul > li small span {}
#list > ul > li small span::before {}
#list > ul > li small span:first-child::before {}
#list > ul > li > a:hover {}
}