@charset "utf-8";
/* 全体に適応 */
.pane-contents .container {
	width: 1200px;
}
.pane-main {
	width: 65%;
	margin: 0 auto;
}
/* サムネイル画像に適応 */
.block-pagecategory-freespace--caption {
	margin-top: 1.5em;
}

/*　メインエリアに適応 */
.block-pagecategory-subcategory-list {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	margin: 1em auto 5em;
	gap: 20px;
}
.block-pagecategory-subcategory-list--category {
	display: block;
	flex-basis: auto;
	flex-shrink: 0;
	flex: 0 0 calc((100% - 40px) / 3); 
	margin-bottom: 20px;
}
/* カテゴリ名に適応 */
.block-pagecategory-subcategory-list--category-caption {
	text-align: center;
	margin-top: 0.5em;
}
.block-pagecategory-subcategory-list--category-caption a {
	text-decoration: none;
	margin: 0 auto;
}
.block-pagecategory-subcategory-list--category-image {
	width: 100%;
    max-width: 400px;
  	aspect-ratio: 4 / 3;
 	margin: 0 auto;
  	overflow: hidden;
}
.block-pagecategory-subcategory-list--category-image figure {
	width: 100%;
	height: 100%;
	margin: 0;
}
.block-pagecategory-subcategory-list--category-image img {
 	width: 100%;
 	height: 100%;
 	object-fit: contain; 
 	display: block;
	border: none;
	outline: none;
}
.img-center img {
	opacity: 1;
	transition: opacity 0.2s ease;
}
.img-center img:hover {
	opacity: 0.6;
}
.block-pagecategory-freespace--caption {
	text-align: center;
}
.block-pagecategory-freespace--caption h1 {
	font-family: dnp-shuei-mgothic-std, sans-serif;
	font-style: normal;
	font-weight: 600;
}
.block-pagecategory-freespace--caption img {
	width: 55%;
}
.block-pagecategory-freespace--caption p {
	font-size: 1rem;
}
@media (max-width: 1200px) {
	.block-pagecategory-subcategory-list {
		margin-top: 3em;
	}
	.pane-contents .container {
		max-width: 100%;
		margin: 0 auto;
	}
	main.pane-main {
		margin: 0 auto;
		max-width: 100%;
		width: 97%;
	}
}

@media (max-width: 886px) {
	.block-pagecategory-subcategory-list {
		margin-top: 2em;
	}
	main.pane-main {
		margin: 0 auto;
		max-width: 100%;
	}
	.block-pagecategory-subcategory-list--category {
		display: block;
		flex-basis: auto;
		flex-shrink: 0;
		flex: 0 0 calc((100% - 20px) / 2); 
		margin-bottom: 20px;
	}
	.block-pagecategory-freespace--caption img {
		width: 100%;
	}
}