@charset "UTF-8";
/* archive */
.archive{
    margin: 0 0 50px 0;

    .archive_list{
        width: calc((600 / 1280) * 100%);
        max-width: 600px;
        margin: 0 auto;
    }
    .archive_item{
        width: 100%;
        font-weight: 500;

        .year{
            padding: 8px 10px;
            margin: 0 0 5px 0;
            line-height: 1;
            background: var(--color-gray-light);
        }
        
        .l-flex{
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .link-site,
        .link-report{
            width: 49%;
        }

        .link-site{
            margin: 0 1% 0 0;
        }

        a{  
            width: 100%;
            padding: 20px;
            font-size: 14px;
            color: var(--text-color);
            line-height: 1;
            display: block;
            background: var(--color-white);
            position: relative;
            transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
        }
        a:hover{
            color: var(--color-white);
            background: var(--sub-color);
        }

        a:after{
            font: var(--fa-font-solid);
            font-weight: 700;
            content: "\f054";
            position: absolute;
            top: 50%;
            right: 10%;
            transform: translateY(-50%);
        }

        .link-report a:after{
            content: "\f1c1";
        }
    }
    .archive_item:not(:last-child){
        margin: 0 0 30px 0;
    }
}

/* archive-workshop */
.archive-workshop{
    .lavel{
        padding: 5px;
        color: var(--color-white);
        background: var(--sub-color);
    }
    .workshop_list:not(:last-of-type){
        margin: 0 0 50px 0;
    }
    .workshop_item{
        padding: 10px;
        font-size: 14px;
    }
    .workshop_item:nth-child(even){
        background: var(--color-gray-light);
    }
}



@media screen and (max-width: 1024px){
    .archive{
        .archive_list{
            width: calc((700 / 1024) * 100%);
        }
    }
}


@media screen and (max-width: 600px){
    .archive{
        .archive_list{
            width: 90%;
        }
    }
}