@charset "utf-8";

div.sp-banners::before,
div.sp-banners::after {content:'';clear:both;display:table;}

div.sp-banners > ul {display:flex;flex-flow:row wrap;padding:0;margin:0;list-style:none;}
div.sp-banners > ul::after {content:'';flex:1000000000 0 auto;}
div.sp-banners > ul > li {display:flex;align-items:center;justify-content:space-around;flex:1 1 50%;margin-bottom:20px;}
div.sp-banners > ul > li > div {text-align:center;padding:10px;}
div.sp-banners > ul img {max-width:100%;max-height:100%;}
div.sp-banners div.sp-thumb {aspect-ratio:2.2;display:flex;align-items:center;justify-content:center;border:solid 1px #ccc;background:#fff;margin-bottom:1rem;}
div.sp-banners a[href="#!"] {cursor:default;}
div.sp-banners a:hover div.sp-thumb {border-color:#333;}

@media (min-width:768px) {
	div.sp-banners > ul > li {flex:1 1 33.33%;margin-bottom:30px;}
	div.sp-banners > ul > li > div {text-align:center;padding:20px;}
}

@media (min-width:1200px) {
	div.sp-banners > ul > li {flex:1 1 25%;margin-bottom:30px;}
}