@charset "utf-8";

/*-------------------------------
	キービジュアル
-------------------------------*/

.Keyvisual{
	background-image: url(../images/case/bg_keyvisual.jpg);
	background-image: image-set(url(../images/case/bg_keyvisual.jpg) 1x, url(../images/case/bg_keyvisual@2x.jpg) 2x);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.Keyvisual{
		background-image: url(../images/case/sp_bg_keyvisual.jpg);
		background-image: image-set(url(../images/case/sp_bg_keyvisual.jpg) 1x, url(../images/case/sp_bg_keyvisual@2x.jpg) 2x);
	}

}



/*-------------------------------
	一覧
-------------------------------*/

/*----- 検索パネル */
.Case-search{
	margin-bottom: 10rem;
	padding: 9.5rem 2.5rem;
	background: #f7f7f7;
}
.Case-search__title{
	font-size: 3rem;
	margin-bottom: 3.8rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}
.Case-search__inner{
	max-width: 70.4rem;
	margin-left: auto;
	margin-right: auto;
}
.Case-search__list{
	width: 100%;
	margin-bottom: 3rem;
	gap: 1.5rem .8rem;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}
.Case-search__list-item{
	border: .3rem solid var(--blackcolor);
	width: calc((100% - .8rem) / 2);
	height: 7rem;
	background: #fff;
}
.Case-search__list-item::after{
	z-index: 4000;
	transform: translateY(-50%) rotate(45deg);
}
.Case-search__list-item > *{
	width: 100%;
	height: 100%;
	padding: .5rem 2rem;
	font-weight: 700;
	position: relative;
	z-index: 6000;
}
.Case-search__button-wrap{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Case-search__button{
	width: 26rem;
	height: 6rem;
	position: relative;
}
.Case-search__list-item.-keyword{
	width: 100%;
	max-width: 54.8rem;
	margin-left: auto;
	margin-right: auto;
}
.Case-search__button:not(:last-child){
	margin-right: 2.8rem;
}
.Case-search__button.-submit{
	border: .3rem solid var(--blackcolor);
	background: var(--maincolor);
	transition: var(--transition);
	border-radius: 3rem;
	cursor: pointer;
}
.Case-search__button.-submit:hover{
	background: var(--blackcolor);
}
.Case-search__button.-submit input[type="submit"]{
	width: 100%;
	height: 100%;
	padding-left: 2.6rem;
	font-weight: 700;
	overflow: hidden;
	text-align: center;
	color: #fff;
	position: relative;
	z-index: 6000;
}
.Case-search__button.-submit::after{
	content: "";
	display: block;
	width: 2.6rem;
	height: 2.6rem;
	background-image: url(../images/case/icon_case-search.png);
	background-image: image-set(url(../images/case/icon_case-search.png) 1x, url(../images/case/icon_case-search@2x.png) 2x);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(calc(-50% - 2.6rem),-50%);
	z-index: 4000;
}
.Case-search__button.-reset{
	border: .3rem solid var(--blackcolor);
	background: var(--blackcolor);
	transition: var(--transition);
	border-radius: 3rem;
}
.Case-search__button.-reset input[type="button"]{
	width: 100%;
	height: 100%;
	font-weight: 700;
	overflow: hidden;
	text-align: center;
	color: #fff;
}
.Case-search__button.-reset:hover{
	background: var(--maincolor);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	/*----- 検索パネル */
	.Case-search{
		margin-bottom: 5rem;
		padding: 4.5rem 2rem 4.2rem;
	}
	.Case-search__title{
		font-size: 2.5rem;
		margin-bottom: 2.8rem;
	}
	.Case-search__inner{
		max-width: 100%;
	}
	.Case-search__list{
		width: 100%;
		gap: .8rem 0;
		flex-direction: column;
	}
	.Case-search__list-item{
		width: 100%;
	}
	.Case-search__button-wrap{
		flex-direction: column;
	}
	.Case-search__button{
		width: 100%;
		height: 5.8rem;
	}
	.Case-search__list-item.-keyword{
		max-width: 100%;
	}
	.Case-search__button:not(:last-child){
		margin-right: 0;
		margin-bottom: 1rem;
	}
	.Case-search__button.-submit{
		border-radius: 2.8rem;
	}
	.Case-search__button.-submit input[type="submit"]{
		padding-left: 2.5rem;
	}
	.Case-search__button.-submit::after{
		width: 2.5rem;
		height: 2.5rem;
		transform: translate(calc(-50% - 2.5rem),-50%);
	}
	.Case-search__button.-reset{
		border-radius: 3rem;
	}

}