@charset "utf-8";

/* ------------------------------
 メインイメージ（PC）
------------------------------ */
.mainimg {
	position: relative;
	width: 100%;
	height: calc(100vh - 90px);
	margin-top: 90px;
}
.mainimg .swiper,
.mainimg .swiper-slide {
	height: 100%;
}
.mainimg .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mainimg h1 {
	display: inline-block;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.mainimg h1 img {
	width: 653px;
	height: 341px;
}
/* ページネーション */
.mainimg .swiper-horizontal > .swiper-pagination-bullets,
.mainimg .swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: 25px;
}
.mainimg .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.mainimg .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap,10px);
}
.mainimg .swiper-pagination-bullet {
	width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,10px));
	height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,10px));
	background: var(--swiper-pagination-bullet-inactive-color,#fff);
	opacity: var(--swiper-pagination-bullet-inactive-opacity,1);
}
.mainimg .swiper-pagination-bullet-active {
	background: var(--swiper-pagination-bullet-inactive-color,#005aab);
	opacity: var(--swiper-pagination-bullet-inactive-opacity,1);
}
@media print, screen and (min-width: 768px) {
	.mainimg h1 {
		top: 29%;
	}
}
/* ------------------------------
 メインイメージ（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.mainimg {
		height: calc(100vh - 58px);
		margin-top: 58px;
	}
	.mainimg h1 {
		top: 39%;
	}
	.mainimg h1 img {
		width: 87%;
		height: auto;
	}
	/* ページネーション */
	.mainimg .swiper-horizontal > .swiper-pagination-bullets,
	.mainimg .swiper-pagination-bullets.swiper-pagination-horizontal {
		display: none;
	}
}

