@charset "utf-8";

/* PC
-------------------------------------------------- */
@media screen and (min-width:1200px){
	.pgLogo{
		box-sizing: border-box;
		background: #000000;
		padding: 30px 0;
	}
	
	.pgLogo h1{
		text-align: center;
	}
	
	.pgLogo span{
		display: block;
		text-align: center;
		color: #ffffff;
		font-size: 16px;
		font-weight: 600;
		margin-top: 20px;
	}
	
	.pgLogo span br{
		display: none;
	}
	
	section{
		background: #f5f7f7;
	}
	
	.secInner{
		box-sizing: border-box;
		width: 100%;
		padding: 45px 0;
	}
	
	.itemList{
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 30px;
	}
	
	.itemList li{
		display: block;
		width: 100%;
		max-width: 360px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.itemList li:nth-child(3n+2){
		margin-right: 30px;
		margin-left: 30px;
	}
	
	.itemList li a{
		display: block;
		box-sizing: border-box;
		padding: 40px;
		border-radius: 20px;
		overflow: hidden;
		background: #ffffff;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16);
		color: #000000;
		text-decoration: none;
		transition: 0.2s;
	}
	
	.itemList li a:hover{
		transform: translateY(3px);
		box-shadow: 0 0 6px rgba(0,0,0,0.16);
	}
	
	.date{
		font-size: 14px;
		font-weight: 500;
	}
	
	.itemImg{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40px 0;
		aspect-ratio: 1 / 1;
		padding: 0 30px;
	}
	
	.itemImg img{
		width: 100%;
	}
	
	.itemName{
		display: block;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		transition: 0.2s;
	}
	
	.itemList li a:hover .itemName{
		color: #cc0000;
	}
}

/* SP
-------------------------------------------------- */
@media screen and (max-width:1199px){
	.pgLogo{
		box-sizing: border-box;
		background: #000000;
		padding: 100px 50px;
	}
	
	.pgLogo h1{
		text-align: center;
	}
	
	.pgLogo h1 img{
		width: 100%;
		max-width: 305px;
	}
	
	.pgLogo span{
		display: block;
		text-align: center;
		color: #ffffff;
		font-size: 16px;
		font-weight: 600;
		margin-top: 20px;
	}
	
	section{
		background: #f5f7f7;
	}
	
	.secInner{
		box-sizing: border-box;
		width: 100%;
		padding: 10px 0;
	}
	
	.itemList{
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
	}
	
	.itemList li{
		display: block;
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.itemList li a{
		display: block;
		box-sizing: border-box;
		padding: 40px;
		border-radius: 20px;
		overflow: hidden;
		background: #ffffff;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16);
		color: #000000;
		text-decoration: none;
		transition: 0.2s;
	}
	
	.itemList li a:hover{
		transform: translateY(3px);
		box-shadow: 0 0 6px rgba(0,0,0,0.16);
	}
	
	.date{
		font-size: 14px;
		font-weight: 500;
	}
	
	.itemImg{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40px 0;
		aspect-ratio: 1 / 1;
		padding: 0;
	}
	
	.itemImg img{
		width: 100%;
	}
	
	.itemName{
		display: block;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		transition: 0.2s;
	}
	
	.itemList li a:hover .itemName{
		color: #cc0000;
	}
}