@charset "utf-8";

/* ------------------------------
 メインイメージ（PC）
------------------------------ */
.mainimg {
	position: relative;
	margin-bottom: 160px;
}
.mainimg .swiper {
	width: 100%;
	height: auto;
}
.mainimg .swiper-slide img {
	display: block;
	width: 100%;
	height: 910px;
	object-fit: cover;
}
.mainimg h1 {
	font-size: 10.6rem;
	color: #fff;
	line-height: 1.35;
	font-weight: bold;
	position: absolute;
	top: 600px;
	left: 100px;
	z-index: 20;
}
.gradation-block{
	font-size: 2.3rem;
	line-height: 2.52;
	font-weight: 700;
	color: #fff;
	width: 100%;
	height: 545px;
	padding-top: 250px;
	background: url('/shared/img/top/top_main_bg.png') no-repeat 0 0/ cover;
	clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 100%);
	margin-top: -176px;
	position: relative;
	z-index: 10;
}
@media print, screen and (min-width:768px) and (max-width: 1440px) {
	.mainimg .swiper-slide img {
		height: 635px;
		object-fit: cover;
	}
	.mainimg {
		margin-bottom: 110px;
	}
	.mainimg h1 {
		top: 370px;
	}
	.gradation-block{
		height: 470px;
		margin-top: -170px;
		padding-top: 200px;
	}
}
@media print, screen and (min-width:768px) and (max-width: 1366px) {
	.mainimg h1 {
		top: 240px;
	}
	.gradation-block{
		height: 470px;
		margin-top: -265px;
	}
}
@media print, screen and (min-width: 768px) {
	.mainimg .swiper-slide div a {
		transition: .3s ease-in-out;
	}
	.mainimg .swiper-slide div a:hover {
		opacity: .5;
	}
}
/* ------------------------------
 メインイメージ（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.mainimg {
		position: relative;
		margin-bottom: 40px;
	}
	.mainimg .swiper-slide img {
		width: 100%;
		height: 550px;
	}
	.gradation-block{
		color: #fff;
		width: 100%;
		height: auto;
		font-size: 1.8rem;
		padding: 140px 20px 50px;
		background: url('/shared/img/top/top_main_bg_sp.png') no-repeat 0 0/ cover;
		clip-path: polygon(0 0, 100% 18%, 100% 100%, 0 100%);
		position: relative;
		z-index: 10;
	}
	.mainimg h1 {
		font-size: 5rem;
		top: 350px;
		left: 20px;
	}
}
/* ------------------------------
 新着（PC）
------------------------------ */
.gradient-base {
 	width: 100%;
	height: 85px;
	background: linear-gradient(135deg, #e91e2e 10%, #b9062b 90%);
  	overflow: hidden;
	border-radius: 50px;
}
.newsTicker {
 	width: calc(100% - 2px);
	height: calc(100% - 2px);
	background: #fff;
	margin: 0 auto;
	margin-top: 1px;
	border-radius: 50px;
}
.newsTicker .swiper-slide {
  font-size: 1.6rem;
  padding: 0 28px 0 55px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.newsTicker .text{
	width: 100%;
}
.newsTicker .text a{
	width: 100%;
	display: block;
	transition: .2s ease-in-out;
	background: url('/shared/img/icon_arrow.svg') no-repeat right 15px center;
}
.newsTicker .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;
}
.newsTicker .news-date{
  color: #828990;
  margin-right: 35px;
}
.newsTicker .news-icon{
  font-size: 1.3rem;
  width: 86px;
  line-height: 22px;
  text-align: center;
  color: #828990;
  border: solid 1px #828990;
  border-radius: 3px;
  margin-right: 60px;
}
@media print, screen and (min-width: 768px) {
	.newsTicker .text a:hover{
		background: url('/shared/img/icon_arrow.svg') no-repeat right 0 center;
		text-decoration: underline !important; 
	}
}
@media screen and (max-width: 767px) {
	.gradient-base {
	 	width: 90%;
		margin: 0 auto;
		height: 190px;
	}
	.newsTicker {
		border-radius: 48px;
	}
	.newsTicker .swiper-slide {
	  font-size: 1.6rem;
	  padding: 25px;
	  display: block;
	}
	.newsTicker .text a{
		background: none;
	}
	.newsTicker .text a:after{
		content:"";
		display: block;
		width: 100%;
		height: 10px;
		margin-top: 10px;
		background: url('/shared/img/icon_arrow.svg') no-repeat right 15px bottom 0;
	}
	.newsTicker .text span{
		width: 100%;
		-webkit-line-clamp: 3;
		max-height: 86px;
		line-height: 1.75;
		margin-top: 10px;
	}
	.newsTicker .news-date,
	.newsTicker .news-icon{
		display: inline-block;
	}
	.newsTicker .news-date{
		margin-right: 20px;
	}
	.icon-all-fr{
		float: right;
		margin-right: 20px;
	}
}
/* ------------------------------
 VIEW ALL
------------------------------ */
.icon-all,
.icon-arrow{
	width: 145px;
	font-family: "Poppins", sans-serif;
	font-style: italic;
	font-weight: 700;
	border-bottom: solid 1px #b9062b;
}
.icon-all a,
.icon-arrow a{
	font-family: "Poppins", sans-serif;
	font-style: italic;
  	display: block;
  	position: relative;
  	margin-bottom: 13px;
  	color: #000;
  	transition: .3s ease-in-out;
}
.icon-all a{
	background: url(/shared/img/icon_all.svg) no-repeat right 7px center / 20px 20px;
}
.icon-arrow a::after{
	content: "";
	width: 27px;
	height: 8px;
	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;
}
@media print, screen and (min-width: 768px) {
	.icon-all a:hover,
	.icon-arrow a:hover{
		opacity: 1;
		color: #b9062b;
	}
}
/* ------------------------------
 MESSAGE と　ABOUT JOB（PC）
------------------------------ */
.pickup-block01 h2,
.pickup-block02 h2 {
	font-size: 9rem;
	font-family: "Poppins", sans-serif;
  	font-style: italic;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 20px;
	position: relative;
	letter-spacing: -3px;
}
.pickup-block01 h3,
.pickup-block02 h3 {
	font-size: 2.2rem;
	font-weight: bold;
}
@media print, screen and (min-width: 768px) {
	.pickup-block01 {
		position: relative;
		margin-bottom: 140px;
	}
	.pickup-block01:before {
		content: "";
		width: 121px;
		height: 10px;
		display: block;
		position: absolute;
		top: 230px;
		right: 0;
		background: url(/shared/img/top/top_decoration02.svg) no-repeat 0 0 / 121px 10px;
	}
	.pickup-block01 .image {
		position: relative;
		width: 50%;
		margin-bottom: 0;
		margin-right: 50%;
	}
	.pickup-block01 .image img {
		width: 100%;
		height: 670px;
		object-fit: cover;
		object-position: right top;
		border-radius: 0 20px 20px 0;
		box-shadow: 0 0 30px 3px rgba(0, 0, 0, 0.2);
	}
	.pickup-block01 .text {
		position: absolute;
		top: 0;
		left: 50%;
		width: 1140px;
		margin: 0 0 0 -570px;
		padding-top: 88px;
		padding-left: 620px;
	}
	.pickup-block01 .image:before {
		content: "";
		width: 571px;
		height: 578px;
		display: block;
		position: absolute;
		top: 40px;
		right: -556px;
		background: url(/shared/img/top/top_decoration01.svg) no-repeat 0 0 / 571px 578px;
	}
	.pickup-block02 {
		position: relative;
		margin-bottom: 140px;
	}
	.pickup-block02:before {
		content: "";
		width: 115px;
		height: 10px;
		display: block;
		position: absolute;
		top: 180px;
		left: 0;
		background: url(/shared/img/top/top_decoration04.svg) no-repeat 0 0 / 115px 10px;
	}
	.pickup-block02:after{
		content: "";
		width: 103px;
		height: 10px;
		display: block;
		position: absolute;
		top: 615px;
		right: 0;
		background: url(/shared/img/top/top_decoration05.svg) no-repeat 0 0 / 103px 10px;
	}
	.pickup-block02 .image {
		position: relative;
		width: calc(50% + 25px);
		margin-bottom: 0;
		margin-left: calc(50% - 25px);
	}
	.pickup-block02 .image:before {
		content: "";
		width: 902px;
		height: 329px;
		display: block;
		position: absolute;
		top: 206px;
		left: -887px;
		z-index: 100;
		background: url(/shared/img/top/top_decoration03.svg) no-repeat right 0 center / 902px 329px;
	}
	.pickup-block02 .image img {
		width: 100%;
		height: 670px;
		object-fit: cover;
		object-position: top;
		border-radius: 20px 0 0 20px;
		box-shadow: 0 0 30px 3px rgba(0, 0, 0, 0.2);
	}
	.pickup-block02 .text {
		position: absolute;
		top: 0;
		left: 50%;
		width: 1140px;
		margin: 0 0 0 -570px;
		padding-right: 620px;
	}
	/* -- スライドタイトル -- */
	.slide-title {
		overflow: hidden;
		transform: translate(-100%, 0);
		transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
		padding-left: 0.1em;
		margin-left: -0.2em;
	}
	.slide-title span {
		display: block;
		transform: translate(100%, 0);
		transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
		background: linear-gradient(135deg, #e91e2e 10%, #b9062b 90%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
		color: #e91e2e; /* フォールバック */
		padding-left: 0.1em; 
	}
	.slide-title.-visible,
	.slide-title.-visible span {
		transform: translate(0, 0);
	}
}
/* iPad縦向き（ポートレート）: 幅768px、高さ1024px */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
  /* iPad用のスタイル */
  .slide-title {
		overflow: visible;
  }
}

/* iPad横向き（ランドスケープ）: 幅1024px、高さ768px */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
  /* iPad用のスタイル */
  .slide-title {
		overflow: visible;
  }
}
.pickup-block02 .menu ul{
	width: 500px;
	border-top: solid 1px #828990;
	z-index: 100;
}
.pickup-block02 .menu ul li{
	font-size: 1.8rem;
	font-weight: bold;
	border-bottom: solid 1px #828990;
}
.pickup-block02 .menu ul li a{
	width: 100%;
	display: block;
	padding: 30px 5px 30px;
	background: url(/shared/img/icon_arrow.svg) no-repeat right 20px center / 27px 8px;
	transition: .3s ease-in-out;
}

