@charset "UTF-8";

main {
	display: flex;
}

.ContentsArea {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(100% - 10%);
	padding: 50px 40px;
	
}

.ContentsArea h2 {
	font-size: 30px;
	padding: 0 0 20px;
	font-weight: 500;
	text-align: center;
}

.ContentsArea section ul.menu {
	width: 210px;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	margin-bottom: 50px;
	font-size: 20px;
	font-weight: 500;
}
.ContentsArea section ul.menu li:first-child {
	margin-right: 30px;
}
.ContentsArea section ul.menu li a {
	position: relative;
    padding: 0px 20px 3px;
    text-align: center;
    color: #333;
    text-decoration: none;
    border-radius: 50px;
    background-color: #f8f05e;
}
body header nav ul li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

.ContentsArea section ul.menu li.not_here a {
	position: relative;
    background-color: inherit;
	border: solid 1px #333;
}
.ContentsArea section ul.menu li.not_here a:hover {
    background-color: #f8f05e;
	border: solid 1px #fdfcf9;
}

.ContentsArea section ul.li_contents  {
	display: flex;
    flex-wrap: wrap;
	justify-content: left;
    padding: 0px;
    margin: 0px -25px 0px 0px;
    list-style: none;
}
.ContentsArea section ul.li_contents  li {
	overflow: hidden;
	width: calc(100% / 4 - 35px);
	height: auto;
	background-color: #ffffff;
	border-radius: 15px;
	margin-right: 35px;
	margin-bottom: 35px;
}
.ContentsArea section ul.li_contents li:nth-child(4n) {
	margin-right: 0px;
}
.ContentsArea section ul.li_contents li a{
	position: relative;
    overflow: hidden;
    padding-top: 70%;
	border-radius: 15px;
}
.ContentsArea section ul.li_contents li img {
	width: 100%;
    height: 100%;
    object-fit: cover;
	transform: scale(1);
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	border-radius: 15px;
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
.ContentsArea section ul.li_contents li a:hover img{/*hoverした時の変化*/
	transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
	border-radius: 15px;
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
span.mask{
    display: block;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
	border-radius: 15px;
}


@media screen and (max-width:599px) {
	.ContentsArea {
		width: 100%!important;
		height: auto;
		padding: 80px 25px 20px;
	}
	.ContentsArea h2 {
		font-size: 25px;
	}
	
	.ContentsArea section ul.menu {
		width: 180px;
		font-size: 20px;
	}
	.ContentsArea section ul.li_contents li {
		width: calc(100% / 2 - 25px);
	}
	.ContentsArea section ul.li_contents li:nth-child(4n) {
		margin-right: 10px;
	}
	.ContentsArea section ul.li_contents li:nth-child(2n) {
		margin-right: 0px!important;
	}
}