main{
    margin-top: 140px;
}
.title_wrap{
    display: flex;
  justify-content: flex-start;
}
h2.title{
    font-size: 24px;
 /*
    width: fit-content;
  margin-left: auto;
  */
  text-align: left;
    line-height: 1.5;
}
.portfolio_head{
    position: relative;
 /*   padding-left: 70px;*/
}
.portfolio_head .back{
    position: absolute;
    left: 0;
    top: 50%;
    font-size: 60px;
    line-height: 0;
    display: none;
}
.credit_free_area{
    margin-top: 20px;
    text-align: right;
}

.credit_area{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.credit_area dl{
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 10px;
    align-items: end;
    font-size: 12px;
    line-height: 1.3;
}
h3.sub_title{
    font-size: 20px;
}
article{
    margin-top: 50px;
}
p.comment{
    margin-top: 20px;
}
article a{
color: rgb(137, 153, 39);
text-decoration: underline #333 0.5px;
    text-underline-offset: 5px;
text-decoration-color: rgb(137, 153, 39);
}
article a:hover{
	color:rgb(137, 153, 39);
text-decoration: underline #333 0.5px;
    text-underline-offset: 5px;
text-decoration-color: rgb(137, 153, 39);
}
.image_area{
    margin-top: 20px;
    text-align: center;
}
.image_area > div{
    margin-left: auto;
    margin-right: auto;
}
.image_area > div + div{
    margin-top: 20px;
}
.image_size100 > div{width: 100%;}
.image_size80 > div{width: 80%;}

.image_size50 > div{width: 49%;}
.image_size30 > div{width: 30%;}

@media (min-width:768px){

    .image_size50{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .image_size50 > div:nth-child(-n+2){
        margin-top: 0;
    }

    .image_size30{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .image_size30 > div:nth-child(-n+3){
        margin-top: 0;
    }

}
@media (max-width:768px){
    h2.title{
        font-size: 20px;
    }
    .portfolio_head{
    }

    h3.sub_title{
        font-size: 18px;
    }
    .portfolio_head .back{
        font-size: 30px;
    }
    .image_size_sp100 > div{width: 100%;}
    .image_size_sp80 > div{width: 80%;}
    
    .image_size_sp50{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .image_size_sp50 > div{width: 49%;}
    .image_size_sp50 > div:nth-child(-n+2){
        margin-top: 0;
    }

    .image_size_sp30{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .image_size_sp30 > div{width: 30%;}
    .image_size_sp30 > div:nth-child(-n+3){
        margin-top: 0;
    }


}