@media print, screen and (min-width: 768px) {
	.pickup-block02 .menu ul li a:hover{
		background: #f2f3f4 url(/shared/img/icon_arrow.svg) no-repeat right 20px center / 27px 8px;
	}
}
@media screen and (max-width: 767px) {
	.slide-title span {
		font-size: 5rem;
		display: block;
		background: linear-gradient(135deg, #e91e2e 10%, #b9062b 90%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
		color: #e91e2e; /* フォールバック */
	}
	.pickup-block01 h2,
	.pickup-block02 h2 {
		font-size: 6rem;
		letter-spacing: 0;
	}
	.pickup-block01 .text,
	.pickup-block02 .text {
		padding: 90px 20px 70px;
	}
	.pickup-block01 .image{
		margin-right: 5%;
		position: relative;
	}
	.pickup-block01 .image:before {
		content: "";
		width: 100%;
		height:  250px;
		display: block;
		position: absolute;
		top: 25px;
		right: -5.1%;
		background: url(/shared/img/top/top_decoration_sp01.svg) no-repeat right 0 top 0 / 340px auto;
	}
	.pickup-block01 .image img{
		height: 250px;
		object-fit: cover;
		border-radius: 0 10px 10px 0;
	}
	.pickup-block02 .image{
		padding-left: 5%;
		position: relative;
	}
	.pickup-block02 .image img{
		height: 250px;
		object-fit: cover;
		margin-right: 5%;
		border-radius: 10px 0 0 10px;
	}
	.pickup-block02 .image:before {
		content: "";
		width: 100%;
		height:  260px;
		display: block;
		position: absolute;
		top: 25px;
		left: 0;
		background: url(/shared/img/top/top_decoration_sp02.svg) no-repeat right 0 top 0 / 370px auto;
	}
	.pickup-block02 .menu ul{
		width: 100%;
		margin: 0 auto;
	}
	.pickup-block02 .menu ul li a{
		padding: 22px 5px 22px;
	}
}
/* ------------------------------
 社員を知る（PC）
------------------------------ */
.red-bg-block {
	background: #b9062b;
}
.person-block {
	padding: 150px 0 80px;
	background: #b9062b;
	position: relative;
}
.person-block > .inBlock {
	display: flex;
	position: relative;
	background-color: #b9062b;
	color: #fff;
}
.personBoxWrap .personBox {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-color: #b9062b;
}
.personBoxWrap .swiper {
	overflow: visible;
	box-sizing: content-box;
}
.personBox .swiper-slide a{
	display: flex;
	background: #fff;
	border-radius: 20px;
}
.personBox .swiper-slide a img{
	border-radius: 20px 0 0 20px;
}
.personBox .profile {
	padding: 50px 0 0 60px;
}
.personBox .job {
	color: #b9062b;
	font-weight: 500;
	margin-bottom: 30px;
}
.personBox .job:before {
	content: "";
	width: 10px;
	height: 6px;
	vertical-align: middle;
	display: inline-block;
	background:#b9062b;
	border-radius: 5px 0 0 5px;
	margin-right: 5px;
	margin-top: -4px;
}
.personBox .profile .title {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.83;
	margin-bottom: 30px;
}
.person-block > .inBlock .title .icon-all{
	color: #fff;
	position: absolute;
	bottom: 0;
	border-bottom: solid 1px #fff;
}
.person-block > .inBlock .title .icon-all a{
	color: #fff;
	background: url(/shared/img/icon_all_w.svg) no-repeat right 7px center / 20px 20px;
}
.personBoxWrap .swiper-button-next,
.personBoxWrap .swiper-button-prev {
	top: auto;
	bottom: 0;
	right: 0;
	width: 34px;
	height: 10px;
	margin-top: 0;
	opacity: 1 !important;
	transition: .2s ease-in-out;
	background: url(/shared/img/swiper_arrow_next.svg) no-repeat 0 center / cover;
}
.personBoxWrap .swiper-button-prev {
	bottom: 0;
	right: 45px;
	left: auto;
	background: url(/shared/img/swiper_arrow_prev.svg) no-repeat 0 center / cover;
}
.personBoxWrap .swiper-button-next.swiper-button-disabled {
	background: url(/shared/img/swiper_arrow_next_o.svg) no-repeat 0 center / cover;
}
.personBoxWrap .swiper-button-prev.swiper-button-disabled {
	background: url(/shared/img/swiper_arrow_prev_o.svg) no-repeat 0 center / cover;
}
.personBoxWrap .swiper-button-next::after,
.personBoxWrap .swiper-button-prev::after {
	content: none;
}
.personBoxWrap .swiper-horizontal>.swiper-pagination-bullets {
    text-align: left;
}
.personBoxWrap .swiper-pagination-bullet {
    background: var(--swiper-pagination-bullet-inactive-color,#dc303d);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap,14px) !important;
}
.personBoxWrap .swiper-pagination-bullet-active {
    background: #fff;
}

@media print, screen and (min-width: 768px) {
	.person-block > .inBlock{
		position: absolute;
		top: 150px;
		left:0;
		right: 0;
		margin: auto;
		z-index: 10;
	}
	/* --- PERSON見出しの左側の赤いベタ（スライドが潜るように） --- */
	.person-block:before{
		content:"";
		width: calc((100% - 1140px) / 2);
		height: 500px;
		display: block;
		background: #b9062b;
		position: absolute;
		top: 150px;
		left:0;
		z-index: 50;
	}
	.person-block > .inBlock .title{
		width: 220px;
		height: 500px;
		position: absolute;
		top: 0;
		left:0;
		background: #b9062b;
	}
	.person-block > .inBlock .vertical {
		writing-mode: vertical-rl;
		line-height: 1.4;
		margin-left: -28px;
	}
	.person-block > .inBlock .title h2 {
		font-size: 9rem;
		font-family: "Poppins", sans-serif;
		font-style: italic;
		font-weight: 700;
	}
	.personBoxWrap {
		overflow: hidden;
	}
	.personBoxWrap .personBox {
		width: 1140px;
		padding-left: 220px;
		background: #b9062b;
	}
	.person-block > .inBlock .title .icon-all a:hover{
		color: #eb3341;
		background: url(/shared/img/icon_all_o.svg) no-repeat right 7px center / 20px 20px;
	}
	.personBoxWrap .swiper {
		height: 500px;
		position: relative;
	}
	.personBoxWrap .swiper a:hover {
		opacity: 1;
	}
	.personBoxWrap .swiper-button-next:hover{
		background: url(/shared/img/swiper_arrow_next_o.svg) no-repeat 0 center / cover;
	}
	.personBoxWrap .swiper-button-prev:hover{
		background: url(/shared/img/swiper_arrow_prev_o.svg) no-repeat 0 center / cover;
	}
	a .img_hover {
		overflow: hidden;
		display: block;
		position: relative;
		border-radius: 20px 0 0 20px;
	}
	a .img_hover img {
		display: block;
		transition-duration: 0.3s;
		overflow: hidden;
		display: block;
		width: 100%;
	}
	a:hover .img_hover img, a:focus .img_hover img {
		opacity: 1;
		overflow: hidden;
		transform: scale(1.1);
		transition-duration: 0.3s;
	}
	.personBox .profile {
		width: 407px;
	}
}
/* ------------------------------
 社員を知る（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.person-block {
		padding: 80px 0 80px;
	}
	.person-block .inBlock .title{
		width: 100%;
		padding: 0 20px;
	}
	.person-block .inBlock .title h2 {
		font-size: 5rem;
		line-height: 1;
		margin-bottom: 10px;
		font-family: "Poppins", sans-serif;
		font-style: italic;
		font-weight: 700;
	}
	.person-block > .inBlock .title .icon-all{
		position: static;
		float: right;
		margin-top: 20px;
	}
	.personBoxWrap .personBox {
		width: 90%;
	}
	.personBoxWrap .swiper {
		overflow: hidden;
		height: auto;
		padding: 30px 0 50px;
	}
	.personBox .swiper-slide a{
		display: block;
	}
	.personBox .swiper-slide a img{
		border-radius: 20px 20px 0 0;
	}
	.personBox .job {
		margin-bottom: 20px;
	}
	.personBox .profile {
		padding: 35px 25px;
	}
	.personBox .profile .title {
		padding-right: 25px;
		font-size: 2.1rem;
		line-height: 1.45;
	}
	.personBoxWrap .swiper-button-next,
	.personBoxWrap .swiper-button-prev {
		display: none;
	}
	.personBoxWrap .swiper-horizontal>.swiper-pagination-bullets {
	    text-align: center;
		bottom: 0;
	}
}
/* ------------------------------
 CAREER STEP FAQ共通
------------------------------ */
.career-step-block h2 span,
.faq-block h2 span {
  display: block;
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  background: linear-gradient(135deg, #e91e2e 10%, #b9062b 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  color: #e91e2e; /* フォールバック */
}
.career-step-block h2,
.faq-block h2 {
	line-height: 1;
	margin-bottom: 10px;
	font-family: "Poppins", sans-serif;
	font-style: italic;
	font-weight: 700;
}
.faq-block .inBlock{
	border-top: solid 1px #9ba1a6;
}

/* ------------------------------
 CAREER STEP
------------------------------ */
.career-step-block h2 {
	font-size: 6.2rem;
}
.shadow-wrapper {
  filter: drop-shadow(10px 10px 30px rgba(0,0,0,0.2));
  margin-bottom: 100px;
}
.slideIn{
  transition: 0.5s;
  width: 100%;
  height: 810px;
  background: #ecedee;
  clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 100%);
  will-change: opacity, transform;
}
.slideIn .inBlock{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 155px 0;
}
.slideIn .inBlock img{
  border-radius: 20px;
}
@media (pointer: coarse) and (hover: none) and (min-device-width: 768px) {
  .slideIn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media print, screen and (min-width: 768px) {
	.slideIn .inBlock .image,
	.slideIn .inBlock .text{
	  width: 546px;
	}
}
@media screen and (max-width: 767px) {
	.career-step-block h2 {
		font-size: 5rem;
		margin-top: 50px;
	}
	.slideIn .inBlock{
	  display: block;
	  padding: 100px 20px 70px;
	}
	.slideIn{
	  width: 100%;
	  height: auto;
	  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
	}
}
/* ------------------------------
 FAQ
------------------------------ */
.faq-block h2 {
	font-size: 8rem;
}
@media screen and (max-width: 767px) {
	.faq-block h2 {
		font-size: 5rem;
		margin-top: 50px;
	}
	.faq-block .inBlock {
		width: 90%;
		margin: 0 auto;
	}
	.faq-block .icon-all {
		float: right;
	}
}