@charset "utf-8";
/* CSS Document */
.kzsp{
	/*padding: 0 140px;*/
}

.kzsp li a{
	display: flex;
	justify-content: space-between;
	padding:3% 4%;
	background: #ececf3;
}
.kzsp li a span{
	display: block;
}

.kzsp li a .left_box{
	width: 35%;
	margin-right: 26px;
}
.kzsp li a .rit_box{
	/*width: 60%;*/
	/*padding: 3% 3% 3% 0;*/
}
.kzsp .left_box span.imgbox img{transition: .3s;}

.kzsp li a span.imgbox{
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	max-height: 315px;
	border: solid 1px #ddd;
}
.kzsp li a .left_box span.imgbox::after{
	transition: .4s;
	width: 100%;
	height: 100%;
	content: " ";
	background-color: #535f93;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.kzsp li a .left_box span.imgbox img{transition: .3s;}

.kzsp .rit_box span.textbox{
	position: relative;
	padding: 0px 7% 10px 1.5%;
}
.kzsp .rit_box span.textbox i{
	position: relative;
	transition: .35s;
	font-size: 2rem;
	font-weight: 500;
	color: #043c79;
	display: inline-block;
}
.kzsp .rit_box span.textbox i span{
	position: relative;
	display: inline-block;
	font-size: 0.65em;
	font-weight: 700;
	padding-left: 0.5em;
	letter-spacing: 0;
	line-height: 1;
}

.kzsp li a:not(.nonlink) span.textbox::before,
.kzsp li a:not(.nonlink) span.textbox::after,
.kzsp li a:not(.nonlink) span.textbox i::after{
	transition: .4s;
	content: " ";
	position: absolute;
}
.kzsp li a:not(.nonlink) span.textbox::before{
	width: 10px;
	height: 10px;
	border-top: 2px solid #043c79;
	border-right: 2px solid #043c79;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 18%;
	right: 2.5%;
}
.kzsp li a:not(.nonlink) span.textbox i::after{
	width: 0;
	height: 1px;
	background-color: #535f93;
	opacity: .6;
	left: 0;
	bottom: -3px;
}
.kzsp .textbox{
		line-height: 1.2;
	}
/*----------------------------------------------------------------------------------
PCのみ
----------------------------------------------------------------------------------*/
@media screen and (min-width:1051px){
	.kzsp li a:not(.nonlink):hover span.textbox::before{
		border-top: 2px solid #535f93;
		border-right: 2px solid #535f93;
	}
	.kzsp li a:not(.nonlink):hover span.textbox i{color: #535f93;}
	.kzsp li a:not(.nonlink):hover span.imgbox img{transform: scale(1.025);}
	.kzsp li a:not(.nonlink):hover span.imgbox::after{opacity: .45;}
	.kzsp li a:not(.nonlink):hover span.textbox i::after{width: 100%;}
	/*.kzsp .rit_box span.textbox i{
		font-size: 1.4vw;
	}*/
	/*.kzsp .rit_box p{
	font-size: 1vw;
}
	*/
}

/*----------------------------------------------------------------------------------
PC・タブレット
----------------------------------------------------------------------------------*/
@media screen and (min-width:641px){
	
	
	/*.kzsp li a span.imgbox{
		height: 100%;
	}
	.kzsp li a span.imgbox img{
		object-fit: cover;
		height: 100%;
	}*/
	.kzsp .rit_box p{
		margin-top: 0.8em;
	}
}
/*----------------------------------------------------------------------------------
タブレット
----------------------------------------------------------------------------------*/
@media screen and (max-width:1050px) and (min-width:641px){
	.kzsp li a .left_box{
		margin-right: 2%;
		width: 45%
	}
	.kzsp{
		/*padding: 0 5%;*/
	}
	.kzsp .rit_box{
		width: 50%;
	}
	.kzsp .rit_box p{
		font-size: 1.35vw;
	}
	
}

/*----------------------------------------------------------------------------------
スマホ
----------------------------------------------------------------------------------*/
@media screen and (max-width:640px){
	.kzsp{
		padding: 0;
	}
	
	.kzsp li a{
		padding: 6%;
		display: block;
	}

.kzsp li a .left_box{
	width: 100%;
	margin-right:0;
	margin-bottom: 10px;
}
.kzsp li a .rit_box{
	width: 100%;
	padding: 1% 4% 4% 4%;
	box-sizing: border-box;
}
	.kzsp li a:not(.nonlink) span.textbox::before{
	top: 34%;
}
.kzsp .rit_box span.textbox i{
		font-size: 2rem;
	}
.kzsp li a .rit_box p{
		margin-top: 0.3em;
	}
}
