@charset "utf-8";

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

.Keyvisual__image img{
	object-position: top left;
}



/*-------------------------------
	Search
-------------------------------*/

.Search {
	padding-top:5rem;
	padding-bottom:4rem;
}

.Service-search-panel{
	background:#ECF2F7;
	border-radius:1rem;
	padding:12rem 5.5rem 3rem;
	box-shadow: 0 0 .6rem rgba(0,0,.6,.16);
}

.Service-search-panel__title{
	color: var(--maincolor);
	font-size: 2rem;
	margin-bottom: 4rem;
	letter-spacing: .01em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}
.Service-search-panel__title span{
	line-height: 1;
	display: inline-block;
	position: relative;
}
.Service-search-panel__title span::before{
	font-family: var(--en);
	content: "CASE";
	width: 4.6rem;
	height: 4.6rem;
	font-size: 1.2rem;
	border-radius: 50%;
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,112,184,.1);
	position: absolute;
	left: 0;
	top: -4rem;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.Service-search-panel__list{
	width: 100%;
	row-gap: 2rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
.Service-search-panel__list::before,
.Service-search-panel__list::after{
	content: "";
	display: block;
	width: calc((100% - (2.3rem * 3)) / 4);
	order: 9999;
}
.Service-search__list-item{
	width: calc((100% - (2.3rem * 3)) / 4);
}

.Service-search__list-item a{
	border: 1px solid var(--maincolor);
	width: 100%;
	height: 5rem;
	font-weight: 700;
	border-radius: .8rem;
	letter-spacing: .05em;
	padding: 1rem 5rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	background:#fff;
	opacity: 1 !important;
}
.Service-search__list-item a::before{
	content: "";
	display: block;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	left: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
}
.Service-search__list-item a::after{
	transition: var(--transition);
	content: "";
	display: block;
	width: 1.7rem;
	height: 1.7rem;
	background-image: url(../images/common/icon_arrow-circle2.svg);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	right: 1.2rem;
	top: 50%;
	transform: translateY(-50%);
}
.Service-search__list-item span{
	line-height: 1;
	display: block;
}
.Service-search__list-item:nth-of-type(2) a::before{
	width: 2.5rem;
	height: 2.8rem;
	background-image: url(../images/index/icon_service-search1.svg);
}
.Service-search__list-item:nth-of-type(3) a::before{
	width: 2.6rem;
	height: 2.4rem;
	background-image: url(../images/index/icon_service-search2.svg);
}
.Service-search__list-item:nth-of-type(4) a::before{
	width: 2.2rem;
	height: 2.2rem;
	background-image: url(../images/index/icon_service-search3.svg);
}
.Service-search__list-item:nth-of-type(5) a::before{
	width: 2.5rem;
	height: 2.8rem;
	background-image: url(../images/index/icon_service-search4.svg);
}
.Service-search__list-item:nth-of-type(6) a::before{
	width: 2.1rem;
	height: 1.4rem;
	background-image: url(../images/index/icon_service-search5.svg);
}
.Service-search__list-item:nth-of-type(7) a::before{
	width: 2.5rem;
	height: 1.3rem;
	background-image: url(../images/index/icon_service-search6.svg);
}
.Service-search__list-item:nth-of-type(8) a::before{
	width: 2.2rem;
	height: 2rem;
	background-image: url(../images/index/icon_service-search7.svg);
}
.Service-search__list-item:nth-of-type(9) a::before{
	width: 1.6rem;
	height: 2.2rem;
	background-image: url(../images/index/icon_service-search8.svg);
}
.Service-search__list-item:nth-of-type(10) a::before{
	width: 2.2rem;
	height: 2rem;
	background-image: url(../images/index/icon_service-search9.svg);
}
.Service-search__list-item:nth-of-type(11) a::before{
	width: 2.3rem;
	height: 2.3rem;
	background-image: url(../images/index/icon_service-search10.svg);
}
.Service-search__list-item a:hover{
	background: var(--maincolor);
	color: #fff;
}
.Service-search__list-item a:hover::after{
	transform: translate(.25rem,-50%);
	background-image: url(../images/common/icon_arrow-white-circle2.svg);
}
.Service-search__list-item:nth-of-type(2).selected a::before,
.Service-search__list-item:nth-of-type(2) a:hover::before{
	background-image: url(../images/index/icon_service-search1-white.svg);
}
.Service-search__list-item:nth-of-type(3).selected a::before,
.Service-search__list-item:nth-of-type(3) a:hover::before{
	background-image: url(../images/index/icon_service-search2-white.svg);
}
.Service-search__list-item:nth-of-type(4).selected a::before,
.Service-search__list-item:nth-of-type(4) a:hover::before{
	background-image: url(../images/index/icon_service-search3-white.svg);
}
.Service-search__list-item:nth-of-type(5).selected a::before,
.Service-search__list-item:nth-of-type(5) a:hover::before{
	background-image: url(../images/index/icon_service-search4-white.svg);
}
.Service-search__list-item:nth-of-type(6).selected a::before,
.Service-search__list-item:nth-of-type(6) a:hover::before{
	background-image: url(../images/index/icon_service-search5-white.svg);
}
.Service-search__list-item:nth-of-type(7).selected a::before,
.Service-search__list-item:nth-of-type(7) a:hover::before{
	background-image: url(../images/index/icon_service-search6-white.svg);
}
.Service-search__list-item:nth-of-type(8).selected a::before,
.Service-search__list-item:nth-of-type(8) a:hover::before{
	background-image: url(../images/index/icon_service-search7-white.svg);
}
.Service-search__list-item:nth-of-type(9).selected a::before,
.Service-search__list-item:nth-of-type(9) a:hover::before{
	background-image: url(../images/index/icon_service-search8-white.svg);
}
.Service-search__list-item:nth-of-type(10).selected a::before,
.Service-search__list-item:nth-of-type(10) a:hover::before{
	background-image: url(../images/index/icon_service-search9-white.svg);
}
.Service-search__list-item:nth-of-type(11).selected a::before,
.Service-search__list-item:nth-of-type(11) a:hover::before{
	background-image: url(../images/index/icon_service-search10-white.svg);
}

.Service-search__list-item.selected a {
	background:var(--maincolor);
}

.Service-search__list-item.selected a span {
	color:#fff;
}

.Service-search__list-item.selected a::after {
	background-image:url(../images/common/icon_arrow-circle3.svg);
}

/*-------------------------------
	Case list
-------------------------------*/

.Case {
	padding-bottom:6rem;
}

.Case_list {
	justify-content: space-between;
}

.Case_line {
	width:48.2%;
	max-width:51rem;
	border-bottom:.1rem solid var(--maincolor);
	padding:0 0 5.5rem 0;
	position:relative;
	margin-bottom:9rem;
}

.Case_cate {
	padding-right:12rem;
	border-bottom:.1rem solid var(--maincolor);
}

.Case_cate h4,
.Case_cate h4 span {
	font-size:2rem;
	font-weight:700;
	color:#fff;
	letter-spacing: 0.05em;
	line-height:1.25;
}

.Case_cate h4 span {
	display:inline-block;
	background:var(--maincolor);
	border-radius:1rem 1rem 0 0;
	padding:0.4em 0.75em;
}

.Case_affe {
	padding:2rem 1.8rem;
	margin-bottom:3rem;
	align-items: flex-start;
	opacity: 1 !important;
}

.Case_thumb {
	width:15.2rem;
	height:12rem;
	overflow: hidden;
}

.Case_thumb img {
	transition: var(--transition);
	width:100%;
	height:100%;
	object-fit: cover;
}
.Case_affe:hover .Case_thumb img{
	transform: scale(1.1);
}

.Case_txt {
	width:calc(100% - 15.2rem);
	padding-right:3rem;
}

.Case_time {
	font-size:2rem;
	font-weight:500;
	margin-bottom:1em;
	line-height:1.25;
}

.Case_title {
	font-size:2rem;
	font-weight:700;
	line-height:2;
}

.Case_line_bottom {
	padding:0 1.8rem;
}

.Case_tag_list {
	display: flex;
	flex-wrap:wrap;
}

.Case_tag {
	margin:0 1rem 1rem 0;
	line-height:1;
}

.Case_tag a,
.Case_tag a span,
.Case_tag a span::before {
	transition: var(--transition);
	font-size:1.4rem;
	font-weight:500;
	line-height:1.25;
	color:var(--maincolor);
	opacity: 1 !important;
}

.Case_tag a {
	display: inline-block;
	border:.1rem solid var(--maincolor);
	border-radius:2em;
}

.Case_tag a span {
	display: inline-block;
	padding:0.32em 0.47em;
	position:relative;
}

.Case_tag a span::before {
	content:"#";
	display: inline-block;
	padding-right:0.25em;
}

.Case_line .Index-more {
	position:absolute;
	right:0;
	top:1rem;
}
.Case_tag a:hover{
	background: var(--maincolor);
}
.Case_tag a:hover span{
	color: #fff;
}
.Case_tag a:hover span::before{
	color: #fff;
}


/*-------------------------------

-------------------------------*/

/*-------------------------------
	responsive
-------------------------------*/
@media screen and (max-width:1240px) and (min-width: 769px){

	.Service-search__list-item,
	.Service-search-panel__list::before,
	.Service-search-panel__list::after{
		width: calc((100% - (2.3rem * 2)) / 3);
	}

}

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

.Service-search-panel{
	padding:12rem 3rem 3rem;
}

.Case_line {
	width:100%;
	max-width:100%;
}

} /* 960px */

