@charset "UTF-8";
/* search */
.search{
    .pagenav{
        .pagenav_list{
            margin: 0 0 50px 0;
            border-bottom: dotted 2px var(--color-gray-dark);
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .pagenav_item a{
            padding: 0 0 5px 0;
            color: var(--text-color);
            font-weight: 500;
            display: inline-block;
        }
        .fa-solid{
            margin: 0 0 0 5px;
        }
    }
    .label{
        padding: 10px;
        margin: 0 0 30px 0;
        font-size: 18px;
        font-weight: 500;
    }
    .search-base,
    .search-workshop{
        padding-top: 94px;
        margin-top: -94px;
    }
    .search-base{
        margin-bottom: 50px;
    }
    .search-base .label{
        color: var(--color-white);
        background: var(--sub-color);
    }
    .base_list{
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .base_item{
        width: 30%;
        margin: 0 0 30px 0;
        font-size: 14px;

        .base_dlist{
            padding: 10px 0 0 0;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        dt{
            width: 80px;
            padding: 0 10px;
            margin: 0 10px 10px 0;
            color: var(--color-white);
            text-align: center;
            border-radius: 50vh;
            background: var(--sub-color);
        }
        dd{
            width: calc(100% - 90px);
            margin: 0 0 10px 0;
        }

        .button a{
            padding: 10px;
            color: var(--color-white);
            text-align: center;
            background: var(--sub-color);
            display: block;
        }
    }
    .search-workshop .label{
        background: var(--sub-color2);
    }
    .workshop_list{
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .workshop_list::after{
        content: "";
        display: block;
        width: 30%;
    }
    .workshop_item{
        width: 30%;
        margin: 0 0 30px 0;
        background: var(--color-white);
        display: flex;
        flex-direction: column;

        .day{
            padding: 10px 20px;
            font-weight: 700;
            background: var(--color-gray-light);
        }
        .full{
            margin: 0 0 0 0.5em;
            font-size: 0.85em;
            font-weight: 400;
            color: var(--color-red);
        }
        .title{
            padding: 10px 20px;
            font-size: 14px;
            position: relative;
        }
        .title::after{
            width: calc(100% - 40px);
            content: "";
            border-bottom: dotted 2px var(--color-gray);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .detail{
            padding: 10px 20px;
            font-size: 12px;
            flex-grow: 1;
        }
        .time{
            margin: 0 0 2px 10px;
        }
        .place{
            margin: 0 0 10px 10px;
        }
        .note,
        .hosts{
            margin: 0 0 10px 0;
        }
        .flyer{
            margin: 0 0 0 10px;
        }
        .flyer a{
            color: var(--main-color);
            font-weight: 700;
        }
        .time::before,
        .place::before,
        .flyer::before{
            width: 13px;
            margin: 0 2px 0 -10px;
            font-family: Font Awesome\ 6 Free;
            font-weight: bold;
            display: inline-block;
        }
        .time::before{
            content: "\f017";
        }
        .place::before{
            content: "\f3c5";
        }
        .flyer::before{
            content: "\f1ea";
        }

        .button-oval{
            width: 70%;
            min-width: 250px;
            padding: 0 0 20px 0;
            margin: 0 auto;
        }
        .button-oval a{
            color: var(--color-white);
            background: var(--color-blue);
        }
    }
    .link-archive{
        margin: 0 0 100px 0;
        text-align: right;

        a{
            font-weight: 500;
        }

        .fa-solid{
            margin: 0 5px 0 0;
        }
    }

    .closed {
        width: 70%;
        min-width: 250px;
        padding: 0 0 20px 0;
        margin: 0 auto;

        span{
            padding: 15px 25px;
            color: var(--text-color);
            font-weight: 700;
            border-radius: 50vh;
            background: var(--color-gray-light);
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
            transition: cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
        }
    }
}

@media screen and (max-width: 1024px){
    .search{
        .search-base,
        .search-workshop{
            padding-top: 50px;
            margin-top: -50px;
        }
        .base_item,
        .workshop_item{
            width: 48%;
        }
    }
}


@media screen and (max-width: 600px){
    .search{
        .base_item,
        .workshop_item{
            width: 100%;
        }
    }
}