@charset "UTF-8";

/* イベント ================================================== */
/* ==========================================================

    body id="event"

    読み込み
    一覧

    ============================================================ */
/* 読み込み ================================================= */

/* 共通 */
@import url("./common.css");

/* 読み込み ================================================= */
/* ========================================================= */
/* 一覧 ==================================================== */

.eventList{

    div.elArea{
        /* 横幅 */
        /* カードの横幅を固定にしているので、全体の幅も各カラム数に応じた固定の横幅にする */
        /* 直下のulをwidth: 1080px;にしているので、ここはfit-contentにして、左右のmarginをautoにして中央に配置させる */
        width: fit-content;
        /* 全体を中央にする */
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;

        & > ul{
            display: flex;   /* display: grid;だとカード内の下部の2つのボタンの下付けができなくなるので使用しない */
            flex-wrap: wrap;
            justify-content: space-between;
            /* justify-content: space-between;で両サイドに広げているので、カードの間の余白はulとliのwidth:の値で決まるため、以下のgapはなくてもよい */
            /* gap: 0 60px; */

            /* 1141px以上の場合：3カラム ------------------------- */
            /* カードの幅：340px ※swiperではない一覧表示用にwidthを設定させる（少し大きくしている）*/
            /* カード間の余白：60px～30px */
            /* 全体の幅（最大値）1315px：calc(340px * 3カラム + 60px * 2余白) = 1140px */
            /* 全体の幅（最小値）1141px：calc(340px * 3カラム + 30px * 2余白) = 1080px */
            width: clamp(1080px, 34.48276vw + 686.55172px, 1140px);   /* MIN：1141px ～ MAX：1315px */

            /* 空のflexアイテムを生成：これでflexアイテムが3カラムの場合は、どのような数でも左寄せに表示することができる*/
            &::after{
                content: "";
                display: block;
                width: 340px;   /* 固定：liの幅と合わせておく */
            }

            & > li{
                width: 340px;   /* swiperではない一覧表示用にwidthを設定させる（少し大きくしている）*/
                height: auto;
                margin-top: 80px;   /* 固定（top: -30px;分も含むので実質50px）*/
                margin-right: 0;
                margin-left: 0;
            }

        }

        /* BP：1080px + 30px * 2 = 1140px → 1141pxまでOK */

        /* 1140px～601pxの場合：2カラム ---------------------- */
        @container ctnHtml (width <= 1140px){
            margin-top: 20px;

            & > ul{
                /* カードの幅：380px～270px 2カラムになった時点で左右に余白ができるので、カード幅（liのwidth）を少し大きめにしておく   */
                /* カード間の余白：80px～20px ulとliのwidth:の値で決まるため、切り替え後のulのwidthを大きめにしておく */
                /* 全体の幅（最大値）1140px：calc(380px * 2カラム + 80px * 1余白) = 840px */
                /* 全体の幅（最小値） 616px：calc(270px * 2カラム + 20px * 1余白) = 560px */
                width: clamp(560px, 53.43511vw + 230.83969px, 840px);   /* MIN：616px ～ MAX：1140px */

                &::after{
                    content: "";
                    display: block;
                    width: clamp(270px, 20.99237vw + 140.68702px, 380px);   /* MIN：616px ～ MAX：1140px：liの幅と合わせておく */
                }

                & > li{
                 /* common.css側のwidth:はBP：1000pxで設定しているので、swiperではない一覧表示用として以下にwidthを設定させる */
                    width: clamp(270px, 20.99237vw + 140.68702px, 380px);   /* MIN：616px ～ MAX：1140px */
                    margin-top: 60px;
                    margin-left: 0;
                    margin-right: 0;
                    /*margin-bottom: clamp(70px, 5.72519vw + 34.73282px, 100px);   /* MIN：616px ～ MAX：1140px */

                    /* このli内にある他の要素は、ctnHtml(width <= 1000px)になるとcommon.css側のBP：1000pxで設定している内容が反映される */

                }

            }

        }

        /* BP：560px + 20px * 2 = 600px → 601pxまでOK */

        /* 600px以下（SP）の場合：1カラム -------------------- */
        @container ctnHtml (width <= 600px){
            margin-top: 3vh;

            & > ul{
                display: block;
                width: 100%;

                & > li{
                    width: 86%;
                    margin-top: 10vh;
                    margin-left: auto;
                    margin-right: auto;
                    /* margin-bottom: 10vh; */

                    &::after{
                        display: none;
                    }

                }

            }

        }

    }

}

/* 一覧 ==================================================== */
/* ========================================================= */