/*-------------------------------
	ver sp
-------------------------------*/

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

/*-------------------------------
	Search
-------------------------------*/

.Search {
	padding-top:0rem;
	padding-bottom:0rem;
}

.Service-search-panel{
	padding:10rem 6rem 9rem;
}

	.Service-search-panel__title{
		font-size: 3rem;
		margin-bottom: 5.8rem;
	}
	.Service-search-panel__title span::before{
		width: 6.5rem;
		height: 6.5rem;
		font-size: 2rem;
		top: -6rem;
	}
	.Service-search-panel__list{
		row-gap: 2.8rem;
	}
	.Service-search-panel__list::before,
	.Service-search-panel__list::after{
		display: none;
	}
	.Service-search__list-item{
		width: 100%;
	}
	.Service-search__list-item a{
		height: 8.8rem;
		font-size: 2.6rem;
		letter-spacing: 0;
		padding: 1.9rem 2rem 1.9rem 10rem;
	}
	.Service-search__list-item:first-child a{
		padding-left: 3rem;
	}
	.Service-search__list-item a::after{
		width: 3.8rem;
		height: 3.8rem;
		right: 2.6rem;
	}

	.Service-search__list-item a::before {
		left:3rem;
	}
	.Service-search__list-item:nth-of-type(2) a::before{
		width: 4.7rem;
		height: 5.2rem;
	}
	.Service-search__list-item:nth-of-type(3) a::before{
		width: 5.2rem;
		height: 4.9rem;
	}
	.Service-search__list-item:nth-of-type(4) a::before{
		width: 5rem;
		height: 5rem;
	}
	.Service-search__list-item:nth-of-type(5) a::before{
		width: 5rem;
		height: 5.1rem;
	}
	.Service-search__list-item:nth-of-type(6) a::before{
		width: 5rem;
		height: 3.5rem;
	}
	.Service-search__list-item:nth-of-type(7) a::before{
		width: 5.8rem;
		height: 3.1rem;
	}
	.Service-search__list-item:nth-of-type(8) a::before{
		width: 5rem;
		height: 4.5rem;
	}
	.Service-search__list-item:nth-of-type(9) a::before{
		width: 3.6rem;
		height: 5rem;
	}
	.Service-search__list-item:nth-of-type(10) a::before{
		width: 5rem;
		height: 4.5rem;
	}
	.Service-search__list-item:nth-of-type(11) a::before{
		width: 4.6rem;
		height: 4.7rem;
	}

