@charset "utf-8";
/* ------------------------------
 メイン（PC）
------------------------------ */
/* -- メインテキスト -- */
.mainBlock {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-bottom: var(--header-height-pc);
}
.mainText {
	padding: 100px 0 55px;
	margin: 0 auto;
}
.mainText h1 {
	font-size: 7.4rem;
	color: var(--main-font-color);
	line-height: 1.4;
	text-align: center;
}
.mainText h1 span {
	color: var(--blue-light-color);
}
/* -- メインイメージ -- */
.mainBlock .mainimgSwiper {
	position: relative;
	width: 100%;
}
.mainimgSwiper .swiper-wrapper {
	transition-timing-function: linear !important;
}
.mainimgSwiper .swiper-slide {
	width: 624px;
	height: 660px;
	border-radius: 12px;
	overflow: hidden;
	margin: 0 12px;
}
.mainimgSwiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* -- 部品画像 -- */
img[class^="parts"] {
	position: absolute;
	z-index: 1;
}
img.parts01 {
	top: 63px;
	left: calc(50% + 1140px / 2 - 140px);
	z-index: -1;
}
img.parts02 {
	top: 106px;
	right: calc(50% + 1140px / 2 - 86px);
}
img.parts03 {
	bottom: -160px;
	left: calc(50% - 1140px / 2 - 130px);
}
img.parts07 {
	bottom: -120px;
	left: calc(50% + 1140px / 2 - 100px);
}
@media print, screen and (min-width: 768px) {
	/* -- メインテキスト -- */
	.mainText {
		width: 1140px;
	}
}
/* ------------------------------
 メイン（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	/* -- メインテキスト -- */
	.mainBlock {
		margin-bottom: 80px;
	}
	.mainText {
		padding: 50px 0 25px;
	}
	.mainText h1 {
		font-size: 3.8rem;
	}
	/* -- メインイメージ -- */
	.mainimgSwiper .swiper-slide {
		width: 75%;
		height: auto;
		min-height: 370px;
		margin: 0 5px;
	}
	/* -- 部品画像 -- */
	img.parts01 {
		width: 103px;
		height: 56px;
		object-fit: cover;
		top: 16px;
		left: auto;
		right: 5%;
	}
	img.parts02 {
		width: 83px;
		height: 66px;
		object-fit: cover;
		top: 20px;
		right: auto;
		left: 4%;
	}
	img.parts03 {
		width: 100px;
		height: 93px;
		object-fit: cover;
		bottom: -65px;
		left: 5%;
	}
	img.parts07 {
		width: 50px;
		bottom: -51px;
		left: auto;
		right: 13%;
	}
}
/* ------------------------------
 見出し・共通（PC）
------------------------------ */
/* h2 */
.contentsHome h2 {
	position: relative;
	font-size: 4.2rem;
	line-height: 1.4;
	margin-bottom: 25px;
}
.contentsHome h2 span {
	display: block;
	font-family: var(--font-family-en);
	font-size: 2.4rem;
	font-weight: normal;
	color: var(--blue-light-color);
	margin-bottom: 10px;
}
.contentsHome h2 span::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 20px;
	background: url(../img/icon_heading.svg) no-repeat center / 24px 8px;
	margin-right: 8px;
}
/* h3 */
.contentsHome h3 {
	font-size: 3.2rem;
	line-height: 1.4;
	margin-bottom: 15px;
}
/* -- テキスト -- */
section p {
	font-size: 2.0rem;
	font-weight: 500;
}
@media print, screen and (min-width: 768px) {
	.contentsHome .caseBlock h2,
	.contentsHome .aboutBlock h2 {
		margin-bottom: 0;
	}
}
/* ------------------------------
 見出し・共通（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	/* h2 */
	.contentsHome h2 {
		font-size: 3.2rem;
		margin-bottom: 20px;
	}
	.contentsHome h2 span {
		font-size: 2.2rem;
		margin-bottom: 3px;
	}
	.contentsHome h2 span::before {
		height: 17px;
		margin: -4px 8px 0 0;
	}
	/* h3 */
	.contentsHome h3 {
		font-size: 2.0rem;
		margin-bottom: 10px;
	}
	/* -- テキスト -- */
	section p {
		font-size: 1.6rem;
	}
}
/* ------------------------------
 Message（PC）
------------------------------ */
.messageBlock {
	margin-bottom: 110px;
}
.messageBlock .inBlock {
	position: relative;
	z-index: 1;
}
.messageBlock .inBlock::before,
.messageBlock .inBlock::after {
	content: "";
	position: absolute;
	z-index: -1;
	mix-blend-mode: multiply;
}
.messageBlock .inBlock::before {
	width: 320px;
	height: 320px;
	background: url(/recruit/img/message_bg01.png) no-repeat center / cover;
	top: 20px;
	right: -245px;
	opacity: .3;
}
.messageBlock .inBlock::after {
	width: 562px;
	height: 572px;
	background: url(/recruit/img/message_bg02.png) no-repeat center / cover;
	bottom: -54px;
	left: -330px;
	opacity: .4;
}
.messageBlock figure img {
	position: absolute;
	border-radius: 6px;
}
.messageBlock figure .msimg01 {
	width: 215px;
	height: auto;
	top: 148px;
	right: -87px;
}
.messageBlock figure .msimg02 {
	width: 148px;
	height: auto;
	left: -110px;
	bottom: 23px;
}
.messageBlock figure .msimg03 {
	width: 120px;
	height: auto;
	left: 0;
	bottom: 235px;
}
@media print, screen and (min-width: 768px) {
	section.messageBlock p {
		font-size: 1.8rem;
	}
}
/* ------------------------------
 Message（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.messageBlock {
		margin-bottom: 75px;
	}
	.contentsHome .messageBlock h2 {
		font-size: 2.5rem;
	}
	.contentsHome .messageBlock h2 span {
		margin-bottom: 8px;
	}
	.messageBlock figure {
		position: relative;
		height: 234px;
		margin-top: 50px;
	}
	.messageBlock figure .msimg01 {
		width: 129px;
		top: 0;
		right: 4%;
	}
	.messageBlock figure .msimg02 {
		width: 80px;
		left: 100px;
		object-fit: cover;
		left: 20%;
		bottom: 0;
	}
	.messageBlock figure .msimg03 {
		width: 70px;
		height: 88px;
		object-fit: cover;
		left: 3%;
		bottom: 115px;
	}
	.messageBlock .inBlock::before {
		width: 158px;
		height: 158px;
		top: -130px;
		right: -2%;
	}
	.messageBlock .inBlock::after {
		width: 224px;
		height: 259px;
		bottom: -10px;
		left: 8%;
		transform: scale(-1, 1);
	}
}
/* ------------------------------
 3分でわかる東和／仕事紹介（PC）
------------------------------ */
.businessBlock {
	position: relative;
	margin-bottom: 140px;
}
.businessBlock .flexBox:first-child {
	margin-bottom: 115px;
}
/* -- 部品画像 -- */
img.parts04 {
	top: -178px;
	right: 48px;
}
img.parts05 {
	bottom: -84px;
	left: 35px;
}
img.parts08 {
	bottom: -80px;
	left: calc(50% + 1140px / 2 - 170px);
}
@media print, screen and (min-width: 768px) {
	.businessBlock .flexBox {
		height: 550px;
		justify-content: flex-end;
		align-items: center;
	}
	.businessBlock .flexBox figure {
		position: absolute;
		max-width: 1030px;
		height: 550px;
		right: calc(50% + 1140px / 2 - 640px);
		bottom: 0;
	}
	.businessBlock .flexBox figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: right;
		border-radius: 0 12px 12px 0;
	}
	.businessBlock .flexBox .inBox {
		width: 400px;
	}
	.businessBlock .flexBox:first-child {
		justify-content: flex-start;
	}
	.businessBlock .flexBox:first-child figure {
		right: auto;
		left: calc(50% + 1140px / 2 - 640px);
		top: 0;
		bottom: auto;
	}
	.businessBlock .flexBox:first-child figure img {
		object-position: left;
		border-radius: 12px 0 0 12px;
	}
}
@media screen and (min-width: 1921px) {
	.businessBlock .flexBox figure img,
	.businessBlock .flexBox:first-child figure img {
		border-radius: 12px;
	}
	/* -- 部品画像 -- */
	img.parts04 {
		right: calc(50% - 1140px / 2 - 334px);
	}
	img.parts05 {
		left: calc(50% - 1140px / 2 - 348px);
	}
}
@media print {
	.businessBlock .flexBox:first-child figure {
		top: 0;
	}
	.businessBlock .flexBox:last-child figure {
		bottom: 0;
	}
}
/* ------------------------------
 3分でわかる東和／仕事紹介（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.businessBlock {
		margin-bottom: 60px;
	}
	.businessBlock .flexBox:first-child {
		margin-bottom: 50px;
	}
	.businessBlock .inBox {
		margin-bottom: 30px;
	}
	.businessBlock figure {
		margin: 0 -5.5%;
	}
	/* -- 部品画像 -- */
	img.parts04 {
		width: 166px;
		top: 212px;
		right: 5%;
	}
	img.parts05 {
		width: 160px;
		bottom: 194px;
		left: auto;
		right: 4%;
	}
}
/* ------------------------------
 社員インタビュー（PC）
------------------------------ */
.interviewBlock {
	position: relative;
	z-index: 1;
	padding-bottom: 100px;
	margin-bottom: 135px;
}
.interviewBlock::before {
	content: "";
	width: 100%;
	height: 640px;
	background: linear-gradient(45deg, rgba(93, 240, 254, 1) 0%, 20%, rgba(0, 50, 123, 1) 50%, 80%, rgba(10, 127, 211, 1) 100%);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;
}
.interviewBlock .inBlock {
	margin-bottom: 50px;
}
/* -- インタビュースライド -- */
.interviewSwiper {
	position: relative;
	width: 1140px;
	left: calc(50% - 1140px / 2);
}
.interviewBox {
	display: flex;
	width: 555px;
	height: 510px;
	border-radius: 12px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
}
.interviewBox a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	color: #fff;
	border-radius: 12px;
	padding: 30px;
	z-index: 1;
	overflow: hidden;
}
.interviewBox a::before {
	content: "";
	display: inline-block;
	width: 36px;
	height: 36px;
	margin: -3px 0 0 14px;
	background: url(../img/arrow_link.svg) no-repeat left calc(50% + 1px) top 50% / 7px 11px,
				linear-gradient(225deg, rgba(93, 240, 254, 1) 0%, 20%, rgba(0, 50, 123, 1) 50%, 80%, rgba(10, 127, 211, 1) 100%);
	border-radius: 100%;
	vertical-align: middle;
	position: absolute;
	right: 30px;
	bottom: 30px;
}
.interviewBox a figure {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;
}
.interviewBox a figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 一覧リンク */
.controlarea .cms_link:not(.btn) a:not([target="_blank"]) {
	color: #fff;
}
.controlarea .cms_link:not(.btn) a:not([target="_blank"])::before {
	background-color: #fff;
}
.controlarea .cms_link:not(.btn) a:not([target="_blank"])::after {
	background: #fff url(../img/arrow_link_b.svg) no-repeat left calc(50% + 1px) top 50% / 10px 16px;
}
/* -- 部品画像 -- */
img.parts06 {
	bottom: -123px;
	right: 47px;
}
@media print, screen and (min-width: 768px) {
	.interviewBlock .inBlock {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	.interviewBlock h2 {
		width: 370px;
		margin-bottom: 0;
	}
	.interviewBlock .inBox {
		width: calc(100% - 400px);
	}
	/* -- インタビュースライド -- */
	.interviewBlock::before {
		width: 96.875%;
		max-width: 1860px;
		border-radius: 30px;
	}
	/* スクロールバー */
	.controlarea .controlBox {
		width: 930px;
	}
	.controlarea .swiper-scrollbar {
		width: 84.517%;
	}
	/* 前へ／次へボタン */
	.controlarea .swiper-buttons .swiper-button-prev:hover,
	.controlarea .swiper-buttons .swiper-button-next:hover {
		opacity: .7;
	}
}
@media print, screen and (min-width: 1921px) {
	/* -- 部品画像 -- */
	img.parts06 {
		right: calc(50% - 1140px / 2 - 335px);
	}
}
/* ------------------------------
 社員インタビュー（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.interviewBlock {
		padding: 0 5% 40px;
		margin-bottom: 60px;
	}
	.interviewBlock::before {
		height: 457px;
		background: linear-gradient(225deg, rgba(93, 240, 254, 1) 0%, 20%, rgba(0, 50, 123, 1) 50%, 80%, rgba(10, 127, 211, 1) 100%);
	}
	.interviewBlock .inBlock {
		width: 100%;
		margin: 0 0 30px;
	}
	/* -- インタビュースライド -- */
	.interviewSwiper {
		position: relative;
		width: 100%;
		left: 0;
	}
	.interviewBox {
		width: 290px;
		height: auto;
		min-height: 394px;
	}
	.interviewBox a {
		padding: 20px;
	}
	.interviewBox a::before {
		right: 20px;
		bottom: 20px;
	}
	.interviewBox a figure img {
		object-position: top 30% left 50%;
	}
	.interviewBox .tag {
		min-width: 50px;
		min-height: 22px;
		font-size: 1.2rem;
	}
	.interviewBox .profile {
		flex-direction: column;
	}
	.interviewBox p {
		font-size: 1.4rem;
	}
	.interviewBox .division {
		font-size: 1.6rem;
	}
	/* 一覧リンク */
	.controlarea .cms_link {
		margin: 10px auto 0;
	}
	.controlarea .cms_link:not(.btn) a:not([target="_blank"])::after {
		background-size: 8px 13px, cover;
	}
	/* -- 部品画像 -- */
	img.parts06 {
		width: 172px;
		bottom: -66px;
		right: 5%;
	}
}
/* ------------------------------
 働く環境（PC）
------------------------------ */
.environmentBlock {
	margin-bottom: 120px;
}
.environmentBlock figure img {
	border-radius: 12px;
}
@media print, screen and (min-width: 768px) {
	.environmentBlock .inBlock {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
	}
	.environmentBlock .inBox {
		width: 420px;
	}
	.environmentBlock figure {
		width: 660px;
	}
}
/* ------------------------------
 働く環境（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.environmentBlock {
		margin-bottom: 60px;
	}
	.environmentBlock .inBox {
		margin-bottom: 30px;
	}
}
/* ------------------------------
 新着情報（PC）
------------------------------ */
@media print, screen and (min-width: 768px) {
	.newsBlock .inBlock {
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	.newsBlock .inBox {
		width: 200px;
	}
	.newsBlock .newsList {
		width: 846px;
		min-height: 205px;
	}
	.newsBlock .cms_link {
		position: absolute;
		left: 0;
		bottom: 0;
	}
}
/* ------------------------------
 新着情報（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.newsBlock .newsList {
		margin-bottom: 25px;
	}
}

/* ------------------------------
 フッター（PC）
------------------------------ */
/* -- 部品画像 -- */
.contentsHome > img.parts10 {
	bottom: -220px;
	right: calc(50% + 1140px / 2 - 330px);
}
.contentsHome > img.parts11 {
	bottom: -520px;
	left: calc(50% + 1140px / 2 - 195px);
}
/* ------------------------------
 フッター（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	/* -- 部品画像 -- */
	.contentsHome > img.parts10 {
		width: 160px;
		bottom: -80px;
		right: auto;
		left: 8%;
	}
	.contentsHome > img.parts11 {
		width: 90px;
		bottom: -410px;
		left: auto;
		right: 10%;
	}
}
/* ------------------------------
 フェードイン（PC）
------------------------------ */
.fadein {
	visibility: hidden;
	opacity: 0;
	transform: translate(0, 10px);
	transition: opacity 1s ease .5s, transform 1s ease .5s;
}
.fadein.active {
	visibility: visible;
	opacity: 1;
    transform: translate(0, 0);
    transition-delay: .3s;
}