@charset "utf-8";

.site {
	overflow: visible;
}
/* ------------------------------
 メインイメージ（PC）
------------------------------ */
.mainimg {
	position: relative;
	margin-bottom: 160px;
}
.mainimg .swiper {
	width: 100%;
	height: auto;
}
.mainimg .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.mainimg .swiper-slide-active img,
.mainimg .swiper-slide-duplicate-active img,
.mainimg .swiper-slide-prev img {
  animation: zoomUp 7s linear 0s normal both;
}
.mainimg h1 {
	position: absolute;
	top: 96px;
	right: 78px;
	z-index: 20;
}
.mainimg h1 img{
	width: 468px;
	height: auto;
}
.gradation-block{
	width: 100%;
	height: 390px;
	font-size: 2rem;
	line-height: 2.3;
	font-weight: 700;
	color: #000;
	background: url('/shared/img/top/top_main_bg.png') no-repeat center bottom 0 / cover;
	position: relative;
	z-index: 10;
	padding-top: 120px;
}
@media print, screen and (min-width: 768px) {
	.mainimg .swiper-slide {
		height: calc(100vh - 90px);
	}
}
/* ------------------------------
 メインイメージ（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.mainimg {
		margin-bottom: 50px
	}
	.mainimg .swiper-slide {
		height: calc(100vh - 60px);
	}
	.gradation-block{
		width: 100%;
		height: auto;
		font-size: 1.8rem;
		padding: 40px 20px 50px;
		margin-top: 0;
		background: url('/shared/img/top/top_main_bg_sp.png') no-repeat center bottom 0/ cover;
		position: relative;
		z-index: 10;
	}
	.mainimg h1 {
		position: absolute;
		top: 45px;
		right: 20px;
		z-index: 20;
	}
	.mainimg h1 img{
		width: 270px;
		height: auto;
	}
}
/* ------------------------------
 見出し
------------------------------ */
.contentsHome h2{
  font-size: 3.8rem;
  font-weight: bold;
}
.contentsHome h2 span{
  font-size: 1.7rem;
  color: #b9062b;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  display: block;
  font-weight: normal;
}
.contentsHome h3{
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 2;
	text-align: left;
}
@media screen and (max-width: 767px) {
	.contentsHome h2{
		font-size: 3rem;
	}
	.contentsHome h2 span{
	font-size: 1.4rem;
	}
	.contentsHome h3{
		font-size: 1.8rem;
	}
}
/* ------------------------------
 新着（PC）
------------------------------ */
.news-title{
  width: 200px;
}
.news-title h2{
  margin-top: -0.35em;
}
.news-list{
  width: 900px;
  border-top: dotted 1px #9ba1a6;
}
.news-list li{
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: left;
  border-bottom: dotted 1px #9ba1a6;
  padding: 34px 0;
}
.news-list .text{
	width: 100%;
}
.news-list .text a{
	width: 100%;
	display: block;
	transition: .2s ease-in-out;
	background: url('/shared/img/icon_arrow.svg') no-repeat right 23px center /26px 26px;
	padding: 10px 0;
}
.news-list .text span{
	width: 720px;
	display: block;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	max-height: 26px;
	line-height: 1.1;
}
.news-list .news-date{
  color: #828990;
  margin-right: 35px;
}
@media print, screen and (min-width: 768px) {
	.news-list .text a:hover{
		background: url('/shared/img/icon_arrow_o.svg') no-repeat right 23px center /26px 26px;
		text-decoration: underline !important; 
	}
}
@media screen and (max-width: 767px) {
	.news-title,
	.news-list{
		width: 90%;
		margin: 0 auto !important;
	}
	.news-title .icon-all{
		text-align: right;
	}
	.news-list .text a{
		background: none;
		text-decoration: underline;
	}
	.news-list li{
		display: block;
		padding: 20px 0;
	}
	.news-list .text a:after{
		content: none;
	}
	.news-list .text span{
		width: 100%;
		-webkit-line-clamp: 2;
		max-height: 60px;
		line-height: 1.875;
	}
	.news-list .news-date{
		margin-right: 0;
	}
}
/* ------------------------------
 MESSAGE と　ABOUT JOB（PC）
------------------------------ */
@media print, screen and (min-width: 768px) {
	.company-block {
		position: relative;
	}
	.company-block .image {
		position: relative;
		width: 50%;
		margin-bottom: 0;
		margin-right: 50%;
	}
	.company-block .image img {
		width: 100%;
		height: 720px;
		object-fit: cover;
		object-position: right top;
		border-radius: 0 20px 20px 0;
	}
	.company-block .text {
		position: absolute;
		top: 0;
		left: 50%;
		width: 1140px;
		margin: 0 0 0 -570px;
		padding-top: 15px;
		padding-left: 620px;
	}
}
.company-block .menu ul{
	width: 100%;
	border-top: dotted 1px #828990;
	z-index: 100;
}
.company-block .menu ul li{
	font-size: 2.2rem;
	font-weight: bold;
	border-bottom: dotted 1px #828990;
}
.company-block .menu ul li a{
	width: 100%;
	display: block;
	line-height: 1;
	padding: 45px 20px;
	background: url(/shared/img/icon_arrow.svg) no-repeat right 20px center / 26px 26px;
	transition: .3s ease-in-out;
}
.company-block .menu ul li a span{
	display: block;
	font-size: 1.2rem;
	color: #b9062b;
	margin-top: 10px;
}
.company-block .icon-arrow a::after{
	content: "";
	width: 35px;
	height: 35px;
	background: url(/shared/img/icon_arrow_red.svg) no-repeat right 0 center / cover;
	transition: .3s ease-in-out;
}
@media print, screen and (min-width: 768px) {
	.company-block .icon-arrow a:hover::after{
		background: url(/shared/img/icon_arrow_o.svg) no-repeat right 0 center / cover;
	}
	.company-block .menu ul li a:hover{
		background: #f2f3f4 url(/shared/img/icon_arrow_o.svg) no-repeat right 20px center / 26px 26px;
	}
	.company-block .menu ul li a:hover{
		color: #b9062b;
	}
}
@media screen and (max-width: 767px) {
	.company-block .text {
		padding: 50px 20px 60px;
	}
	.company-block .image img{
		height: 275px;
		object-fit: cover;
		border-radius: 0;
	}
	.company-block .menu ul li a{
		padding: 35px 0;
	}
}
/* ------------------------------
 イメージを固定してスクロール
------------------------------ */
.scroll-wrap{
	width:100%;
	margin:0 auto;
}
/*コンテンツ*/
.scroll-wrap .container > div {
	color: #fff;
	text-align: left;
}
.scroll-wrap .container > div .icon-arrow a{
	color: #fff;
  	transition: .3s ease-in-out;
}
.scroll-wrap .container > div .icon-arrow a::after{
	background: url(/shared/img/icon_arrow_w.svg) no-repeat 0 center / cover;
  	transition: .3s ease-in-out;
}
.scroll-wrap .container > div h2 { 
	font-size: 3.8rem; 
	text-align:left;
}
/*テキスト*/
.scroll-area1{
	background: #2e2e2f;
}
.scroll-area2{
	background: #353535;
}
.scroll-area3{
	background: #2c2c2c;
}
/*イメージ*/
.scroll-wrap .images-container img {
	max-width: 100%;
    width: 100% !important;
	height: 100vh;
	object-fit: cover;
}
.scroll-wrap .images-container p {
    width: 100%;
	margin: auto;
	display: block;
	visibility: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	transition: .8s !important;
	opacity: 0;
}
.scroll-wrap .images-container p:first-child,
.scroll-wrap .images-container p.active {
	visibility: visible;
	opacity: 1;
}
@media print, screen and (min-width: 768px) {
	.scroll-wrap{
		width:100%;
		margin:0 auto;
		text-align: center;
		padding: 200px 0 130px;
		position: relative;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.scroll-wrap .container {
		width: 51.3%;
	}
	.scroll-wrap .container > div {
		padding-right:10vh;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.scroll-wrap .container .scroll-area-in {
		width: 496px;
	}
	/*イメージ*/
	.scroll-wrap .images-container {
		width: 48.7%;
		height: 100vh;
		display: flex;
		align-items: center;
		position: sticky;
		position: -webkit-sticky;
		top:0;
	}
	.scroll-wrap .container > div .icon-arrow a:hover{
		color: #b9062b;
	}
	.scroll-wrap .container > div .icon-arrow a:hover::after{
		background: url(/shared/img/icon_arrow_o.svg) no-repeat 0 center / cover;
	}
}
@media screen and (max-width: 767px) {
	/*イメージ*/
	.scroll-wrap .container > div {
		padding-bottom: 55px;
	}
	.scroll-wrap .container img {
		width: 100%;
		max-width: 100%;
		height: 355px;
		object-fit: cover;
		margin-bottom: 55px;
	}
	.scroll-wrap h2,
	.scroll-wrap h3,
	.scroll-wrap .icon-arrow {
		margin: 0 5%;
	}
	.scroll-wrap .icon-arrow {
		text-align: right;
	}
}
/* ------------------------------
 採用情報
------------------------------ */
@media print, screen and (min-width: 768px) {
	.recruit-block a .img-hover {
		border-radius: 20px;
	}
}
@media screen and (max-width: 767px) {
	.recruit-block{
		padding: 50px 20px 0;
	}
}
/* ------------------------------
 画像角R
------------------------------ */
.r20 img{
	border-radius:20px;
}
/* ------------------------------
 VIEW ALL
------------------------------ */
.icon-all a,
.icon-arrow a{
	font-family: "Poppins", sans-serif;
  	display: inline-block;
  	position: relative;
  	margin-bottom: 13px;
  	color: #000;
	padding-right: 50px;
	cursor: pointer;
  	transition: .3s ease-in-out;
}
.icon-all a::after{
	content: "";
	width: 35px;
	height: 35px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	vertical-align: middle;
	background: url(/shared/img/icon_all.svg) no-repeat 0 center / cover;
  	transition: .3s ease-in-out;
}
.icon-arrow a::after{
	content: "";
	width: 35px;
	height: 35px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	vertical-align: middle;
	background: url(/shared/img/icon_arrow.svg) no-repeat 0 center / cover;
  	transition: .3s ease-in-out;
}
.icon-arrow a[target="_blank"]::after{
	background: url(/shared/img/icon_blank_circle.svg) no-repeat 0 center / cover;
}
@media print, screen and (min-width: 768px) {
	.icon-all a:hover,
	.icon-arrow a:hover{
		opacity: 1;
		color: #b9062b;
	}
	.icon-all a:hover::after{
		background: url(/shared/img/icon_all_o.svg) no-repeat 0 center / cover;
	}
	.icon-arrow a[target="_blank"]:hover::after {
		background: url(/shared/img/icon_blank_circle_o.svg) no-repeat 0 center / cover;
	}
}