/*-------------------------------
	Case list
-------------------------------*/

.Case {
	padding-bottom:8.5rem;
}

.Case_line {
	width:100%;
	max-width:100%;
	padding:0 0 2.5rem 0;
	margin-bottom:7.5rem;
}

.Case_cate {
	padding-right:0;
}

.Case_cate h4 {
	border-bottom:none;
}

.Case_cate h4,
.Case_cate h4 span {
	font-size:2.8rem;
	text-align:center;
}

.Case_cate h4 span {
	display:block;
	padding:0.625em 0.5em .4em;
}

.Case_affe {
	padding:2.8rem 0 0;
	margin-bottom:10rem;
}

.Case_thumb {
	width:21rem;
	height:14.7rem;
}

.Case_txt {
	width:calc(100% - 21rem);
	padding-right:1rem;
	margin-top:-2rem;
}

.Case_time {
	font-size:2.4rem;
}

.Case_title {
	font-size:2.8rem;
	line-height:1.7;
}

.Case_line_bottom {
	padding:0;
	display: flex;
	align-items: flex-end;
}

.Case_tag_list {
	display: flex;
	flex-wrap:wrap;
	width:calc(100% - 18rem);
}

.Case_tag {
	margin:0 1rem 1rem 0;
	line-height:1;
}

.Case_tag a,
.Case_tag a span,
.Case_tag a span::before {
	font-size:2rem;
}

.Case_tag a {
	border-width:.2rem;
}

.Case_tag a span {
	padding:0.32em 0.55em;
}

.Case_line .Index-more {
	position:relative;
	right:auto;
	top:auto;
	margin-bottom:1rem;
}
} /* end 768px */