@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

img{width:100%;}


.main_area *{box-sizing: border-box;}

.main_box h1{
	font-size:50px;
	font-weight:200;
	letter-spacing:.1em;
	padding-top:30px;
}

.main_list{
	margin: auto;
	max-width:1240px;
	font-family: "Noto Sans JP", sans-serif;
	padding:40px 20px;
	display: flex;
	flex-wrap: wrap;
	gap:20px;
}

.main_list a{
	overflow:hidden;
	width:calc((100% - 20px)/ 2);
	text-decoration:none;
	color:#222;
	transition:.2s;
}

.list_img{
	position:relative;
	overflow:hidden;
	line-height:0;
}
.list_img::before,.list_img::after{
	content:"";
	position: absolute;
	width: 40%;
	height: 40%;
	background-color: #fff;
	transition:.2s;
}
.list_img::before{
	top:-15%;
	left:-15%;
	clip-path: polygon(0% 100%, 0% 0%, 100% 0%);
}
.list_img::after{
	bottom:-15%;
	right:-15%;
	clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}


.main_list a p{font-weight:300;letter-spacing:.05em;}


@media only screen and (min-width: 768px) {
	.main_list a:hover .list_img::before{top:-9%;left:-9%;}
	.main_list a:hover .list_img::after{bottom:-9%;right:-9%;}
}



@media only screen and (max-width:1100px) {
	.main_list{max-width:600px;}
	.main_list a{width:100%;}
}