@charset "UTF-8";

/* recruit header
--------------------------------------------------------*/
.page_column .recruit-site_header {
	position: relative;
}

.renewal_recruit .recruit-site_inner {
	background: #FFF;
}


/* コラム一覧：スタイル
--------------------------------------------------------*/
.page_column .column_area {
	width: 1096px;
	margin: 0 auto;
}
@media (max-width: 767px) {
	.page_column .column_area {
		width: 100%;
	}
}

.page_column .column_item {
	position: relative;
	border-bottom: 4px dotted #CCC;
}
.page_column .column_item:first-of-type {
	border-top: 4px dotted #CCC;
}

.page_column .column_link {
	display: flex;
	padding: 40px;
	opacity: unset;
	transition: 0.5s;
}
@media (max-width: 767px) {
	.page_column .column_link {
		display: block;
		padding: 40px 20px;
	}
}

.page_column .column_image-box {
	width: 300px;
	height: 200px;
}
@media (max-width: 767px) {
	.page_column .column_image-box {
		width: 100%;
		height: auto;
	}
}

.page_column .column_image-box .column_image {
	overflow: hidden;
	border-radius: 12px;
}

.page_column .column_image-box .column_image img {
	border-radius: 12px;
	transition: transform 0.4s ease;
}
.page_column .column_link:hover .column_image img {
	border-radius: 12px;
	transform: scale(1.1);
}

.page_column .column_content-box {
	align-content: center;
	margin-left: 25px;
}
@media (max-width: 767px) {
	.page_column .column_content-box {
		margin-top: 25px;
		margin-left: 0;
	}
}

.page_column .column_meta {
	margin-bottom: 15px;
}

.page_column time {
	color: #666;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 100%;
}

.page_column label {
	margin-left: 20px;
	padding: 5px 10px;
	color: #666;
	font-size: 1.2rem;
	font-weight: 500;
	border-radius: 123px;
	border: 1px solid #666;
	line-height: 100%;
}

.page_column .column_title {
	color: #000;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 180%;
	letter-spacing: 0.8px;
	transition: 0.5s;
}
.page_column .column_link:hover .column_title {
	color: #4662A8;
}
@media (max-width: 767px) {
	.page_column .column_title {
		font-size: 1.6rem;
	}
}


/* コラムページネーション：スタイル
--------------------------------------------------------*/
.page_column .pagination {
  display: flex;
  gap: 16px;
  margin-top: 105px;
  justify-content: center;
}
@media (max-width: 767px) {
	.page_column .pagination {
		margin-top: 80px;
		margin-bottom: 180px;
	}
}

.page_column .pagination a {
  display: block;
  width: 54px;
  height: 54px;
	align-content: center;
  border: 1px solid #4662A8;
  color: #4662A8;
  font-size: 14px;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  background: #fff;
  transition: all 0.3s;
}

.page_column .btn-back {
	width: 315px;
	margin: 100px auto 0;
}
.page_column .btn-back a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4662A8;
	text-align: center;
	font-size: 2.2rem;
	font-weight: 500;
	border-radius: 12px;
	border: 1px solid #4662A8;
	background: #FFF;
	padding: 20px;
	transition: .5s;
}
.page_column .btn-back a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 20px;
	bottom: 0;
	margin: auto 0;
	width: 12px;
	height: 12px;
	transform: rotate(-45deg);
	border-top: 1px solid #4662A8;
	border-left: 1px solid #4662A8;
}
.page_column .btn-back a:hover {
	background: #4662A8;
	color: #FFF;
}
.page_column .btn-back a:hover::after {
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
}

@media (max-width: 767px) {
	.page_column .pagination a {
		width: 42px;
		height: 42px;
	}
	.page_column .btn-back {
    width: 90%;
    margin: 60px auto 0;
	}
	.page_column .btn-back a {
    font-size: 1.6rem;
		padding: 15px;
	}
}

.page_column .pagination a:hover {
  background: #f5f5f5;
}

.page_column .pagination a.is-current {
  background: #4662A8;
  color: #fff;
  border-color: #4662A8;
}

.page_column #pagination .pagination-prev,
.page_column #pagination .pagination-next {
	font-size: 2.5rem;
  border: none;
}

.page_column #pagination a:hover:not(.is-current):not(.is-disabled) {
  background: rgba(59, 94, 162, 0.08);
}

.page_column #pagination a.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}



