body:has(.a_p_cases) {
	background-color: #F4F7F7;
}

.l-content:has(.a_p_cases) {
	padding-top: 0;
}

.a_p_cases {
	padding-top: 4rem;
}
.a_p_cases__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}
.a_p_cases__item {
	background-color: var(--c-light);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.a_p_cases__number {
	padding: 1rem;
	text-align: center;
	background-color: var(--c-main);
	color: var(--c-light);
	font-size: var(--fz-20);
	font-weight: bold;
}
.a_p_cases__content {
	display: grid;
	grid-template-rows: 200px 250px 1fr;
	gap: 0.6rem;
	padding: 2rem;
	flex: 1;
}
.a_p_cases__content > * {
	min-width: 0;
}
.a_p_cases__textarea {
	display: flex;
	gap: 0.6rem;
	flex-direction: column;
}
.a_p_cases__title {
	display: -webkit-box;
	color: var(--c-main);
	text-align: center;
	font-size: var(--fz-24);
	flex: none;
	word-break: break-word;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.a_p_cases__summary {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--fz-16);
	flex: 1;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}
.a_p_cases__summary p {
	margin: 0;
	overflow-wrap: anywhere;
	overflow: clip;
}
.a_p_cases__imgwrap {
	display: grid;
	place-items: center;
}
.a_p_cases__imgwrap img {
	max-height: 200px;
}
.a_p_cases__bottom {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.6rem;
}
.a_p_cases__info {
	margin: 0 auto;
	flex: 1;
}
.a_p_cases__info_item {
	list-style: inside;
	font-size: var(--fz-14);
	word-break: break-word;
}
.a_p_cases__link {
	padding: 0.2rem 0;
	border-radius: 1rem;
	background-color: var(--c-act02);
	text-align: center;
	text-decoration: none;
	color: var(--c-light);
	font-size: var(--fz-20);
	box-shadow: 2px 2px 0px #00000029;
	transition: transform 0.3s, box-shadow 0.3s;
}
.a_p_cases__link:hover {
	box-shadow: 0px 0px 0px #00000029;
	transform: translate(0, 2px);
	opacity: 0.9;
}
.a_p_cases__after {
	display: inline-block;
	content: ">>";
	transition: transform 0.3s;
	vertical-align: -18%;
}
.a_p_cases__link:hover .a_p_cases__after {
	--hover-trigger: true;
	transform: translate(0.5rem);
}

.a_p_cases__pagination {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin: 50px auto;
}
.a_p_cases__pagination_link {
	display: grid;
	place-items: center;
	width: 32px;
	aspect-ratio: 1;
	background-color: var(--c-light);
	color: var(--color_main);
	border: var(--color_main) 1px solid;
}
.a_p_cases__pagination_link.active {
	background-color: var(--color_main);
	color: var(--c-light);
	border: var(--c-light) 1px solid;
	pointer-events: none;
}
.a_p_cases__pagination_next {
	display: grid;
	place-items: center;
	width: 32px;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--color_main);
	color: var(--c-light);
}
.a_p_cases__pagination_dots {
	display: grid;
	place-items: center;
	color: var(--color_main);
}







/* single-purchase-cases */

