/* topic.twigのレイアウト調整用CSS - 最終調整版 (幅調整強化) */

/* 親要素の並び方をFlexboxで強制 */
.ec-topicRole_list {
    display: flex !important;           /* 子要素を横並びにする */
    flex-wrap: wrap !important;         /* 画面幅が狭い場合に折り返す */
    gap: 30px !important;               /* アイテム間の余白を30pxに設定 (任意) */
    justify-content: center !important; /* 中央に配置 */
    align-items: flex-start !important; /* 上端を揃える */
    padding: 20px 0 !important;         /* 上下の余白 (任意) */
    max-width: 1200px !important;       /* リスト全体の最大幅を制限 (例: 1200px) */
    margin: 0 auto !important;          /* リスト全体を中央揃えにする */
}

/* 各アイテム（画像＋テキストのセット）の幅を強制的に50%に */
.ec-topicRole_listItem {
    /* gapが30pxの場合、左右の余白を考慮して -15px (30px / 2) */
    /* ここで幅をcalc()で指定し、親要素の半分に */
    width: calc(50% - 15px) !important; 
    /* 最小幅を設定して、小さくなりすぎないようにする (任意) */
    min-width: 280px !important; /* 例: 最小幅280px */
    max-width: 450px !important; /* 例: 各アイテムの最大幅を制限 (任意) */
    box-sizing: border-box !important; /* パディングやボーダーを幅に含める */
}

/* 画像が親要素からはみ出さないように、さらに強制 */
.ec-topicRole_listItem img {
    max-width: 100% !important; /* 親要素の幅を超えないようにする */
    height: auto !important;
    display: block !important;
    margin-bottom: 10px !important; /* 画像とテキストの間に少し余白 */
}

/* テキスト部分のマージンを調整 */
.ec-topicRole_listItem p {
    margin: 0 !important; /* 余計な上下マージンを削除 */
    padding: 0 !important; /* 余計なパディングを削除 */
    font-size: 1.1em !important; /* 必要に応じて文字サイズ調整 */
    text-align: left !important; /* テキストの配置 (任意) */
}
/* 2027年版トップ表示時は旧2026年案内を表示しない */
body.front_page #main_bottom{display:none!important;}
.page_homepage #main_bottom{display:none!important;}
.mt2027~*{display:none!important;}

/* 2027年版トップ公開に伴い、旧2026年案内を非表示 */
.page_homepage .ec-layoutRole__mainBottom{display:none!important;}

/* 2027年版トップ公開に伴い、旧2026年案内を非表示 */
.page_homepage .ec-layoutRole__mainBottom{display:none!important;}
/* トップページの旧2026年案内・TOPICSを非表示 */
#page_homepage .ec-layoutRole__mainBottom{display:none!important;}