/*------------------------------
* 
*  Works-magazine
*         
------------------------------*/

.magazine-booklet-list{
	width: 930px;
    margin: 0 auto;
}

.title-box{
	width: 300px;
	height: 240px;
	background-color: #efd593;
	color: #fff;
	font-size: 3.9rem;
	vertical-align: middle;
	display: table-cell;
}

.title-box span{
	font-size: 2.8rem;
}

.list-top{
	display: flex;
}

.list-image-square {
    max-width: 550px;
    height: auto;
    margin-bottom: 70px;
    margin-left: auto;
}

.list-image-portrait{
	max-width: 480px;
	height: auto;
	margin-bottom: 70px;
    margin-left: auto;
}

.list-image-landscape{
	max-width: 650px;
	height: auto;
	margin-bottom: 70px;
    margin-left: auto;
}


.list-bottom div:last-of-type{
	margin-bottom: 167px;
}


@media screen and (max-width:1200px){
	
	.magazine-booklet-list {
		width: 730px;
	}
	
	.title-box {
		width: 220px;
		height: 176px;
		font-size: 3.0rem;
	}
	
	.title-box span {
		font-size: 2.2rem;
	}
	
	.list-image-square {
		max-width: 450px;
		margin-bottom: 60px;
	}
	
	.list-image-portrait {
		max-width: 420px;
		margin-bottom: 60px;
	}
	
	.list-image-landscape {
		max-width: 600px;
		margin-bottom: 60px;
	}

	
	
}
	
	
@media screen and (max-width:768px){

	
	.list-top{
		margin-top: 70px;
		display: block;
	}
	
	.list-title{
		width: 100%;
		margin-bottom: 20px;
		position: absolute;
    	left: 0;
	}
	
	.title-box{
		width: 188px;
		height: 83px;
		font-size: 2.0rem;
	}	
	
	.title-box span {
		font-size: 1.4rem;
	}
	
	.list-image-square {
		width: 275px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	
	.list-image-portrait{
		width: 240px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	
	.list-image-landscape{
		width: 325px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	
	.magazine-booklet-list {
		width: 325px;
		margin: 0 auto;
	}
	
	.list-top img{
		margin-top: 103px;
	}
	
	.list-bottom div:last-of-type {
		margin-bottom: 130px;
	}
	
	
}