@charset "utf-8";
/* すべてに適応 */
.pane-contents .container {
	width: 1200px;
}
.pane-main {
	width: 65%;
	margin: 0 auto;
}
/* サムネイル画像に適応 */
.block-pagecategory-freespace--caption {
	margin-top: 1.5em;
	text-align: center;
}
/* メインエリアに適応 */
.block-pagecategory-page-list--frame.js-pagecategory-list-wrapper {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	margin: 5em auto 0;
	gap: 20px;
}
.block-pagecategory-page-list--page {
	display: block;
	flex-basis: auto;
	flex-shrink: 0;
	flex: 0 0 calc((100% - 40px) / 3); 
	margin-bottom: 20px;
}

.block-pagecategory-page-list--page-caption {
	margin-top: 0.5em;
}
.block-pagecategory-page-list--page-caption a {
	text-decoration: none;
	margin: 0 auto;
}
.block-pagecategory-page-list--page-image {
	width: 100%;
    max-width: 400px;
  	aspect-ratio: 4 / 3;
 	margin: 0 auto;
  	overflow: hidden;
}
.block-pagecategory-page-list--page-image figure {
	width: 100%;
	height: 100%;
	margin: 0;
}
.block-pagecategory-page-list--page-image img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover; 
 	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--pager-bottom.block-pagecategory--pager.pager {
	padding-bottom: 1em;
}
.block-pagecategory-page-list--frame .block-pagecategory-page-list--page {
	margin: 0;
}
.block-pagecategory-freespace--caption p {
	font-size: 1rem;
	text-align: center;
}
/* NEWアイコンの位置調整 */
.block-pagecategory-page-list--page {
	position: relative;
}
.block-pagecategory-page-list--auto-new img {
	position: absolute;
	top: 0;
	left: 0;
}
/*キャンペーン用バナーの調整*/
.column-to-campaign img {
	transition:0.3s;
}
.column-to-campaign img:hover {
	opacity:0.5;
}
@media (min-width: 767px) {
	.column-to-campaign img {
		width: 80%;
	}
}
@media (max-width: 1200px) {
	.pane-contents .container {
		max-width: 100%;
		margin: 0 auto;
	}
	.pane-main {
		margin: 0 auto;
		max-width: 100%;
		width: 97%;
	}
}
@media (max-width: 886px) {
	.pane-main {
		margin: 0 auto;
		max-width: 100%;
	}
	.block-pagecategory-page-list--page {
		display: block;
		flex-basis: auto;
		flex-shrink: 0;
		flex: 0 0 calc((100% - 20px) / 2); 
		margin-bottom: 20px;
	}
}