@media print{
    header,
    .search-filter {
        display: none;
    }
}

body {
    background: #f0f0f0;
}

main {
    padding-top: var(--gap-single);
}

main .card_holder {
    display: grid;
    column-gap: var(--gap-thin);
    row-gap: var(--gap-thick);
}

main .card {
    display: flex;
    flex-direction: column;
    box-shadow: 0rem 1rem .75em var(--c-mid-gray);
}

main .card > a:hover {
    background: #fff;
}

main .card > a .grid_item_a {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

main .card > a .grid_item_b {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    
}

main .card .ui-check {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.5);
}

main .card .artists_era .tag + .tag::before,
main .card .pieces_size .tag + .tag::before {
    content: "\0020\FF0F\0020";
}

main .card .last_checked {
    margin: 0 var(--gap-thick) var(--gap-half) var(--gap-thick);
    padding-top: var(--gap-half);
    border-top: solid 1px var(--c-gray);
    text-align: center;
    font-size: var(--fz-small);
    letter-spacing: .15em;
    color: var(--c-dark-gray);
}

main .card .thumb img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
}

main .card .category {
    margin: 0;
}

main .card h2 {
    margin-top: 0;
    line-height: 1.5;
    /*----- 行数制限ここから -----*/
    display: -webkit-box;             
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(1.5em * 2);
    /*----- ここまで行数制限 -----*/
}

main .card p {
    font-size: var(--fz-brief);
    margin: 0;
}

main .gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 500px;
}

main .gallery > * {
    height: 100%;
}

main .gallery img {
    height: 100%;
    width: auto;
}

main .thumb {
    margin: 0;
}

main .category-group-title {
    margin: var(--gap-double) 0 var(--gap-single) 0;
    padding-bottom: var(--gap-little);
    font-size: var(--fz-sec-category-title);
    font-weight: 600;
    letter-spacing: .1em;
    border-bottom: 1px solid var(--c-mid-gray);
}

main .last_checked .is-checked {
    font-family: sans-serif;
    display: inline-block;
    padding: .1em 1.5em;
}

main .last_checked .is-empty {
    font-family: sans-serif;
    display: inline-block;
    margin: -0.3em 0;
    padding: .3em 1.5em;
    border-radius: 2em;
    display: inline-block;
    background: #c02727;
    color: #fff;
    cursor: pointer;
}

main .last_checked .is-empty:hover,
main .last_checked .is-empty:focus {
    background: #d23636;
}

main .last_checked .btn-recheck {
    font-family: sans-serif;
    display: inline-block;
    margin: -0.3em 0;
    padding: .3em 1.5em .3em 1em;
    border-radius: 2em;
    display: inline-block;
    background: var(--c-gray);
    color: #fff;
    cursor: pointer;
}

main .last_checked .btn-recheck::before {
    display: inlin-block;
    font-weight: 600;
    margin-right: var(--gap-little);
    content: "\21BB"
}

main .last_checked .btn-recheck:hover,
main .last_checked .btn-recheck:focus {
    background: #d23636;
}


/*==================== mobile ====================*/
@media all and (max-width: 599px) {

    main .card > a {
        box-sizing: border-box;
        height: 100%;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--gap-thin);
        padding: var(--gap-thin);
        background: rgba(255, 255, 255, 0.5);
        transition: background-color .2s cubic-bezier(0.19, 1, 0.22, 1);
    }

    main .card .last_checked {
        margin: 0 var(--gap-thin) var(--gap-half) var(--gap-thin);
        padding-top: var(--gap-half);
        border-top: solid 1px var(--c-gray);
        text-align: center;
        font-size: var(--fz-small);
        letter-spacing: .15em;
        color: var(--c-dark-gray);
    }

}

/*==================== pc_tablet ====================*/
@media all and (min-width: 600px) {

    main .card_holder {
        grid-template-columns: repeat(2, 1fr);
    }

    main .card > a {
        box-sizing: border-box;
        height: 100%;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--gap-thin);
        padding: var(--gap-thin) var(--gap-thick);
        background: rgba(255, 255, 255, 0.5);
        transition: background-color .2s cubic-bezier(0.19, 1, 0.22, 1);
    }

    main .card .last_checked {
        margin: 0 var(--gap-thick) var(--gap-half) var(--gap-thick);
        padding-top: var(--gap-half);
        border-top: solid 1px var(--c-gray);
        text-align: center;
        font-size: var(--fz-small);
        letter-spacing: .15em;
        color: var(--c-dark-gray);
    }

}

/*==================== pc ====================*/
@media all and (min-width: 1200px) {
    main .card_holder {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*==================== pc_wider ====================*/
@media all and (min-width: 1600px) {
    main .card_holder {
        grid-template-columns: repeat(4, 1fr);
    }
}