/***おすすめ記事デザインカード型***/ [class^="recommend"] { margin: 0; padding: 0; box-sizing: border-box; } .recommend-container { padding: 20px 2vw; background: #fff; } .recommend-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1200px; margin: 0 auto; list-style: none; } .recommend-item { width: calc(50% - 1vw); border: solid 1px #ddd; border-radius: 6px; margin-bottom: 20px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } @media (min-width: 992px) { .recommend-container { padding: 28px 28px 0; } .recommend-item { width: calc(25% - 10px); } } .recommend-figure { padding-top: 50%; position: relative; overflow: hidden; } .recommend-img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; transition: .3s ease-in-out; } .recommend-title { display: block; padding: 8px; font-size: 16px; font-weight: bold; text-align: left; line-height: 1.4; } .recommend-link { text-decoration: none; color: #454545!important; display: block; width: 100%; height: 100%; background: #fff; } .recommend-link:hover .recommend-figure img { transform: scale(1.05); } .recommend-figure::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.2); position: absolute; top: 0; left: 0; opacity: 0; z-index: 1; transition: .2s ease-in-out; } .recommend-link:hover .recommend-figure::before { opacity: 1; }