/* =========================================================
    Layout: Two Column (Sidebar Left)
========================================================= */

/* PC版のレイアウト */
@media screen and (min-width: 960px) {
    .l-twoColLayout {
        display: flex;
        align-items: flex-start; /* 中身の高さが違っても上揃えにする */
        gap: 40px;               /* サイドバーとメインの間隔 */
    }

    .l-twoColLayout__side {
        flex: 0 0 300px;         /* サイドバーの横幅を300pxに固定 */
        position: sticky;        /* スクロール追従させる場合はこれ */
        top: 20px;
    }

    .l-twoColLayout__main {
        flex: 1;                 /* 残りの幅をすべて使う */
        min-width: 0;            /* flex内の崩れ防止 */
    }
}

/* スマホ版のレイアウト */
@media screen and (max-width: 959px) {
    .l-twoColLayout {
        display: flex;
        flex-direction: column;  /* 縦に並べる */
        gap: 32px;
    }

    .l-twoColLayout__side {
        width: 100%;
        /* スマホでは絞り込みを非表示にする、またはアコーディオンにする等の処理を後で追加 */
    }
	.l-twoColLayout__main {
		width: 100%;
    }
}