@charset "utf-8";
/*
品目一覧
*/

.itemlist_wrap {
	width: 100%;
	margin-top: var(--cont-margin50);
}

.itemlist_list01 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cont-margin40);
	margin-bottom: var(--cont-margin40);
}
.itemlist_box {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 216px), 1fr));
	background: #fff;
	a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		overflow: hidden;
	}
	a:nth-of-type(1) {order:2;}
	a:nth-of-type(2) {order:1;}
	img {
		width: 100%;
		aspect-ratio: 5/4;
		object-fit: cover;
		transition: .75s;
	}
	a:hover img,
	a:hover ~ a img {
		scale: 1.2;
		opacity: 0.5;
	}
	.itemlist_ttl_wrap {
		display: flex;
		flex-direction: column;
		width: 90%;
		align-items: center;
	}
	.itemlist_ttl_wrap::after {
		content: attr(data-en);
		display: block;
		font-size: .8rem;
		color: #000;
		line-height: 1.0;
		font-weight: normal;
		margin-bottom: var(--cont-margin20);
	}
	h3 {
		text-align: center;
		width: 100%;
		font-size: var(--font-l);
		line-height: 1.0;
		padding-bottom: var(--cont-margin10);
		border-bottom: 1px solid #000;
		margin: var(--cont-margin20) auto var(--cont-margin10);
		position: relative;
	}
	h3::first-letter {
		color: var(--base-color01);
	}
	p {
		width: 80%;
		margin: 0 auto var(--cont-margin20);
	}
}

@media (max-width: 970.98px) {
	.itemlist_box {
		align-content: start;
		align-items: start;
	}
}
@media (max-width: 499.98px) {
	.itemlist_list01 {
	}
}

@media (max-width: 767.98px) {
	.itemlist_list01 h3 {
		font-size: var(--font-m);
	}
}


.result_wrap {
	width: 100%;
	margin-top: var(--cont-margin30);
}
.result_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
	gap: var(--cont-margin40);
}
.result_box {
	width: 100%;
}
.result_img {
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	background: #fff;
	border-radius: 16px;
	a {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 5/4;
		position: relative;
		img {
			aspect-ratio: 5/4;
			object-fit: cover;
			transition: .75s;
		}
		.result_cate {
			background: var(--base-color01);
			position: absolute;
			right: 10px;
			bottom: 10px;
			line-height: 1.0;
			z-index: 2;
		}
	}
	a:hover img {
		scale: 1.2;
		opacity: 0.5;
	}
}
.result_date {
	width: 100%;
	margin-top: var(--cont-margin10);
	a.date {
		width: fit-content;
		margin-left: auto;
	}
}

@media (min-width: 1200px) {
	.result_list { grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 599.98px) {
	.result_list { grid-template-columns: repeat(2, 1fr);}
}




#detail .detail_wrap {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--cont-margin30);
}

.detail_txt {
	h2 {
		text-align: left;
		line-height: 1.3;
		font-size: var(--font-l);
	}
	.title_wrap::after {
		width: 100%;
		background: #000;
		height: 2px;
		border-radius: 0;
	}
	.date_box {
		display: flex;
		gap: var(--cont-margin10);
		margin: var(--cont-margin10) 0;
		line-height: 1.0;
	}
	.result_cate {
		background: var(--base-color01);
	}
}

.detail_img img {
	aspect-ratio: 4/3;
	object-fit: contain;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}