/* ------------------------------
 共通（PC）
------------------------------ */
.contentsHome p {
	line-height: 1.75;
}
.contentsHome h2 {
	margin-bottom: 30px;
	font-size: 5rem;
	line-height: 1;
	font-weight: bold;
}
.contentsHome h2 span {
	display: block;
	margin-bottom: 10px;
	color: #005aab;
	font-family: 'Poppins', sans-serif;
	font-size: 2rem;
	font-style: italic;
	font-weight: 700;
}
/* ------------------------------
 共通（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.contentsHome h2 {
		margin-bottom: 23px;
		margin-left: 5%;
		font-size: 3.2rem;
	}
	.contentsHome h2 span {
		font-size: 1.6rem;
	}
}

/* ------------------------------
 メッセージ（PC）
------------------------------ */
.messageBlock > .inBlock {
	color: #fff;
}
@media print, screen and (min-width: 768px) {
	.messageBlock {
		height: 870px;
		margin-bottom: 120px;
		background: url(../img/message_bg.jpg) no-repeat center 0;
	}
	.messageBlock > .inBlock {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: 1240px;
		padding-top: 175px;
		padding-left: 746px;
	}
	.messageBlock > .inBlock img {
		width: 494px;
		height: 207px;
		margin-bottom: 35px;
	}
}
/* ------------------------------
 メッセージ（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.messageBlock {
		margin-bottom: 60px;
		background-color: #005aab;
	}
	.messageBlock > .inBlock {
		padding: 60px 0 0 5%
	}
	.messageBlock > .inBlock img {
		width: 90%;
		height: auto;
		margin-bottom: 30px;
	}
	.messageBlock > .inBlock p span {
		display: block;
	}
}
@media screen and (max-width: 374px) {
	.messageBlock > .inBlock p {
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 359px) {
	.messageBlock > .inBlock p {
		font-size: 1.2rem;
	}
}

/* ------------------------------
 会社を知る（PC）
------------------------------ */
.companyBlock > .inBlock > p {
	margin-bottom: 30px;
}
.companyBlock > .inBlock > ul {
	position: relative;
	z-index: 1;
	margin-top: 110px;
}
.companyBlock > .inBlock > ul > li {
	background-color: #fff;
}
.companyBlock > .inBlock > ul > li > a {
	display: block;
	position: relative;
	color: #fff;
}
.companyBlock > .inBlock > ul > li > a::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: url(../img/icon_arrow.svg) no-repeat 0 0 / cover;
}
.companyBlock > .inBlock > ul > li > a > p {
	position: absolute;
	bottom: 25px;
	left: 30px;
	font-size: 2.2rem;
	font-weight: bold;
}
@media print, screen and (min-width: 768px) {
	.companyBlock {
		margin-bottom: 120px;
		padding-top: 142px;
		background: url(../img/company_bg.png) no-repeat 5px 0 / 1403px 784px;
	}
	.companyBlock > .inBlock {
		position: relative;
	}
	.companyBlock > .inBlock > img {
		position: absolute;
		top: 0;
		right: -390px;
	}
	.companyBlock > .inBlock > ul {
		display: flex;
		justify-content: space-between;
	}
	.companyBlock > .inBlock > ul > li > a {
		width: 360px;
		height: 510px;
	}
}
/* ------------------------------
 会社を知る（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.companyBlock {
		margin-bottom: 60px;
		padding-top: 30px;
		background: url(../img/company_bg_sp.png) no-repeat 0 0 / 100% auto;
	}
	.companyBlock > .inBlock > p {
		margin-bottom: 30px;
		margin-left: 5%;
	}
	.companyBlock > .inBlock > .btnbg {
		margin-left: 5%;
		margin-bottom: 35px;
	}
	.companyBlock > .inBlock > ul {
		margin: -25px 5% 0;
	}
	.companyBlock > .inBlock > ul > li > a::after {
		bottom: 15px;
		right: 15px;
		width: 30px;
		height: 30px;
	}
	.companyBlock > .inBlock > ul > li > a > p {
		bottom: 12px;
		left: 20px;
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 374px) {
	.companyBlock > .inBlock > p {
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 359px) {
	.companyBlock > .inBlock > p {
		font-size: 1.2rem;
	}
}

/* ------------------------------
 仕事を知る（PC）
------------------------------ */
.worksBlock > .inBlock > h2 {
	color: #fff;
}
.worksBlock > .inBlock > h2 span {
	color: #80acd5;
}
.worksBlock > .inBlock > p {
	margin-bottom: 30px;
	color: #fff;
}
.worksBlock > .inBlock > ul {
	position: relative;
	z-index: 1;
	margin-top: 200px;
}
.worksBlock > .inBlock > ul > li {
	background-color: #fff;
}
.worksBlock > .inBlock > ul > li > a {
	display: block;
	position: relative;
	color: #fff;
}
.worksBlock > .inBlock > ul > li > a::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: url(../img/icon_arrow.svg) no-repeat 0 0 / cover;
}
.worksBlock > .inBlock > ul > li > a > p {
	position: absolute;
	bottom: 25px;
	left: 30px;
	font-size: 2.2rem;
	font-weight: bold;
}
@media print, screen and (min-width: 768px) {
	.worksBlock {
		margin-bottom: 120px;
		padding-top: 228px;
		background: url(../img/works_bg.png) no-repeat 0 0 / 1920px 1148px;
	}
	.worksBlock > .inBlock {
		position: relative;
	}
	.worksBlock > .inBlock > h2,
	.worksBlock > .inBlock > p,
	.worksBlock > .inBlock > .btnbg {
		margin-left: 633px;
	}
	.worksBlock > .inBlock > img.parts {
		position: absolute;
		top: 123px;
		right: -275px;
	}
	.worksBlock > .inBlock > img:not(.parts) {
		position: absolute;
		top: 0;
		left: -390px;
	}
	.worksBlock > .inBlock > ul {
		display: flex;
		margin-left: 420px;
	}
	.worksBlock > .inBlock > ul > li > a {
		width: 360px;
		height: 510px;
	}
}
/* ------------------------------
 仕事を知る（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.worksBlock {
		margin-bottom: 60px;
		padding-top: 117px;
		border-bottom: 50px solid #fff;
		background: #005aab url(../img/works_bg_sp.png) no-repeat 0 0 / 100% auto;
	}
	.worksBlock > .inBlock > p {
		margin-bottom: 30px;
		margin-left: 5%;
	}
	.worksBlock > .inBlock > p span {
		display: block;
	}
	.worksBlock > .inBlock > .btnbg {
		margin-left: 5%;
	}
	.worksBlock > .inBlock > img.parts {
		position: relative;
		z-index: 1;
		margin-top: -10px;
		margin-left: 7.5%;
		width: 90%;
		height: auto;
	}
	.worksBlock > .inBlock > img:not(.parts) {
		margin-top: -30px;
	}
	.worksBlock > .inBlock > ul {
		margin: -25px 5% -50px;
	}
	.worksBlock > .inBlock > ul > li > a::after {
		bottom: 15px;
		right: 15px;
		width: 30px;
		height: 30px;
	}
	.worksBlock > .inBlock > ul > li > a > p {
		bottom: 12px;
		left: 20px;
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 374px) {
	.worksBlock > .inBlock > p {
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 359px) {
	.worksBlock > .inBlock > p {
		font-size: 1.2rem;
	}
}

/* ------------------------------
 社員を知る（PC）
------------------------------ */
.peopleBlock > .inBlock > p {
	margin-bottom: 30px;
}
.peopleBoxWrap .swiper-slide {
	position: relative;
	background-color: #fff;
}
.peopleBoxWrap .swiper-slide a {
	display: block;
	position: relative;
}
.peopleBoxWrap .swiper-slide a::after {
	content: "";
	display: block;
	position: absolute;
	top: 365px;
	right: 17px;
	width: 46px;
	height: 46px;
	background: url(../img/icon_arrow.svg) no-repeat 0 0 / cover;
}
.peopleBoxWrap .swiper-slide .interview {
	position: absolute;
	top: 17px;
	left: 29px;
	color: #d7fa00;
	font-family: 'Poppins', sans-serif;
	font-size: 1.5rem;
	line-height: .95;
	font-style: italic;
	text-align: center;
}
.peopleBoxWrap .swiper-slide .interview span {
	display: block;
	margin-left: -25px;
	color: rgba(215,250,0,0);
	font-size: 7.2rem;
	font-weight: 600;
	letter-spacing: -.04em;
	-webkit-text-stroke: 1px #d7fa00;
}
.peopleBoxWrap .swiper-slide .profile {
	position: absolute;
	top: 335px;
	left: 20px;
	color: #fff;
	line-height: 1.5;
}
.peopleBoxWrap .swiper-slide .profile strong {
	font-size: 2.2rem;
	line-height: 1.3;
	font-weight: bold;
}
.peopleBoxWrap .swiper-button-next,
.peopleBoxWrap .swiper-button-prev {
	top: auto;
	bottom: 0;
	left: auto;
	right: 0;
	width: 40px;
	height: 40px;
	background-color: #005aab;
	color: #fff;
}
.peopleBoxWrap .swiper-button-prev {
	right: 56px;
}
.peopleBoxWrap .swiper-button-next::after,
.peopleBoxWrap .swiper-button-prev::after {
	font-size: 1.2rem;
	font-weight: bold;
}
@media print, screen and (min-width: 768px) {
	.peopleBlock {
		padding-top: 140px;
		background: url(../img/people_bg.png) no-repeat 122px 0 / 1287px 783px;
	}
	.peopleBlock > .inBlock {
		margin-bottom: 72px;
	}
	.peopleBlock > img {
		margin-left: auto;
		margin-right: auto;
	}
	.peopleBoxWrap {
		overflow: hidden;
	}
	.peopleBoxWrap .peopleBox {
		position: relative;
		width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}
	.peopleBoxWrap .swiper {
		overflow: visible;
		height: 571px;
		padding: 0 108px 0 0;
		box-sizing: content-box;
	}
	.peopleBoxWrap .swiper-slide {
		/* width: 364px !important; */
		/* height: 430px !important;
		margin-right: 24px; */
		width: 328px;
		transition: .8s;
	}
	.peopleBoxWrap .swiper-slide.swiper-slide-active {
		/* width: 436px !important;
		height: 571px !important; */
		margin: 0 78px 0 54px !important;
		transform: scale(1.3292682);
		transform-origin: top center;
	}
	.peopleBoxWrap .swiper-button-next,
	.peopleBoxWrap .swiper-button-prev {
		transition: .3s ease-in-out;
	}
	.peopleBoxWrap .swiper-button-next:hover,
	.peopleBoxWrap .swiper-button-prev:hover {
		opacity: .5;
	}
}
/* ------------------------------
 社員を知る（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.peopleBlock {
		padding-top: 30px;
		background: url(../img/people_bg_sp.png) no-repeat 0 0 / 100% auto;
	}
	.peopleBlock > .inBlock > p {
		margin-bottom: 30px;
		margin-left: 5%;
	}
	.peopleBlock > .inBlock > p span {
		display: block;
	}
	.peopleBlock > .inBlock > .btnbg {
		margin-left: 5%;
		margin-bottom: 35px;
	}
	.peopleBoxWrap {
		overflow: hidden;
	}
	.peopleBoxWrap .peopleBox {
		position: relative;
		width: 215px;
		margin-left: auto;
		margin-right: auto;
	}
	.peopleBoxWrap .swiper {
		overflow: visible;
		height: 330px;
		padding: 0 26px 0 0;
		box-sizing: content-box;
	}
	.peopleBoxWrap .swiper-slide {
		width: 189px;
		transition: .8s;
	}
	.peopleBoxWrap .swiper-slide.swiper-slide-active {
		margin: 0 29px 0 13px !important;
		transform: scale(1.1375661);
		transform-origin: top center;
	}
	.peopleBoxWrap .swiper-slide a::after {
		top: 204px;
		right: 10px;
		width: 34px;
		height: 34px;
	}
	.peopleBoxWrap .swiper-slide .interview {
		top: 10px;
		left: 16px;
		font-size: 1rem;
	}
	.peopleBoxWrap .swiper-slide .interview span {
		margin-left: -18px;
		font-size: 4.7rem;
		letter-spacing: -.03em;
	}
	.peopleBoxWrap .swiper-slide .profile {
		top: 180px;
		left: 15px;
		font-size: 1.2rem;
	}
	.peopleBoxWrap .swiper-slide .profile strong {
		font-size: 1.6rem;
	}
	.peopleBoxWrap .swiper-button-next,
	.peopleBoxWrap .swiper-button-prev {
		left: auto;
		right: auto;
		width: 34px;
		height: 34px;
	}
	.peopleBoxWrap .swiper-button-next {
		right: 50%;
		margin-right: -41px;
	}
	.peopleBoxWrap .swiper-button-prev {
		left: 50%;
		margin-left: -41px;
	}
	.peopleBoxWrap .swiper-button-next::after,
	.peopleBoxWrap .swiper-button-prev::after {
		font-size: 1rem;
	}
}
@media screen and (max-width: 374px) {
	.peopleBlock > .inBlock > p{
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 359px) {
	.peopleBlock > .inBlock > p {
		font-size: 1.2rem;
	}
}