@charset "UTF-8";
/* ===========================================
 * Example
 * ======================================== */
.exampleInner {
	padding: 0;
}
.exampleText {
	margin-bottom: 36px;
}
.exampleListContainer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	gap: 20px;
}
.exampleList {
	display: block;
	position: relative;
	z-index: auto;
}
.exampleListText {
	font: bold 3.2rem / 1.25 "Zen Maru Gothic", serif;
	letter-spacing: 0.05em;
	color: #40210F;
}
.exampleListText > span {
	font: bold 2.4rem / 1.25 "Zen Maru Gothic", serif;
}
.exampleListBtn {
	width: 100%;
	height: 160px;
	margin-top: 40px;
	text-align: center;
	font: bold 2.4rem / 1.33 "Zen Maru Gothic", serif;
	color: #FFFFFF;
	border-radius: 20px;
	background-color: #005E2D;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: auto;
}
.exampleListBtn::after {
	content: "";
	width: 32px;
	height: 32px;
	margin-block: auto;
	aspect-ratio: 1 / 1;
	border-radius: 9999px;
	background-color: #F5D660;
	position: absolute;
	z-index: auto;
	top: 0;
	bottom: 0;
	right: 24px;
}
.exampleListBtn::before {
	content: "";
	width: 14px;
	height: 16px;
	aspect-ratio: 14 / 16;
	margin-block: auto;
	background-color: #005E2D;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	right: calc(24px + 6px);
}
.exampleListBtn > span {
	width: fit-content;
	display: block;
}
@media screen and (max-width: 767px) {
	.productInner {
		padding: 0 15px;
	}
	.exampleInner {
		width: min(100%, 375px);
		padding: 0 15px;
	}
	.exampleText {
		margin-bottom: 20px;
	}
	.exampleListContainer {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: repeat(3, auto);
		gap: 50px;
	}
	.exampleListText {
		font: bold 2.4rem / 1.25 "Zen Maru Gothic", serif;
	}
	.exampleListText > span {
		font: bold 1.6rem / 1.25 "Zen Maru Gothic", serif;
	}
	.exampleListBtn {
		width: 100%;
		height: 50px;
		margin-top: 30px;
		font: bold 1.4rem / 1.25 "Zen Maru Gothic", serif;
		border-radius: 9999px;
	}
	.exampleListBtn::after {
		width: 24px;
		height: 24px;
		right: 12px;
	}
	.exampleListBtn::before {
		width: 10px;
		height: 12px;
		right: calc(12px + 5px);
	}
}
#exampleList01::after {
	content: "";
	width: 80px;
	height: 186px;
	background: center top / 80px 186px no-repeat url(../img/example_list01_img.png);
	display: block;
	position: absolute;
	z-index: auto;
	top: -10px;
	right: 0;
}
#exampleList02::after {
	content: "";
	width: 111px;
	height: 193px;
	background: center top / 111px 193px no-repeat url(../img/example_list02_img.png);
	display: block;
	position: absolute;
	z-index: auto;
	top: -15px;
	right: 0;
}
#exampleList03::after {
	content: "";
	width: 171px;
	height: 186px;
	background: center top / 171px 186px no-repeat url(../img/example_list03_img.png);
	display: block;
	position: absolute;
	z-index: auto;
	top: -15px;
	right: -30px;
}
@media screen and (max-width: 767px) {
	#exampleList01::after {
		width: 52px;
		height: 120px;
		background: center top / 52px 120px no-repeat url(../img/example_list01_img_sp.png);
		top: -15px;
		right: 20px;
	}
	#exampleList02::after {
		width: 70px;
		height: 120px;
		background: center top / 70px 120px no-repeat url(../img/example_list02_img_sp.png);
		top: -35px;
		right: 10px;
	}
	#exampleList03::after {
		width: 125px;
		height: 85px;
		background: center top / 125px 85px no-repeat url(../img/example_list03_img_sp.png);
		top: 0;
		right: 0;
	}
}