main {
    margin: 120px 0 60px;
}
.flexbox {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    align-items: top;
    width: 980px;
    margin: 0 auto;
}
/* 
最初に表示されるポートフォリオ6件以下
*/
.flexbox .box-load {
    margin-bottom: 5%;
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}
.flexbox .box-load.is-show  {
    width: 30%;
    height: 300px;
    margin-bottom: 5%;
    box-shadow: -5px -5px 10px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
    opacity: 1;
    visibility: visible;
    border-radius: 1px;
}
.flexbox .box-load img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1px;
}
.flexbox .box-load a:hover {
    opacity: 0.5;
}
/*
ポートフォリオの数7件以上
*/
.flexbox .box-scroll {
    margin-bottom: 5%;
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}
.flexbox .box-scroll.is-show  {
    width: 30%;
    height: 300px;
    margin-bottom: 5%;
    box-shadow: -5px -5px 10px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
    opacity: 1;
    visibility: visible;
    border-radius: 6px;
}
.flexbox .box-scroll img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.flexbox .box-scroll a:hover {
    opacity: 0.5;
}