/* 
 catalog
----------------------------------------------------------- */ 
.flyers{
	background: url("../img/catalog/general-bg.png") bottom right / clamp(300px, 37.5vw, 720px) auto no-repeat;
}
.flyers-list{
	display: grid;
	grid-column-gap: clamp(15px, 1.6vw, 30px);
	grid-row-gap: clamp(30px, 4.1vw, 80px);
	grid-template-columns: repeat(5, 1fr);
}
.flyers-list__item{
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 20px;
}
.flyers-list__link{
	display: block;
}
.flyers-list__box{
	background-color: #fff;
	border-radius: 4px;
	padding: 20px;
	height: 100%;
	box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
.flyers-list__img{
	margin-bottom: 12px;
	position: relative;
	z-index: 0;
}
.flyers-list__img::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	transition: opacity var(--trans-base);
	opacity: 0;
}
.flyers-list__img::after{
	content: "チラシを見る";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	white-space: nowrap;
	color: #fff;
	font-size: var(--fontsize-14);
	font-weight: 700;
	padding-right: 22px;
	background: url("../img/common/icon-link.svg") center right / 14px auto no-repeat;
	transition: opacity var(--trans-base);
	opacity: 0;
}
.flyers-list__link:hover .flyers-list__img::before,
.flyers-list__link:hover .flyers-list__img::after{
	opacity: 1;
}
.flyers-list__img img{
	width: 100%;
	height: 100%;
	aspect-ratio: 12 / 17;
	object-fit: cover;
}
.flyers-list__title{
	font-size: var(--fontsize-16);
	font-weight: 700;
}
.flyers-list__text{
	font-size: 12px;
	color: var(--main-color);
}
.general{
	background-color: var(--bg-gray);
}
.general .c-sub-title__ja::before{
	content: "02";
}
.general__body{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: clamp(30px, 5.7vw, 110px);
	align-items: center;
}
.general__img{
	width: 50vw;
	margin-left: calc(50% - 50vw);
}
.general__img img{
	width: 100%;
	height: auto;
	border-radius: 0 10px 10px 0;
}
.general__text{
	flex: 1;
}
.general__cta{
	margin-top: clamp(30px, 4.1vw, 80px);
}
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1280px) {
	.flyers-list{
		grid-template-columns: repeat(4, 1fr);
	}
	.general__cta{
		margin-top: 25px;
	}
}
@media screen and (max-width: 1024px){
	.flyers-list{
		grid-template-columns: repeat(3, 1fr);
	}
	.general__img{
		width: 95vw;
	}
	.general__text{
		flex: auto;
		width: 100%;
	}
}
@media screen and (max-width: 767px){
	.flyers-list{
		grid-template-columns: repeat(2, 1fr);
	}
	.flyers-list__link{
		gap: 12px;
	}
}
@media screen and (max-width: 480px){
	.flyers-list__box{
		padding: 12px;
	}
}