@charset "utf-8";







/** FV   
-------------------------------------------------------------------- */
section#hero {
	height: calc(810 * var(--px));
	padding-block: 0;
	margin-bottom: var(--m10);
}
section#hero .wrap {
	padding-top: var(--m8);
}
section#hero .tagline {
	width: fit-content;
	padding-block: 0.5lh;
	padding-inline: calc(48 * var(--px)) 0;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	font-size: 48px;
	letter-spacing: 0.12em;
	font-weight: 700;
}
section#hero .tagline strong {
	text-indent: 0.12em;
	display: inline-block;
	line-height: 1.25;
	
	padding-block: 0.05lh 0;
	padding-inline: 0.1ic;
	background: white;
}
section#hero .tagline strong:nth-of-type(1) {
	color: var(--emerald);
}
section#hero .tagline strong:nth-of-type(2) {
	color: var(--emerald-blue);
}
section#hero .tagline strong:nth-of-type(3) {
	color: var(--blue);
}
section#hero .tagline + p {
	margin-top: var(--m3);
	margin-left: calc(48 * var(--px));
	font-size: 20px;
}

section#hero nav.service {
	margin-top: calc(150 * var(--px));
	display: flex;
	justify-content: space-between;
	gap: var(--m6);
}
section#hero nav.service a {
	flex: 1 0 auto;
	display: block;
	width: 555px;
	max-width: calc((100% - var(--m6)) / 2);
	padding-block: var(--m3) var(--m8);
	padding-inline: var(--m4);
	background: var(--bg);
	box-shadow: 12px 12px 0 0 rgb(from var(--black) r g b / 0.1);
	color: white;
	position: relative;
}
section#hero a.nav-consulting {
	--bg: var(--emerald);
}
section#hero a.nav-staffing {
	--bg: var(--blue);
}
section#hero nav.service .label b {
	font-size: 30px;
}
section#hero nav.service .icon {
	width: calc(38 * var(--px));
	fill: currentColor;
	margin-right: 0.7em;
}
section#hero nav.service .label + p {
	padding-block: var(--m) var(--m2);
	font-size: 21px;
	position: relative;
}
section#hero nav.service .label + p::before {
	display: block;
	width: calc(100% + var(--m4));
	height: 1px;
	background: currentColor;
	position: absolute;
	left: 0;
	bottom: 0;
}
section#hero nav.service svg.arrow {
	width: calc(40 * var(--px));
	fill: currentColor;
	position: absolute;
	right: var(--m3);
	bottom: var(--m4);
	translate: 0 50%; 
}


section#hero .background {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (any-hover: hover) {
	section#hero nav.service a:hover {
		filter: brightness(120%);
	}
}

@media screen and (max-width: 767px) {
	section#hero {
		height: auto;
		padding-block: 0;
		margin-bottom: var(--m4);
	}
	section#hero .wrap {
		padding-top: var(--m5);
	}
	section#hero .tagline {
		padding-inline: 0;
		font-size: calc(36 * var(--px));
		letter-spacing: 0.03em;
		line-height: 1.8;
		--feather-width: calc(20 * var(--px));
		--feather-height: calc(36 * var(--px));
	}
	section#hero .tagline + p {
		margin-top: var(--m4);
		margin-inline: 0;
		font-size: calc(19 * var(--px));
	}
	section#hero nav.service {
		margin-top: var(--m4);
		display: block;
	}
	section#hero nav.service a {
		width: 100%;
		max-width: unset;
		padding-block: var(--m2);
		padding-inline: var(--m2);
	}
	section#hero nav.service a + a {
		margin-top: var(--m2);
	}
	section#hero nav.service .label {
		text-align: left;
		padding-block: 0 var(--m);
		border-bottom: 1px solid currentColor;
		margin-bottom: var(--m);
		flex-wrap: wrap;
	}
	section#hero nav.service .label b {
		font-size: calc(24 * var(--px));
		margin-right: 1ic;
	}
	section#hero nav.service .label b::after {
		display: none
	}
	section#hero nav.service .label span {
		font-size: calc(13 * var(--px));
		letter-spacing: 0;
		flex: 0 0 100%;
		padding-left: calc(28 * var(--px) + 0.7em);
	}
	section#hero nav.service .icon {
		width: calc(28 * var(--px));
	}
	section#hero nav.service .label + p {
		width: 70%;
		padding-block: 0;
		font-size: 14px;
	}
	section#hero nav.service .label + p::before,
	section#hero nav.service .label + p::after {
		display: none;
	}
	section#hero nav.service svg.arrow {
		width: calc(30 * var(--px));
		right: var(--m2);
		top: 70%;
		translate: 0 -50%;
	}
	section#hero .background {
		height: auto;
	}
}





/** お知らせ   
-------------------------------------------------------------------- */
section#topics {
	margin-top: calc(270 * var(--px));
	padding-block: 0;
}
section#topics .container {
	min-height: 350px;
	display: flex;
}
section#topics .heading {
	flex: 0 0 300px;
	padding-block: var(--m2);
	padding-left: var(--m4);
	background: linear-gradient(156deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1) 20%, transparent 20%, transparent), var(--black);
	color: white;
}
section#topics .heading .label {
	padding-bottom: var(--m2);
	border-bottom: 1px solid currentColor;
	text-align: left;
	--feather-width: calc(12 * var(--px));
	--feather-height: calc(27 * var(--px));
}
section#topics .heading .label b {
	font-size: 30px;
}
section#topics .nav-news {
	margin-top: var(--m6);
	display: block;
	width: fit-content;
	padding-block: 0.2lh;
	padding-inline: 0.75ic;
	border: 1px solid currentColor;
}
section#topics .nav-news .arrow {
	width: 1ic;
	fill: currentColor;
	vertical-align: text-top;
	margin-left: 0.5ic;
}
@media (any-hover: hover) {
	section#topics .nav-news:hover {
		background: white;
		color: var(--black);
	}
}


