@charset "utf-8";
/*----------------------------
	main visual
-----------------------------*/
.mv {
	padding-top: max(273rem,273px);
	padding-bottom: 143rem;
	letter-spacing: 0.14em;
	position: relative;
}
.mv__title__outer {
	line-height: 1;
	margin-left: 176rem;
}
.mv__title {
	font-family: var(--tektur);
	font-weight: normal;
	font-size: var(--fs-64);
}
.mv__title--sub {
	font-weight: bold;
	font-size: var(--fs-32);
}
.mv__title--sub p {
	margin-top: 24rem;
}
.mv__catch__outer {
	position: relative;
	padding-top: 199rem;
	padding-bottom: 220rem;
}
.mv__canvas {
	aspect-ratio: 670/547;
	width: 52.109375%;
	height: auto;
	display: block;
	margin: auto;
	position: absolute;
	z-index: -1;
	right: 80rem;
	top: -80rem;
}
#part2, #part3, #part4, #part5, #part6,#part7 {
  transition: transform 2s ease, fill 2.5s ease;
}
#part1 {
	transform: translate(0,0);
}
#part2 {
	transform: translate(0, 450rem);
	fill: var(--accent-color);
}
#part3 {
	transform: translate(-450rem, 0);
	fill: var(--main-color);
}
#part4 {
	transform: translate(-450rem, 0);
	fill: var(--main-color);
}
#part5 {
	transform: translate(0, 0);
	fill: var(--main-color);
}
#part6 {
	transform: translate(0,0);
	transform-origin: left bottom;
	fill: var(--accent-color);
}
#part7 {
	transform: translate(0, 0);
	fill: var(--main-color);
}
.mv__catch {
	font-weight: bold;
	font-size: var(--fs-32);
	line-height: 2;
	margin-left: 176rem;
	width: max-content;
	opacity: 0;
	transform: translateY(20rem);
	transition: opacity 1s ease 1s, transform 1s ease 1s;
}
.mv__catch.is--show {
    opacity: 1;
    transform: translateY(0);
}
.mv__text__outer {
	width: 35%;
	font-weight: bold;
	padding-left: 176rem;
}
.mv__text {
	line-height: 2;
	margin-bottom: 58rem;
	position: relative;
}
.line::before {
	content: "";
	width: 427rem;
	height: 111rem;
	background-color: var(--accent-color);
	position: absolute;
	left: calc(-100% - 176rem);
	bottom: -27rem;
	z-index: -1;
	transition: 1s;
}
.line.fadein.is--animated::before {
	left: -176rem;
}
.link--circle {
	background-color: var(--base-color);
	color: var(--main-color);
	border: solid 1px var(--main-color);
	border-radius: 50%;
	font-family: var(--biz);
	font-size: var(--fs-14);
	aspect-ratio: 1/1;
	width: 160rem;
	height: 160rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: 10rem;
	margin-left: auto;
	position: relative;
	align-content: center;
	line-height: 1.5;
}
.arrow {
	width: 62rem;
	height: 15rem;
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -42rem;
	margin: auto;
	transition: .4s;
}
.link--circle:hover .arrow {
	width: 80rem;
	right: -60rem;
}
.arrow img {
	width: 90rem;
	height: auto;
	position: absolute;
	right: 0;
}
.img--mv-w,.img--mv-m {
	position: absolute;
	aspect-ratio: 1/1;
	width: 22.03125%;
	height: auto;
}
.img--mv-w {
	bottom: 154rem;
	right: 15rem;
}
.img--mv-m {
	bottom: -89rem;
	right: 216rem;
	z-index: 1;
}
/*----------------------------
	service
-----------------------------*/
.sec--service {
	background-color: var(--base-color);
	padding: 128rem 0 233rem;
	position: relative;
	z-index: -1;
}
.sec--service::after {
	content: "";
	width: 111rem;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background-color: var(--accent-color);
	z-index: -1;
}
.content {
	margin-right: 176rem;
}
.content + .content {
	margin-top: 80rem;
}
.content__title {
	font-size: var(--fs-24);
	line-height: 1;
	letter-spacing: 0.14em;
	padding: 8rem 62rem;
	position: relative;
	display: inline-block;
	margin-bottom: 13rem;
	margin-left: 176rem;
}
.content__title::before,
.content__title::after {
	content: "";
	width: 21rem;
	height: 21rem;
	position: absolute;
}
.content__title::before {
	background: url(../img/brackets_left.png) center / 100% no-repeat;
	left: 0;
	top: 0;
}
.content__title::after {
	background: url(../img/brackets_right.png) center / 100% no-repeat;
	right: 0;
	bottom: 0;
}
.content__text {
	display: flex;
	gap: 22rem;
}
.point__outer {
	padding: 27rem 0 25rem 176rem;
	width: 468rem;
}
.content:nth-child(2) .point__outer {
	background: url(../img/bg_dx-solution.jpg) left top / 355rem no-repeat;
}
.content:nth-child(3) .point__outer {
	background: url(../img/bg-bpo-outsourcing.jpg) left top / 355rem no-repeat;
}
.content:nth-child(4) .point__outer {
	background: url(../img/bg-tech-talent-solution.jpg) left top / 355rem no-repeat;
}
.list--point {
	display: flex;
	gap: 16rem;
	justify-content: center;
}
.list--point__item {
	width: 140rem;
	height: 140rem;
	min-width: 120px;
	min-height: 120px;
	padding: 8rem;
	box-sizing: border-box;
	background: rgba(255, 255, 255, .9);
	font-size: var(--fs-14);
	font-weight: bold;
	line-height: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.sec--service .text__outer {
	padding-top: 27rem;
	width: 444rem;
}
.sec--service .text__outer .title {
	font-size: var(--fs-18);
	font-weight: bold;
	line-height: 2;
	letter-spacing: 0.1em;
	margin-bottom: 32rem;
}
.sec--service .text__outer .text {
	font-size: var(--fs-16);
	font-family: var(--yugothic);
	line-height: 2;
	letter-spacing: 0.08em;
}
.img--news__outer {
	position: absolute;
	right: 147rem;
	bottom: -376rem;
}
.img--news {
	width: 282rem;
	height: auto;
}
.img--news--1 {
	position: absolute;
	top: -243rem;
	right: 195rem;
}
.img--news--2 {
	display: block;
	margin-left: auto;
}
/*----------------------------
	news
-----------------------------*/
.sec--news {
	padding: 423rem 176rem 128rem;
	box-sizing: border-box;
	position: relative;
	overflow-x: hidden;
}
.sec--news::before {
	content: "";
	width: 470rem;
	height: 113rem;
	background-color: var(--accent-color);
	position: absolute;
	transform: rotate(156deg);
	top: 434rem;
	right: -44rem;
	z-index: -1;
}
.sec--news::after {
	content: "";
	width: 1605rem;
	height: 113rem;
	background-color: var(--main-color);
	position: absolute;
	transform: rotate(23deg);
	top: 434rem;
	left: -111rem;
	z-index: -1;
}
.sec--news .sec__title__outer {
	margin-left: 0;
	padding-top: 128rem;
	margin-top: -128rem;
}
.tbl {
	color: var(--main-color);
	font-family: var(--yugothic);
	font-size: var(--fs-16);
	letter-spacing: 0.04em;
	width: 100%;
	line-height: 1.5;
}
.tbl__title {
	background-color: var(--base-color);
	font-weight: normal;
	padding: 33rem 42rem;
	border-bottom: 1px solid var(--white);
	width: 160rem;
	box-sizing: border-box;
}
tr:first-child .tbl__title {
	border-top: 1px solid var(--base-color);
}
tr:last-child .tbl__title {
	border-top: 1px solid var(--base-color);
}
.tbl__data {
	border: dashed 1px #c8c8c8;
	background-color: var(--white);
	border-left: none;
	width: calc(100% - 160rem);
	padding: 32rem 16rem;
	box-sizing: border-box;
}
.tbl__data p + p {
	margin-top: 8rem;
}
.tbl__data a {
	color: var(--accent-color);
	text-decoration: underline;
	transition: .3s;
}
.tbl__data a:hover {
	opacity: .6;
}
/*----------------------------
	join us
-----------------------------*/
.sec--recruit {
	padding: 128rem 0;
	overflow: hidden;
}
.images__outer {
	position: relative;
	margin-bottom: 160rem;
}
.images__outer .title__outer {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	right: 79rem;
	margin: auto;
	background-color: var(--white);
	padding: 8rem 16rem;
	max-height: max-content;
	letter-spacing: 0.14em;
}
@-moz-document url-prefix(){
    .images__outer .title__outer {
        height: 200rem;
    }
}
.images__outer .title {
	font-family: var(--tektur);
	font-size: var(--fs-64);
	font-weight: normal;
	margin-bottom: 24rem;
}
.images__outer .title--sub {
	font-size: var(--fs-32);
	font-weight: bold;
}
.images {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 13rem;
	max-width: max-content;
}
.images img {
	width: 230rem;
	height: auto;
}
.images img.parallax {
  transform: translateY(32px);
}
.sec--recruit .images__outer + .banner__outer {
	margin-bottom: 154rem;
}
.sec--recruit .text__outer {
	width: 536rem;
	font-weight: bold;
	line-height: 2;
	letter-spacing: 0.14em;
}
.content--recruit {
	display: flex;
	align-items: center;
	gap: 75rem;
}
.content--recruit--profile,.content--recruit--work {
	width: 987rem;
	position: relative;
	box-sizing: border-box;
}
.content--recruit--profile {
	padding: 77rem 170rem 76rem 198rem;
	margin-left: auto;
	margin-bottom: 95rem;
}
.content--recruit--work {
	padding: 77rem 284rem 76rem 202rem;
	margin-bottom: 147rem;
}
.content--recruit--profile::before,.content--recruit--work::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: var(--main-color);
	position: absolute;
	top: 6rem;
	left: 6rem;
	transform: rotate(-10deg);
	z-index: -1;
	border-radius: 249rem;
}
.content--recruit--profile::after,.content--recruit--work::after {
	content: "";
	width: 100%;
	height: 100%;
	border: solid 1px var(--main-color);
	background-color: var(--white);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transform: rotate(-10deg);
	z-index: -1;
	border-radius: 249rem;
}
.content--recruit--job {
	max-width: max-content;
	margin: 0 auto 116rem;
}
.content--recruit .title {
	font-size: var(--fs-20);
	font-weight: normal;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.content--recruit .title span {
	padding: 0 24rem;
}
.img--arrow {
	width: 117rem;
	height: auto;
	display: block;
	margin-left: auto;
}
/*----------------------------
	contact
-----------------------------*/
.sec--contact {
	background-color: var(--base-color);
	padding: 128rem 176rem;
}
.sec--contact .sec__title__outer {
	margin-left: 0;
}
.type__outer {
	display: flex;
	flex-wrap: wrap;
	width: 276rem;
	gap: 16rem;
}
.type__outer .label {
	font-size: var(--fs-14);
	background-color: var(--white);
	border-radius: 8rem;
	border: 1px solid #d9d9d9;
	width: 130rem;
	height: 107rem;
	min-height: 96px;
	box-sizing: border-box;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: flex-start;
	line-height: 1.5;
	position: relative;
	padding-top: 53rem;
}
.type__outer .label::before {
	content: "";
	width: 20rem;
	height: 20rem;
	border: solid 3px #49454f;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	top: 20rem;
	margin: auto;
}
.type__outer .label:has(.radio:checked)::before {
	border-color: #65558f;
}
.type__outer .label:has(.radio:checked)::after {
	content: "";
	width: 14rem;
	height: 14rem;
	border-radius: 50%;
	background-color: #65558f;
	position: absolute;
	top: 26rem;
	left: 0;
	right: 0;
	margin: auto;
}
.form {
	display: flex;
	justify-content: space-between;
}
.form .text {
	font-size: var(--fs-14);
	width: 100%;
}
.form .bg--white {
	width: 539rem;
	padding: 56rem 24rem;
	box-sizing: border-box;
	border-radius: 8rem;
}
/*----------------------------
	about us
-----------------------------*/
.sec--about {
	padding: 128rem 0;
	position: relative;
	overflow: hidden;
}
.sec--about::before,.sec--about::after {
	content: "";
	width: 516rem;
	height: 111rem;
	background-color: var(--accent-color);
	position: absolute;
	z-index: -1;
}
.sec--about::before {
	transform: rotate(-150deg);
	top: 446rem;
	right: -63rem;
}
.sec--about::after {
	transform: rotate(-30deg);
	bottom: 857rem;
	left: -83rem;
}
.sec--about .sec__title__outer {
	margin-bottom: 56rem;
}
.sec--about .sec__text {
	margin-left: 176rem;
	margin-right: 176rem;
	font-weight: bold;
	letter-spacing: 0.14em;
	line-height: 2;
}
.sec--about .flex {
	flex-direction: row-reverse;
	padding: 83rem 177rem 0 80rem;
	gap: 94rem;
}
.content--corporate {
	width: 447rem;
}
.content--corporate .title__outer {
	margin-bottom: 57rem;
}
.content--corporate .title {
	font-family: var(--tektur);
	font-weight: normal;
	font-size: var(--fs-40);
	letter-spacing: 0.04em;
	margin-bottom: 8rem;
}
.content--corporate .title--sub {
	font-size: var(--fs-14);
	letter-spacing: 0.1em;
	font-weight: bold;
}
.def {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8rem 32rem;
	font-family: var(--yugothic);
	font-size: var(--fs-14);
	line-height: 1.5;
	margin-bottom: 57rem;
}
.def__title {
	width: 88rem;
	white-space: nowrap;
	font-weight: bold;
}
.def__data {
	width: calc(100% - 120rem);
}
.link--policy {
	color: var(--main-color);
	font-size: var(--fs-14);
	font-family: var(--biz);
	padding: 8rem 64rem;
	box-sizing: border-box;
	border: solid 1px var(--main-color);
	display: inline-block;
	transition: .4s;
}
.link--policy:hover {
	background-color: var(--main-color);
	color: var(--white);
	padding-right: 80rem;
}
.img--about__outer {
	position: relative;
}
.img--about {
	width: 282rem;
	height: auto;
}
.img--about--1 {
	display: block;
	margin-left: auto;
}
.img--about--2 {
	position: absolute;
	top: 243rem;
	right: 201rem;
}
.sec--about .sec__text__outer {
	padding-top: 128rem;
	margin-left: 176rem;
	margin-right: 176rem;
	box-sizing: border-box;
	width: 834rem;
}
.sec--about .sec__text__outer .sec__text {
	margin: 0 0 32rem;
}
.sec--about .fs--large {
	font-size: var(--fs-32);
	line-height: 2;
	letter-spacing: 0.1em;
	font-weight: bold;
	margin-bottom: 32rem;
}
.sec--about .tektur {
	font-family: var(--tektur);
	font-weight: 500;
}
.sec--about .name {
	text-align: right;
	line-height: 2;
	letter-spacing: 0.14em;
	font-weight: bold;
}
.sec--profile {
	padding-top: 115rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 928rem;
	margin: auto;
}
.img--profile {
	width: 256rem;
	height: auto;
}
.profile {
	width: 447rem;
}
.sec--profile .title__outer {
	margin-bottom: 57rem;
}
.sec--profile .title {
	font-family: var(--tektur);
	font-size: var(--fs-40);
	font-weight: normal;
	letter-spacing: 0.04em;
	margin-bottom: 8rem;
}
.sec--profile .title--sub {
	font-size: var(--fs-14);
	font-weight: bold;
	letter-spacing: 0.1em;
}
/*----------------------------
	media query
-----------------------------*/
@media screen and (max-width: 960px){
	/* service */
	.content__text {
		flex-wrap: wrap;
		justify-content: center;
	}
	.point__outer {
		width: 100%;
	}
	.sec--service .text__outer {
		width: 100%;
		padding-left: 22rem;
		padding-right: 19rem;
		box-sizing: border-box;
	}
	.content--recruit {
		padding-left: 160rem;
		padding-right: 160rem;
	}
}
@media screen and (max-width: 768px){
	.mv {
		padding-top: 203rem;
		padding-bottom: 304rem;
	}
	.mv__title__outer {
		margin-left: 20rem;
	}
	.mv__title {
		font-size: var(--fs-40);
	}
	.mv__title--sub {
		font-size: var(--fs-20);
	}
	.mv__title--sub p {
		margin-top: 14rem;
	}
	.mv__catch__outer {
		padding-top: 88rem;
		padding-bottom: 150rem;
	}
	.mv__canvas {
		width: 323rem;
		top: 8rem;
		left: 0;
		right: 0;
		margin: auto;
	}
	.mv__catch {
		font-size: var(--fs-24);
		margin-left: 20rem;
		/* width: 221rem; */
	}
	.mv__text__outer {
		width: 290rem;
		padding-left: 20rem;
	}
	.mv__text {
		margin-bottom: 77rem;
	}
	.mv__text::before {
		width: 263rem;
		height: 60rem;
		bottom: -17rem;
	}
	.mv__text.fadein.is--animated::before {
		left: -20rem;
	}
	.link--circle:hover .arrow {
		width: 62rem;
		right: -42rem;
	}
	.img--mv-w, .img--mv-m {
		width: 200rem;
	}
	.img--mv-w {
		position: static;
		margin: 66rem 24rem 0 auto;
		display: block;
	}
	.img--mv-m {
		left: 20rem;
		bottom: 128rem;
	}
	/* seivice */
	.sec--service {
		padding-top: 80rem;
		padding-bottom: 80rem;
	}
	.sec--service::after {
		width: 60rem;
	}
	.content {
		margin-right: 5rem;
	}
	.content__title {
		margin-left: 20rem;
		font-size: var(--fs-20);
		padding: 10rem 20rem;
		margin-bottom: 14rem;
		line-height: 1.4;
	}
	.content__text {
		gap: 24rem;
	}
	.content .content__text .point__outer {
		background-size: cover;
		padding: 47rem 19rem 38rem;
		box-sizing: border-box;
	}
	.list--point__item {
		width: 105rem;
		height: 108rem;
		font-size: var(--fs-12);
		min-width: auto;
		min-height: auto;
	}
	.sec--service .text__outer {
		padding-top: 0;
	}
	.content + .content {
		margin-top: 120rem;
	}
	.img--news__outer {
		position: relative;
		right: 0;
		left: 0;
		bottom: 0;
		margin: 278rem auto 0;
		width: calc(100% - 20rem);
	}
	.img--news {
		width: 200rem;
	}
	.img--news--1 {
		bottom: 178rem;
        top: auto;
		left: 0;
		right: auto;
	}
	/* news */
	.sec--news {
		padding: 128rem 0 0;
	}
	.sec--news::before {
		width: 192rem;
		height: 60rem;
		top: 102rem;
		right: -90rem;
	}
	.sec--news::after {
		width: 654rem;
		height: 60rem;
		top: 102rem;
	}
	.sec--news .sec__title__outer {
		margin-left: 16rem;
	}
	.tbl__title {
		display: block;
		width: 100%;
		padding: 15rem;
		border-bottom: none;
	}
	.tbl__data {
		display: block;
		width: 100%;
		padding: 31rem 8rem;
		border-bottom: none;
		border-right: none;
		border-left: none;
	}
	.tbl tr:last-child .tbl__data {
		border-bottom: dashed 1px #c8c8c8;
	}
	.tbl__data a:hover {
		opacity: 1;
	}
	/* recruit */
	.images__outer .title__outer {
		top: 176rem;
		bottom: auto;
		right: 0;
	}
	.images__outer .title {
		font-size: var(--fs-46);
	}
	.images {
		grid-template-columns: repeat(2, 1fr);
	}
	.images img {
		width: 160rem;
	}
	.images img:nth-child(even) {
		transform: translateY(22px);
	}
	.images__outer .title--sub {
		font-size: var(--fs-30);
		line-height: 1.5;
	}
	.sec--recruit .text__outer {
		width: 100%;
	}
	.content--recruit {
		flex-direction: column;
		gap: 75rem;
		width: 500rem;
		padding: 0;
		left: -60rem;
	}
	.content--recruit--profile::before, .content--recruit--work::before,
	.content--recruit--profile::after, .content--recruit--work::after {
		border-radius: 0;
	}
	.content--recruit--profile,.content--recruit--work {
		padding: 50rem 33rem 30rem;
	}
	.content--recruit--work {
		left: -36rem;
	}
	/* contact */
	.sec--contact {
		padding: 72rem 20rem;
	}
	.sec--contact .sec__title__outer {
		margin-bottom: 128rem;
	}
	.form {
		display: block;
	}
	.type__outer {
		width: 100%;
		justify-content: center;
		margin-bottom: 72rem;
	}
	.form .bg--white {
		width: 100%;
	}
	/* about */
	.sec--about::before {
		width: 245rem;
		height: 60rem;
		top: 1060rem;
	}
	.sec--about::after {
		width: 378rem;
		height: 60rem;
		bottom: 1402rem;
	}
	.sec--about .sec__text {
		width: 290rem;
		margin: 0 20rem;
	}
	.sec--about .flex {
		flex-direction: column-reverse;
		padding: 41rem 20rem 0;
		gap: 0;
	}
	.content--corporate {
		width: 100%;
	}
	.link--policy {
		width: 100%;
		text-align: center;
	}
	.link--policy:hover {
		padding-right: 64rem;
		background-color: var(--white);
		color: var(--main-color);
	}
	.img--about__outer {
		margin-bottom: 262rem;
	}
	.img--about {
		width: 200rem;
	}
	.img--about--2 {
		top: 134rem;
		right: auto;
		left: 0;
	}
	.sec--about .sec__text__outer {
		padding-left: 20rem;
		padding-right: 20rem;
		margin: 0;
		width: 100%;
	}
	.sec--about .sec__text__outer .sec__text {
		margin-bottom: 48rem;
	}
	.sec--about .fs--large {
		margin-bottom: 48rem;
		line-height: 1.7;
	}
	.sec--profile {
		padding: 80rem 20rem 0;
		width: 100%;
		flex-direction: column;
		box-sizing: border-box;
		align-items: center;
		gap: 80rem;
	}
	.profile {
		width: 100%;
	}
	.sec--profile .def {
		margin-bottom: 0;
	}
}