@charset "UTF-8";
/* CSS Document */
.column.col3{
	gap:21px;
}
.column.col3 .col{
	width: calc(100%/3 - 61px);
	padding: 20px;
	box-shadow: 0 0 14px 0 rgba(11, 18, 66, 0.30);
	position: relative;
}
.column.col3 .col .col_txt{
	padding: 16px 0px;
	margin-bottom: 42px;
}
.column.col3 .col .col_txt p.ttl{
	font-size: 1.6rem;
	font-weight: 700;
	color: #1E286E;
	margin-bottom: 8px;
}
.column.col3 .col .link{
	width: calc(100% - 40px);
	border-top: solid 1px rgba(51, 51, 51, 0.50);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,-20px);
	padding: 16px 0px 0px;
}
.column.col3 .col .link a{
	font-size: 1.2rem;
	letter-spacing: 0.8px;
	position: relative;
}
.column.col3 .col .link a:hover{
	color: #557EC0;
	opacity: 0.8;
}
.column.col3 .col .link a::before{
	content: "";
	width: 16px;
	height: 16px;
	background: url("../img/common/external_arrow3.svg");
	background-size: 100%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(20px,-50%);
}
.column.col4{
	gap:20px;
}
.column.col4 .col{
	width: calc(100%/4 - 20px);
	box-shadow: 0 0 14px 0 rgba(11, 18, 66, 0.30);
	position: relative;
}
.column.col4 .col .col_img img{
}
.column.col4 .col .col_txt{
	padding: 16px;
	margin-bottom: 60px;
}
.column.col4 .col .col_txt p.ttl{
	font-size: 1.6rem;
	font-weight: 700;
	color: #1E286E;
	margin-bottom: 8px;
}
.column.col4 .col .link{
	width: calc(100% - 40px);
	border-top: solid 1px rgba(51, 51, 51, 0.50);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,-20px);
	padding: 16px 0px 0px;
}
.column.col4 .col .link a{
	font-size: 1.2rem;
	letter-spacing: 0.8px;
	position: relative;
}
.column.col4 .col .link a:hover{
	color: #557EC0;
	opacity: 0.8;
}
.column.col4 .col .link a::before{
	content: "";
	width: 16px;
	height: 16px;
	background: url("../img/common/external_arrow3.svg");
	background-size: 100%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(20px,-50%);
}
.box:nth-of-type(2){
	margin-bottom: 72px;
}
#contents {
    padding: 0px 8.16vw 0px;
}
.btn_cnt{
	margin: 32px 0px 0px;
}
.btn_cnt a{
	width: 309px;
}
@media only screen and (max-width: 767px) {
	#contents{
		padding: 52px 16px 0px;
	}
	.btn{
		width: 218px;
	}
	.column.col2 .col{
		margin-bottom:20px;
	}
	#contents .cnt .column{
		padding: 0px;
	}
	.column.col3 .col{
		width: auto;
		margin-bottom: 20px;
	}
	.column.col3 .col:last-child{
		margin-bottom: 0px;
	}
	.column.col4{
		display: flex;
	}
	.column.col4 .col{
		width: calc(100%/2 - 12px);
	}
}