section#topics .board {
	flex: 1 0 auto;
	padding-block: var(--m4);
	padding-inline: var(--m4);
	background: white;
}
section#topics .board .block {
	display: flex;
	align-items: flex-start;
}
section#topics .board .block + .block {
	margin-top: var(--m2);
}
section#topics .board .block > * {
	min-width: 0;
}
section#topics .board .date {
	font-family: "Noto Sans JP";
	flex: 0 0 auto;
	width: fit-content;
	padding-inline: 0.5ic;
	border: 1px solid currentColor;
	font-size: var(--small-size);
	font-weight: 400;
}
section#topics .board .title {
	flex: 0 1 auto;
	width: calc(360 * var(--px));
	padding-right: var(--m2);
	border-right: 1px solid var(--gray);
	margin-inline: var(--m2);
	font-size: 18px;
	font-weight: 700;
}
section#topics .board .excerpt {
	flex: 1;
	width: 100px;
}


@media (any-hover: hover) {
	section#topics .board .block:hover .title {
		color: var(--emerald);
	}
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#topics {
		margin-top: var(--m8);
	}
	section#topics .container {
		display: block;
	}
	section#topics .nav-news {
		margin-top: var(--m4);
	}
	section#topics .board {
		padding-block: var(--m2);
		padding-inline: var(--m2);
	}
	section#topics .board .block {
		display: block;
	}
	section#topics .board .block + .block {
		margin-top: var(--m3);
	}
	section#topics .board .title {
		margin-block: 0.5lh;
		width: auto;
		padding-left: 0;
		margin-inline: 0;
		border-right: 0;
		padding-bottom: 0.5lh;
		border-bottom: 1px solid var(--gray);
		font-size: calc(18 * var(--px));
	}
	section#topics .board p {
		font-size: calc(14 * var(--px));
	}
}






/** プロフィール   
-------------------------------------------------------------------- */
section#profile {
	color: white;
}
section#profile .label {
	width: 100%;
	padding-bottom: var(--m2);
	border-bottom: 1px solid currentColor;
	margin-bottom: var(--m2);
}
section#profile .container {
	display: flex;
	gap: var(--m6);
}
section#profile .portrait {
	flex: 0 0 auto;
	width: calc(510 * var(--px));
	filter: drop-shadow(-10px -10px 30px rgb(255 255 255 / 0.3));
	position: relative;
}
section#profile .portrait .image {
	width: calc(257 * var(--px));
	rotate: -3.543deg;
	clip-path: polygon(0 0, 100% 0, 100% 82.5%, 0 100%, 0 100%);
	margin-inline: auto;
}
section#profile .portrait::before {
	display: block;
	width: calc(360 * var(--px));
	height: 1px;
	background: white;
	rotate: -20deg;
	position: absolute;
	left: 55%;
	top: calc(393 * var(--px));
	translate: -50% 0;
	z-index: 1;
}
section#profile .portrait .name {
	font-size: 27px;
	position: absolute;
	left: 60%;
	top: calc(400 * var(--px));
}
section#profile .portrait .name .small {
	display: block;
	font-size: 50%;
}
section#profile .text {
	flex: 1 0 50%;
	padding-block: var(--m2);
}
section#profile .text h3 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 0.75lh;
}
section#profile .text p + h3 {
	margin-top: var(--m3);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#profile .label {
		display: block;
		text-align: center;
	}
	section#profile .label b {
		display: block;
	}
	section#profile .label b::after {
		display: none;
	}
	section#profile .container {
		display: block;
	}
	section#profile .portrait {
		width: 100%;
	}
	section#profile .portrait::before {
		width: 70%;
		top: calc(274 * var(--px));
	}
	section#profile .portrait .image {
		width: 50%;
	}
	section#profile .portrait .name {
		top: calc(280 * var(--px));
	}
	section#profile .text {
		padding-block: var(--m6) 0;
		padding-inline: var(--m2);
	}
	section#profile .text h3 {
		font-size: calc(18 * var(--px));
		text-align: center;
		padding-bottom: 0.5lh;
		border-bottom: 1px solid currentColor;
		margin-bottom: 0.5lh;
	}
}






/** 会社概要   
-------------------------------------------------------------------- */
section#company {
	overflow: clip;
}
section#company .wrap {
	max-width: calc(840 * var(--px));
}
section#company table {
	width: 100%;
}
section#company tr:first-child {
	border-top: 1px solid var(--gray);
}
section#company tr {
	border-bottom: 1px solid var(--gray);
}
section#company :is(th, td) {
	padding-block: var(--m4);
	padding-inline: var(--m3);
}
section#company th {
	width: 35%;
	font-weight: 400;
}
section#company svg.symbol {
	width: calc(588 * var(--px));
	fill: white;
	position: absolute;
	left: -2%;
	top: -8%;
	z-index: 0;
}
section#company .background {
	left: 0;
	top: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#company svg.symbol {
		display: none;
	}
	section#company :is(th, td) {
		padding-block: var(--m2);
		padding-inline: var(--m);
	}
}