@charset "UTF-8";
/* =======================================================================
特集 カテゴリページ 共通css
========================================================================== */

/* list3
========================================================================== */
/*特集ページ導線バナー*/
.banner__feature {margin-bottom: 60px;}
.banner__feature-list {display: flex;flex-wrap: wrap;gap: 15px 15px;padding: 20px 5px;box-sizing: border-box;}
.banner__feature-list li {flex-basis: calc((100% - 20px) / 2);background-color: #f9f9f9;}
.banner__feature-list li img {width: 100%;height: auto;aspect-ratio: 16 / 5;border: 1px solid #cecece; display: block;}

/* --------------------------------------------------------------------------
特集記事が少ない場合、バナー縦並び
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .banner__feature {margin-bottom: 0 !important;}
    .banner__feature-list {row-gap: 10px;flex-direction: column;}
}
/* --------------------------------------------------------------------------
特集記事が増えた場合、スマートフォンでバナーを横並び
liが1つだけの時、バナー画像が横幅100%
https://gyazo.com/6565108549e19e2353ff5b46f351f712
-------------------------------------------------------------------------- */
/*
@container (max-width: 768px) {
    .banner__feature {margin-bottom: 0 !important;}
    .banner__feature-list {gap: 10px;width: 100vw;overflow-x: scroll;overflow-y: hidden;flex-wrap: nowrap;}
    .banner__feature-list li {flex-basis: 80vw;min-width: 80vw;width: 80vw;}
    .banner__feature-list li:only-child {flex-basis: 100%;min-width:100%;width:100%;}
    .banner__feature-list:has(li:only-child) {width: 100%;overflow: unset;}
}
*/