body:has(.s_p_case__article) {
	background-color: #F4F7F7;
}
body:has(.s_p_case__article) .p-breadcrumb {
	display: none;
}
.l-content:has(.s_p_case__article) {
	padding-top: 0;
}
.s_p_case__article {
	margin: 50px 0;
}
.s_p_case__article_title {
	background-color: var(--color_main);
	color: var(--c-light);
	text-align: center;
	padding: 1rem;
	font-size: var(--fz-20);
}
.s_p_case__content {
	display: grid;
	grid-template-columns: 1fr 300px;
	background-color: var(--c-light);
	padding: 48px 32px;
	gap: 100px 24px;
}
@media (max-width: 768px) {
	.s_p_case__content {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
}

.s_p_case__article section {
	grid-column: 1/2;
}




.s_p_case__summary {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.s_p_case__summary p {
	word-break: break-word;
}
.s_p_case__summary_title {
	font-size: var(--fz-28);
	margin-bottom: -48px;
	word-break: break-word;
}
@media (max-width: 768px) {
	.s_p_case__summary_title {
		margin-bottom: 0;
	}
}

.s_p_case__summary_imgarea {
	display: none;
	animation: fade-in 0.6s;
}
.s_p_case__summary_imgarea.active {
	display: block;
	height: 450px;
	background-color: var(--c-gray--light);
}
.s_p_case__summary_imgarea.active img {
	object-fit: contain;
	object-position: 50% 50%;
	width: 100%;
	height: 450px;
}
@keyframes fade-in {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 1;
	}
}
.s_p_case__summary_imgarea.active {
	display: block;
}
.s_p_case__summary_display {
	display: grid;
	align-items: center;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.s_p_case__summary_imgwrap {
	box-sizing: border-box;
	cursor: pointer;
	transition: filter 0.3s;
	box-shadow: 1px 1px 3px #00000029;
}
.s_p_case__summary_imgwrap.active {
	pointer-events: none;
	border: var(--color_main) 3px solid;
	border-radius: 5px;
	filter: none;
}
.s_p_case__summary_imgwrap:hover {
	filter: brightness(80%);
}
.s_p_case__summary_text {
	font-size: var(--fz-16);
}




.s_p_case__table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(auto-fill, 1fr);
	background-color: var(--c-gray--dark);
	gap: 1px;
	padding: 1px;
}
.s_p_case__table_thead {
	background-color: transparent;
	grid-column: 1/3;
	text-align: center;
	color: var(--c-light);
	font-size: var(--fz-18);
	font-weight: 700;
	padding: 0.5rem;
	word-break: break-word;
}
.s_p_case__table_td {
	background-color: var(--c-light);
	text-align: center;
	font-size: var(--fz-16);
	padding: 0.5rem;
	word-break: break-word;
}

.s_p_case__aside_ctalist {
	display: grid;
	gap: 2rem;
	margin: 50px 0;
}
.s_p_case__aside_ctaitem {
	display: block;
	background-color: var(--c-act02);
	border-radius: 99999px;
	color: var(--c-light);
	text-align: center;
	padding: 0.5rem 0;
	font-size: var(--fz-20);
	box-shadow: 2px 2px #00000029;
	transition: transform 0.3s, box-shadow 0.3s;
}
.s_p_case__aside_ctaitem:hover {
	box-shadow: 0px 0px #00000029;
	transform: translateY(2px);
}
.s_p_case__aside_ctaitem--green {
	background-color: var(--color_main)
}




.s_p_case__section {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.s_p_case__section_title {
	display: flex;
	gap: 16px;
	align-items: center;
	font-size: var(--fz-24);
}
.s_p_case__section_title_before {
	display: inline-grid;
	place-items: center;
	background-color: var(--color_main);
	color: var(--c-light);
	width: 2rem;
	aspect-ratio: 1;
	font-size: var(--fz-16);
}




.s_p_case__review_title {
	border-left: var(--color_main) 12px solid;
	font-size: var(--fz-24);
	padding-left: 1rem;
}
.s_p_case__review_item {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 24px 48px;
	border: var(--color_main) 1px solid;
	margin: 24px 0;
}
.s_p_case__review_head {
	font-size: var(--fz-18);
}
.s_p_case__review_client {
	float: right;
	font-weight: 300;
	margin-right: 50px;
}
@media (max-width: 600px) {
	.s_p_case__review_item {
		padding: 16px;
	}
	.s_p_case__review_client {
		margin: 0;
	}
}


.s_p_case__comment_title {
	border-left: var(--color_main) 12px solid;
	font-size: var(--fz-24);
	padding-left: 1rem;
}
.s_p_case__comment_item {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 24px 48px;
	border: var(--color_main) 1px solid;
	margin: 24px 0;
}


.s_p_case__related {
	background-color: var(--c-light);
	padding-bottom: 32px;
	container-type: inline-size;
}
.s_p_case__related_list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	align-content: stretch;
	padding: 1rem;
	gap: 24px;
}
@container (max-width: 1024px) {
	.s_p_case__related_list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@container (max-width: 578px) {
	.s_p_case__related_list {
		grid-template-columns: auto;
	}
}
.s_p_case__related_link {
	display: flex;
	flex-direction: column;
	align-content: stretch;
}
.s_p_case__related_item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 1rem;
	color: var(--c-dark);
	box-shadow: 0 0 6px #00000029;
	flex: 1;
}
.s_p_case__related_imgwrap {
	display: grid;
	place-items: center;
}
.s_p_case__related_imgwrap img {
	height: 100%;
	max-height: 150px;
}
.s_p_case__related_textarea {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.s_p_case__related_number {
	color: var(--color_main);
	font-weight: 700;
	font-size: var(--fz-24);
}
.s_p_case__related_title {
	font-size: var(--fz-20);
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-word;
	text-align: center;
}
.s_p_case__related_summary {
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	word-break: break-word;
}
.s_p_case__related_viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 320px;
	margin: 32px auto;
	padding: 0.6rem 0;
	background-color: var(--c-act02);
	text-align: center;
	text-decoration: none;
	color: var(--c-light);
	font-size: var(--fz-20);
	box-shadow: 2px 2px 0px #00000029;
	transition: transform 0.3s, box-shadow 0.3s;
}
.s_p_case__related_viewall:hover {
	box-shadow: 0px 0px 0px #00000029;
	transform: translate(0, 2px);
	opacity: 0.9;
}
.s_p_case__related_viewall_after {
	display: inline-block;
	transition: transform 0.3s;
	display: flex;
}
.s_p_case__related_viewall:hover .s_p_case__related_viewall_after {
	--hover-trigger: true;
	transform: translate(0.5rem);
}


.s_p_case__ctalist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin: 50px 0;
}
@media (max-width: 600px) {
	.s_p_case__ctalist {
		grid-template-columns: auto;
	}
}
.s_p_case__ctaitem {
	display: block;
	background-color: var(--c-act02);
	border-radius: 99999px;
	color: var(--c-light);
	text-align: center;
	padding: 0.5rem 0;
	font-size: var(--fz-24);
	box-shadow: 2px 2px #00000029;
	transition: transform 0.3s, box-shadow 0.3s;
}
.s_p_case__ctaitem:hover {
	box-shadow: 0px 0px #00000029;
	transform: translateY(2px);
}
.s_p_case__ctaitem--green {
	background-color: var(--color_main)
}