@charset "UTF-8";
/*------------------------
会社情報
------------------------*/
.company-info {
	padding: 100px 0 0;
}
section .inner {
	width: 1200px;
	margin: auto;
}
section .inner .ttl {
	margin-bottom: 20px;
}
.company-info .inner .mission {
	margin-bottom: 60px;
}
.company-info .inner .mission .txt {
	flex: 1;
}
.company-info .inner .mission h3 {
	font-size: 2.8rem;
	font-weight: bold;
	color: var(--btncolor);
}
.company-info .inner .mission .img {
	width: 530px;
}
/*企業紹介*/
.company-info .inner .introduction {
	padding: 50px;
	background: url(/recruit/pc/img/common/bg_company.jpg) no-repeat 100% / cover;
	position: relative;
	margin-bottom: 60px;
}
.company-info .inner .introduction::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url(/recruit/pc/img/common/bg_network.png) no-repeat 100% / cover;
}
.company-info .inner .introduction .txt {
	position: relative;
	z-index: 1;
}
.company-info .inner .introduction .txt h3 {
	font-size: 2.8rem;
	font-weight: bold;
	color: var(--btncolor);
	line-height: 1;
	margin-bottom: 20px;
}
.company-info .inner .introduction .txt p {
	font-size: 1.8rem;
	text-align: justify;
	margin-bottom: 30px;
}
.company-info .inner .introduction .txt .btn a::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto 0;
	display: inline-block;
	width: 14px;
	height: 10px;
	background: url(/recruit/pc/img/common/icn_blank.svg) no-repeat 100% / contain;
}
.company-info .inner .introduction .txt .btn a:hover {
	opacity: .6;
}
.company-info .inner .introduction .txt .btn a::after ,
.company-info .inner .introduction .txt .btn a span::before ,
.company-info .inner .introduction .txt .btn a span::after {
	content: none;
}
/*動画*/
.thumb {
	position: relative;
	z-index: 1;
}
.thumb::before {
	content: '';
	display: block;
	position: absolute;
	top: -32px;
	left: 32px;
	width: 57px;
	height: 57px;
	background: var(--career);
	z-index: 2;
}
.thumb::after {
	content: '';
	display: block;
	position: absolute;
	top: -42px;
	left: 22px;
	width: 57px;
	height: 57px;
	background: var(--newgraduate);
	z-index: 2;
}
/*.thumb a {
	display: block;
	position: relative;
	width: 486px;
	height: 530px;
	margin-left: 50px;
	border-radius: 20px;
	overflow: hidden;
}*/
.thumb .img {
	display: block;
	position: relative;
	width: 486px;
	height: 530px;
	margin-left: 50px;
	border-radius: 20px;
	overflow: hidden;
}
.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .3s ease 0s;
}
.thumb a:hover .img img  {
	transform: scale(1.05, 1.05);
}
.thumb .icn {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 80px;
	height: 80px;
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
	background: var(--btncolor);
}
/*メニュー*/
.company-info .inner .btn-area {
	justify-content: space-between;
}
.company-info .inner .btn-area li a {
	display: block;
	width: 376px;
}
.company-info .inner .btn-area li a .img {
	display: block;
	height: 268px;
	border-radius: 16px;
	margin-bottom: 20px;
	overflow: hidden;
}
.company-info .inner .btn-area li a .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .3s ease 0s;
}
.company-info .inner .btn-area li a:hover .img img  {
	transform: scale(1.05, 1.05);
}
.company-info .inner .btn-area li a h3 {
	width: fit-content;
	font-size: 2.6rem;
	font-weight: bold;
	color: var(--btncolor);
	line-height: 1;
	position: relative;
}
.company-info .inner .btn-area li a h3::after {
	content: '';
	position: absolute;
	right: -45px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 26px;
	height: 26px;
	background: #fff;
	border: 1px solid var(--btncolor);
	transition: all .3s ease 0s;
}
.company-info .inner .btn-area li a h3 span::before {
	content: '';
	position: absolute;
	right: -37px;
	top: 0;
	bottom: -2px;
	margin: auto 0;
	width: 10px;
	height: 1px;
	background: var(--btncolor);
	z-index: 1;
	transition: all .3s ease 0s;
}
.company-info .inner .btn-area li a h3 span::after {
	content: '';
	position: absolute;
	right: -38px;
	top: -2px;
	bottom: 0;
	margin: auto 0;
	width: 6px;
	height: 1px;
	background: var(--btncolor);
	z-index: 1;
	transition: all .3s ease 0s;
	transform: rotate(45deg);
}
.company-info .inner .btn-area li a:hover h3::after {
	background: var(--btncolor);
	border: 1px solid var(--btncolor);
}
.company-info .inner .btn-area li a:hover span::before ,
.company-info .inner .btn-area li a:hover span::after {
	background: #fff;
}
@media screen and (max-width: 1240px) {
	section .inner {
		width: 1160px;
	}
	.company-info .inner .btn-area li a {
		width: 368px;
	}
}
/*------------------------
ギャラリー
------------------------*/
.gallery {
	padding: 100px 0;
}
.gallery ul {
	flex-wrap: wrap;
	gap: 30px 9px;
}
.gallery ul li {
	width: 394px;
}
.gallery ul li .img {
	display: block;
	height: 360px;
	margin-bottom: 10px;
}
.gallery ul li .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gallery ul li .txt {
	display: block;
	font-size: 2.1rem;
	line-height: 1.1;
}
@media screen and (max-width: 1240px) {
	.gallery ul {
		gap: 30px 10px;
	}
	.gallery ul li {
		width: 380px;
	}
}