/*===============================================================================
スライダー
================================================================================*/
.cas-slider{
	margin-bottom: var(--g-48);
}
@media (min-width: 600px){
	.cas-slider{
		margin-bottom: var(--g-sec--md);
	}
}
.cas-slider__swiper .swiper-wrapper{
	transition-timing-function: linear;
}

.cas-slider__swiper .swiper__thumbnail img{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	object-position: 50% 50%;
}

/*===============================================================================
メッセージ
================================================================================*/
.cas-message{
	max-width: fit-content;
	margin-inline: auto;
	margin-bottom: var(--g-48);
	font-size: var(--fz-16);
	font-weight: var(--fw-lg);
}
@media (min-width: 600px){
	.cas-message{
		margin-bottom: var(--g-sec--sm);
		font-size: var(--fz-20);
	}
}



/*===============================================================================
メイン：２カラム
================================================================================*/
.cases__main{
	display: flex;
	flex-direction: column;
	gap: var(--g-48) var(--g-24);
}
@media (min-width: 768px){
	.cases__main{
		display: flex;
		flex-direction: row-reverse;
	}
}


/*===============================================================================
ページ内リンク
================================================================================*/
@media (min-width: 768px){
	.cas-link{
		max-width: 18rem;
		margin-inline: auto;
	}
}
.cas-link__inner{
	position: sticky;
	top: 0;
	left: 0;
}
.cas-link__title{
	font-family: var(--ff-g);
	font-weight: var(--fw-xl);
	font-size: var(--fz-24);
}
.cas-link__container{
	max-height: 85vh;
	padding: var(--g-20);
	background: var(--c-light);
	border: 1px solid var(--c-main);
	border-radius: var(--bd-r--sm);
	overflow: scroll;
	font-size: var(--fz-14);
	font-weight: var(--fw-lg);
}
@media (min-width: 768px){
	.cas-link__container{
		font-size: var(--fz-12);
	}
}

.cas-link__item:not(:last-of-type){
	margin-bottom: var(--g-4);
	border-bottom: 1px solid var(--c-gray--light);
}
.cas-link__item{
	display: flex;
	gap: var(--g-24);
}
@media (min-width: 768px){
	.cas-link__item{
		display: block;
	}
}
.cas-link__lead span{
	color: var(--c-main);
}
.cas-link__link{
	display: block;
	padding-bottom: var(--g-4);
	color: var(--c-dark);
	text-decoration: underline;
	transition: var(--ani-t--normal) ease-out;
}
.cas-link__link:is(:hover, :focus){
	opacity: .7;
}



/*===============================================================================
実例
================================================================================*/
.cas-cases{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: var(--g-32);
	max-width: var(--width-xs);
	margin-inline: auto;
}
@media (min-width: 600px){
	.cas-cases{
		gap: var(--g-sec--sm);
	}
}
.cas-case__head{
	margin-bottom: var(--g-16);
	padding: var(--g-4) var(--g-16);
	background: var(--c-main);
}
@media (min-width: 600px){
	.cas-case__head{
		margin-bottom: var(--g-24);
	}
}
.cas-case__number{
	max-width: 720px;
	margin-inline: auto;
	font-size: var(--fz-20);
	font-weight: var(--fw-lg);
	color: var(--c-light);
}
.cas-case__body{
	max-width: 720px;
	margin-inline: auto;
}
.cas-case__container{
	display: flex;
	flex-direction: column;
	gap: var(--g-12);
}
@media (min-width: 600px){
	.cas-case__container{
		gap: var(--g-16);
	}
}
.cas-case__image img{
	display: block;
	width: 100%;
	height: 100%;
/* 	aspect-ratio: 72 / 36; */
	object-fit: cover;
	object-position: 50% 50%;
}
.cas-case__title{
	border-bottom: 1px solid var(--c-gray--light);
	font-weight: var(--fw-lg);
	font-size: var(--fz-20);
}
.cas-case__summary{
	padding: var(--g-12);
	border: 1px solid var(--c-gray);
	font-weight: var(--fw-lg);
}