#articleBox ul.articleList{display: flex;flex-wrap: wrap;}
/*#articleBox ul.articleList li{width: calc((100% / 3 ) - 10px);margin: 0 7px 14px; }*/
#articleBox ul.articleList li{
	width: 86%;
    position: relative;
    height: 360px;
    margin-bottom: 75px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#articleBox ul.articleList li .photoBox{width: 500px;position: absolute;top: 0px;left: 0px;}
#articleBox ul.articleList li .info{
	width: 400px;
    background: #fff;
    height: 280px;
    box-sizing: border-box;
    padding: 40px;
    position: relative;
}
#articleBox ul.articleList li .info .cate a{
	display: block;
	font-style: normal;
	font-size: 14px;
	color: #9071f5;
	font-family: 'Roboto';
	font-weight: 700;
}
#articleBox ul.articleList li .info .cate a i{margin-right: 5px;}
#articleBox ul.articleList li .info h3{
	width: 70%;
	font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    font-family: "Noto Sans JP";
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-line-clamp: 3;
}
#articleBox ul.articleList li .info .morebtn{
	display: block;
    width: 70%;
    padding: 10px 0;
    background: #000;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    transition: background ease .4s;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    border: 1px solid #000;
}
#articleBox ul.articleList li .info .morebtn:hover{
	color: #000;
	background: #fff;
}

@media screen and (min-width: 1025px) and (max-width: 1320px){
	#articleBox{padding: 0px 0px 40px 0px;width: calc(100% - 286px);}
	#articleBox ul.articleList li{width: 100%;}
	#articleBox ul.articleList li .info{padding: 20px;}
	#articleBox ul.articleList li .info h3{font-size: 24px;}
	#articleBox ul.articleList li .info .morebtn{padding: 7px 0px;}
}
@media screen and (min-width: 1025px) and (max-width: 1140px){
	#articleBox ul.articleList li .info{width: 300px;}
}
@media screen and (max-width: 920px){
	#articleBox ul.articleList li{width: 95%;}
}
@media screen and (max-width: 840px){
	#articleBox ul.articleList li{width: 100%;}
}
@media screen and (max-width: 768px){
    #articleBox ul.articleList li{width: 100%;height: auto;}
    #articleBox ul.articleList li .photoBox{position: static;width: 100%;}
    #articleBox ul.articleList li .info{position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.65);}
    #articleBox ul.articleList li .info .morebtn{width: 180px;}
}
@media screen and (max-width: 480px){
    #articleBox ul.articleList li .info{padding: 20px;}
    #articleBox ul.articleList li .info h3{font-size: 24px;}
    #articleBox ul.articleList li .info .morebtn{width: 120px;padding:5px 0px;}
}
@media screen and (max-width: 374px){
    #articleBox ul.articleList li .info h3{font-size: 20px;}
    #articleBox ul.articleList li .info .morebtn {
        padding: 3px 0px;
    }