@charset "utf-8";
:root{
	--wide: 1275px;
	/*Primary*/
	--Red1:#fa000f;
	--Red2:#cc0000;
	--White:#ffffff;
	--Gray1:#f4f4f4;
	--Gray2:#d9d9d9;
	--Gray3:#b3b3b3;
	--Gray4:#737373;
	--Gray5:#4d4d4d;
	--Gray6:#222222;
	--Black:#0c0c0c;
	/*Secondary*/
	--Orange1: #fdc796;
	--Orange2: #fa6900;
	--Orange3: #c85400;
	--Yellow1: #fdec96;
	--Yellow2: #fad200;
	--Yellow3: #967e00;
	--Pink1: #fd96d4;
	--Pink2: #fa00a5;
	--Pink3: #96005a;
	--Purple1: #d096fd;
	--Purple2: #9b00fa;
	--Purple3: #540096;
	--Blue1: #96c5fd;
	--Blue2: #0064fa;
	--Blue3: #004596;
	--Teal1: #96f0fd;
	--Teal2: #00dcfa;
	--Teal3: #008496;
	--Green1: #96fdcc;
	--Green2: #00fa82;
	--Green3: #00964e;
	--Red1_20_Tint: #ffcbce;
	--Red1_40_Tint: #ff979d;
	--Red1_60_Tint: #ff636c;
	--Red1_20_Dark: #bb000b;
	--Red1_40_Dark: #7d0008;
	--Red_Grad: linear-gradient(145deg, #FA000F, #CC0000);
	--WhiteOp: #ffffffe6;
	--BlackOp: rgba(0, 0, 0, 0.08);
	/*Layout*/
	--Col2: calc((100% / 2) - 1em);
	--Col3: calc((100% / 3) - 1em);
	--Col4: calc((100% / 4) - 1em);
}
html {
	scroll-behavior: smooth;
}
#Contents,.GridSet,.Grid4 {
	width: 100%;
}
#Contents * {
	box-sizing: border-box;
	word-break: auto-phrase;
}
.Section>.Inner {
	padding: 6em 0;
	width: var(--wide) ;
	margin: auto ;
	word-break: break-word ;
}
.PageTitleStyle3 {
	/*position: sticky;*/
	position: relative;
	top: 0;
	height: 84vh;
	/*height: 100vh;*/
	margin: 0;
	background: var(--White) url(/-/media/company/human-it/image/bg_fv.svg) no-repeat center / cover;
	opacity: 1;
	/*transition: opacity 0.1s linear; /* JS制御のため短めに */
	transition: opacity 0.9s linear;
	pointer-events: auto;
	&.is-hidden {
		pointer-events: none; /* 透過後はクリック無効 */
	}
	.Inner {
		max-width: var(--wide);
		height: stretch;
		margin: auto;
		padding: 0 0 3em;
		display: flex;
		align-items: center;
		gap: 1em;
		background: url(/-/media/company/human-it/image/dot_pattern.svg) no-repeat right center / auto 70%;
		.Column {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 1em;
			.Lead {
				font-size: 1.1em;
			}
		}
		.Column:nth-of-type(1) {
			opacity: 0;
			animation: fade .5s 1.5s ease-in both;
		}
	}
}
@keyframes fade {
	0% {
		opacity: 0;
		/*transform: scale(0.8);*/
	}
	100% {
		opacity: 1;
		/*transform: scale(1);*/
	}
}
@supports (animation-timeline: view(block)) {
	.MesBox,.Mes01,.Mes02 h2 {
		animation-timeline: view(block);
		animation-range: entry 0% cover 50%;
	}
}
.Arrow {
	/*position: fixed;*/
	position: absolute;
	width: 100%;
	top: 80vh;
	display: flex;
	justify-content: center;
	z-index: 2;
	opacity: 1;
	transform: scale(1);
	/*transition: opacity 0.1s linear;*/ /* JS制御のため短めに */
	transition: opacity 1.5s ease-in-out; 
	span {
		width: max-content;
		color: var(--Red1);
		line-height: normal;
		padding: 0 .5em;
		border-radius: 10px;
		border: 1px solid var(--Red1);
		background: var(--White);
		font-size: .8em;
		margin: 0 auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
		&::after {
			position: absolute;
			content: "";
			display: block;
			width: 5px;
			height: 98px;
			background: url(/-/media/company/human-it/image/scroll_arrow.svg) no-repeat center;
		}
	}
}
.Arrow.subElement span {
	background: var(--White);
}
.PageTitleSub {
	position: relative;
	top: 0;
	width: 100%;
	height: 100vh;
	opacity: 1;
	/*transition: opacity 0.1s linear;*/
	transition: opacity 1.8s ease-in-out;
	background: url(/-/media/company//human-it/image/fv_photo.jpg) no-repeat center top / auto 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	.Inner {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: var(--wide);
		margin: auto;
		height: 100vh;
		/**/
		max-height: max-content;
		.MesBox {
			position: relative;
			opacity: 0;
			/* アニメーション */
			animation-name: fade;
			animation-timing-function: ease-out;
			animation-fill-mode: both;
			animation-duration: 1s;
			/*transition: opacity 0.5s ease-in-out;*/
			color: var(--White);
			font-weight: bold;
			font-size: 2vw;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			width: 60vw;
			height: 33vh;
			padding: 2em;
			align-items: center;
			justify-content: center;
			background: url(/-/media/company/human-it/image/bg_mes.png) no-repeat center / cover;
			overflow: hidden;
			margin: auto;
			&#Box02 {
				position: absolute;
			}
			.Mes01,.Mes02 {
				/*opacity: 0;*/
				/*transition: opacity 0.1s linear;*/
				transition: opacity .5s ease-in-out;
				span {
					letter-spacing: -4px;
				}
			}
			.Mes02 {
				text-align: center;
			}
		}
	}
	.Arrow {
	z-index: 3;
	span {
		color: var(--Black);
		border: 1px solid var(--Black);
		background: transparent;
		z-index: 3;
		&::after {
			background: url(/-/media/company/human-it/image/scroll_arrow_bk.svg) no-repeat center;
		}
	}
}
}
.Section {
	overflow-x: hidden;
	min-height: 50vh;
	position: relative;
	z-index: 1;
	&.Mes02 {
		.Inner {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 48vh;
			h2 {
				opacity: 0;
				font-weight: normal;
				/* アニメーション */
				animation-name: fade;
				animation-timing-function: ease-out;
				animation-fill-mode: both;
				animation-duration: 2s;
			}
		}
	}
	&.GradStart {
		/*
		height: 2000vh;
		background: linear-gradient(158deg, transparent 13%,transparent 21%,var(--WhiteOp), var(--White),var(--Yellow1) 30%,var(--WhiteOp) 80%, transparent);
		*/
		height: 4000vh;
		background: linear-gradient(158deg, transparent 13%, transparent 21%, #fdec9673 50%, var(--WhiteOp) 80%, transparent);
	}
	&.GradMid {
		height: 500vh;
		/*background: linear-gradient(158deg, var(--WhiteOp),transparent);*/
	}
	&.GradEnd {
		position: sticky;
		top: 0;
		height: 100vh;
		background: linear-gradient(158deg, var(--WhiteOp),transparent);
	}
	&#Sec01 {
		background: url(/-/media/company/human-it/image/bg_concept.jpg) no-repeat center / cover;
	}
	&#Sec02 {
		background:url(/-/media/company/human-it/image/bg_visual_top.svg) no-repeat top center / 100% auto, url(/-/media/company/human-it/image/bg_visual_dots.svg) no-repeat center / 100% auto/*, url(/-/media/company/human-it/image/bg_visual_bottom.svg) no-repeat bottom center / 100% auto*/,var(--White);
		.MesBox {
			color: var(--White);
			border-radius: 10px;
			text-align: center;
			padding: 2em;
			width: 100%;
			margin: 2em auto;
			background: url(/-/media/company/human-it/image/bg_mesbox.png) no-repeat center / cover;
			h2 {
				font-size: 1.6em;
				margin: auto auto 1em;
				background: none;
				position: relative;
				&::after {
					content: "";
					display: block;
					width: 105px;
					height: 1px;
					background: var(--White);
					margin: 1em auto;
				}
			}
			p {
				margin: auto;
				max-width: 900px;
				text-align: left;
			}
		}
		.ActionArea {
			position: relative;
			width: 100%;
			height: 100%;
			min-height: 1200px;
			max-height: 100vh;
			display: block;
			background: url(/-/media/company/human-it/image/main_visual_obj.png) no-repeat center / contain;
			.Point {
				position: absolute;
				width: 45px;
				height: 45px;
				display: block;
				transition: .1s ease-in-out;
				transform: scale(1);
				animation: fadeLoop 3s ease-in-out infinite;
				&:hover {
					cursor: pointer;
					transform: scale(1.1);
					animation: fadeLoop 2.5s ease-in-out infinite;
				}
				&:focus-visible {
					outline: 2px solid currentColor;
					outline-offset: 4px;
				}
				&.A {
					top: 23%;
					left: 53%;
				}
				&.B {
					top: 26%;
					left: 74%;
				}
				&.C {
					top: 29%;
					left: 26%;
				}
				&.D {
					top: 38%;
					left: 64%;
				}
				&.E {
					top: 49%;
					left: 32%;
				}
				&.F {
					top: 56%;
					left: 18%;
				}
				&.G {
					top: 56%;
					left: 72%;
				}
				&.H {
					top: 61%;
					left: 54%;
				}
				&.I {
					top: 68%;
					left: 35%;
				}
				&.J {
					top: 83%;
					left: 60%;
				}
				&.O {
					top: 17%;
					left: 77%;
				}
			}
			.PointPopup {
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				/* 非表示時はフェード完了後にvisibilityを切り替える */
				transition: opacity 0.4s ease, visibility 0s linear 0.4s;
				position: absolute;
				width: 300px;
				height: auto;
				z-index: 100;
				&#point-image-a {
					top: 13%;
					left: 60%;
				}
				&#point-image-b {
					top: 18%;
					left: 81%;
				}
				&#point-image-c {
					top: 22%;
					left: 0%;
				}
				&#point-image-d {
					top: 31%;
					left: 71%;
				}
				&#point-image-e {
					top: 42%;
					left: 3%;
				}
				&#point-image-f {
					top: 48%;
					left: -10%;
				}
				&#point-image-g {
					top: 48%;
					left: 79%;
				}
				&#point-image-h {
					top: 50%;
					left: 68%;
				}
				&#point-image-i {
					top: 61%;
					left: 8%;
				}
				&#point-image-j {
					top: 73%;
					left: 72%;
				}
				&#point-image-o {
					top: 10%;
					left: 50%;
				}
			}
			.PointPopup.is-open {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
				/* 表示時はvisibilityを即座に切り替える */
				transition-delay: 0s;
			}
			.PointPopup img {
				display: block;
				width: 100%;
				height: auto;
			}
		}
	}
	&#Sec03 {
		background: var(--White) url(/-/media/company/human-it/image/bg_visual_bottom.svg) no-repeat right bottom / cover;
		h2 {
			font-size: 2.2em ;
			span {
				font-size: .6em;
				display: flex;
				margin: auto;
				width: max-content;
				gap: .5em;
				background: transparent;
				&.Sub {
					color: var(--Red1);
					&::before,&::after {
						content: none;
					}
				}
				&::before,&::after {
					content: "";
					background: url(/-/media/company/human-it/image/icon_line.svg) no-repeat center;
					display: block;
					min-width: 30px;
					width: max-content;
					height: 1px;
					margin: auto;
				}
			}
		}
		.Plate {
			width: max-content;
			max-width: 928px;
			margin: 3em auto;
			display: flex;
			flex-wrap: wrap;
			gap: 1.5em;
			justify-content: space-between;
			li {
				flex: 1 auto;
				cursor: pointer;
				overflow: hidden;
				width: calc((100% / 2) - 1.5em);
				border-radius: 0 15px 15px 15px;
				transition: .1s ease;
				opacity: 1;
				dl{
					border-radius: 0 15px 15px 15px;
					overflow: hidden;
					.Head {
						display: flex;
						gap: 1em;
						align-items: center;
						margin: 0;
						padding: 1em;
						border-radius: 0 15px 0 0;
						background: var(--Gray4) url(/-/media/company/human-it/image/bg_red.svg) no-repeat left bottom / auto 100%;
						color: var(--White);
						.Number {
							text-align: center;
							font-weight: normal;
							font-size: .8em;
							font-style: italic;
							border-right: 1px solid;
							padding-right: 1em;
							span {
								display: block;
								font-weight: bold;
								font-size: 1.6em;
							}
						}
						h3 {
							color: var(--White);
							margin: 0;
							font-size: 1.1em;
						}
						}
					dd {
						position: relative;
						img {
							width: 100%;
						}
						.Button {
							position: absolute;
							cursor: pointer;
							bottom: 1em;
							right: 1em;
							background: var(--Gray1) url(/-/media/company/human-it/image/icon_botton_arrow.svg) no-repeat center;
							display: block;
							width: 38px;
							height: 32px;
							border-radius: 3px;
							z-index: 1;
							transition: .1s ease;
							opacity: 1;
							&:hover {
								opacity: .8;
							}
						}
					}
					&:hover {
						opacity: .8;
					}
				}
			}
		}
	}
	&#Sec04 {
		min-height: inherit;
		background: var(--Gray1);
		.Inner {
			display: flex;
			align-items: center;
			gap: 2em;
			.Column {
				flex: 1;
				h2 {
					font-size: 1.4em;
					text-align: left;
					margin: 0 0 1em;
					span {
						padding: 0;
						font-size: .6em;
						font-weight: normal;
					}
				}
				.ButtonLink:link,.ButtonLink:visited {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 1em;
					text-decoration: none;
					margin: 1em 0;
					padding:.25em .5em .25em 4em;
					width: 253px;
					background: var(--Red1);
					border-radius: 5px;
					color: var(--White);
					font-weight: bold;
					font-size: 1em;
					text-align: center;
					transition: .1s ease-in;
					&:hover {
						background: var(--Red2);
					}
					&::after {
						content: "";
						display: block;
						width: 17px;
						height: 17px;
						margin: 0 0 0 auto;
						background: url(/-/media/company/human-it/image/icon_new_link.svg) no-repeat center / 17px;
					}
				}
			}
		}
	}
	&#Sec05 {
		min-height: inherit;
		background: var(--White);
	}
}
@keyframes fadeLoop {
  0% {
    opacity: 1;
		transform: scale(1);
  }
  50% {
    opacity: 1;
		transform: scale(1.3);
  }
  100% {
    opacity: .8;
		transform: scale(1);
  }
}
.InnerLinks {
	position: sticky;
	top: 0;
	background: var(--Gray3);border: 1px solid var(--White);
	min-height: inherit;
	padding: 0;
	z-index: 2;
	.Inner {
		max-width: var(--wide);
		margin: 0 auto;
		padding: 0;
		ul {
			margin: 0 auto;
			padding: 0;
			gap: 0;
			display: flex;
			align-items: center;
			li {
				width: calc(100% / 5);
				height: stretch;
				border: 1px solid var(--White);
				a:link, a:visited {
					width: 100%;
					height: stretch;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 1em;
					text-decoration: none;
					font-weight: bold;
					font-size: .9em;
					color: var(--White);
					background: transparent;
					transition: .3s ease-in-out;
					&:hover, &:active, &:focus {
						background: var(--Red1);
					}
					&.is-active {
							background: var(--Red1);
					}
				}
			}
		}
	}
}
.PlateList {
	display: flex;
	gap: 1.5em;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 4em auto;
	li {
		position: relative;
		width: calc((100% / 4) - 1.5em);
		height: stretch;
		border: 1px solid var(--Gray4);
		background: var(--White);
		transition: .1s ease-in;
		opacity: 1;
		&:hover {
			opacity: .8;
		}
		img {
			border-bottom: 1px solid var(--Gray4);
			width: stretch;
			max-height: 157px;
			object-fit: cover;
		}
		.Wrapper {
			padding: 1em;
			p {
				font-size: .8em;
			}
			a:link, a:visited {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 1em;
				width: 100%;
				text-decoration: none;
				color: var(--Gray6);
				font-weight: bold;
				&::after {
					content: "";
					width: 16px;
					height: 16px;
					min-width: 16px;
					display: block;
					background: url(/-/media/company/human-it/image/icon_new_link_bk.svg) no-repeat center / 16px;
				}
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
			}
		}
	}
}
iframe {
	margin: 4em auto;
	border-radius: 20px;
	overflow: hidden;
	display: block;
}
.toTop {
	position: fixed;
	bottom: 2em;
	right: 2em;
	z-index: 5;
}
h1 {
	font-weight: normal;
	font-size: 3em;
}
h2 {
	font-weight: bold;
	font-size: 2em;
	text-align: center;
	padding: 0;
	margin: 0;
	background: none;
}
.Sub {
	color: var(--Red1);
	font-weight: bold;
	font-size: 1em;
	text-align: center;
}
.ModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    &.is-open {
        opacity: 1;
        visibility: visible;
    }
}

.ModalInner {
	margin: 0 -53px 0 0;/*CloseButton分*/
	display: flex;
	justify-content: center;
	position: relative;
	background: transparent;
	width: min(90vw, 1275px);
	max-height: 85vh;
	overflow-y: auto;
	transform: translateY(20px);
	transition: transform 0.3s ease;
	.ModalOverlay.is-open & {
			transform: translateY(0);
	}
	.ModalContent {
		display: flex;
		background: var(--White);
		max-width: 1076px;
		width: 80%;
		.Img {
			width: 40%;
			overflow: hidden;
			height: stretch;
			img {
				object-fit: cover;
				width: 100%;
				height: stretch;
			}
		}
		dl {
			width: 60%;
			height: stretch;
			.Head {
				display: flex;
				gap: 1em;
				align-items: center;
				margin: 0;
				padding: 1em;
				background: var(--Gray4) url(/-/media/company/human-it/image/bg_red.svg) no-repeat left bottom / auto 100%;
				color: var(--White);
				.Number {
					text-align: center;
					font-weight: normal;
					font-size: .8em;
					font-style: italic;
					border-right: 1px solid;
					padding-right: 1em;
					span {
						display: block;
						font-weight: bold;
						font-size: 1.6em;
					}
				}
				h3 {
					color: var(--White);
					margin: 0;
					font-size: 1.1em;
				}
			}
			dd {
				padding: 2em;
				display: flex;
				align-items: center;
			}
		}
	}
}

.ModalClose {
	width: 53px;
	height: 53px;
	background: url(/-/media/company/human-it/image/icon_close.svg) no-repeat center;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	outline: none;
	transition: opacity 0.2s ease;
	opacity: 1;
	&:hover {
		opacity: .8;
	}
}
@media screen and (min-width: 995px) and (max-width: 1304px) {
	.OptionWideRWD .GridSet {
		margin: 0;
	}
	.OptionWideRWD #Contents,
	.OptionWideRWD .Grid4 {
		padding: 0;
	}
	.OptionWideRWD .PageTitleStyle3 .Inner,
	.OptionWideRWD .Section>.Inner {
		padding: 1em;
		width: auto;
	}
	.OptionWideRWD .Section.InnerLinks .Inner {
		padding: 0;
	}
	.OptionWideRWD .SP #FloatingContacts form {
		width: auto;
	}
	.OptionWideRWD #FloatingContacts .Inner {
		width: auto;
		max-width: 965px;
	}
	.OptionWideRWD .Section {
		&#Sec02 {
			& .ActionArea {
				& .PointPopup {
					&#point-image-b {
						top: 32%;
						left: 70%;
					}
					&#point-image-f {
						top: 28%;
						left: 0%;
					}
					&#point-image-g {
						top: 30%;
						left: 70%;
					}
				}
			}
		}
	}
}
@media screen and (max-width: 994px) {
	.JS #Contents {
		padding: 0;
	}
	.JS .PageTitleStyle3 .Inner {
		flex-direction: column;
		padding: 1em;
	}
	.JS h1 {
		font-size: 4vw;
		line-height: normal;
	}
	.JS #Contents .PageTitleStyle3 .Column img {
		max-width: 400px;
	}
	.JS .Section>.Inner {
		width: auto;
		padding: 4em 1em;
	}
	.JS .Section.InnerLinks>.Inner {
		padding: 0;
		li {
			display: flex;
			line-height: 1;
			height: stretch;
			align-items: center;
			a {
				height: stretch;
			}
		}
	}
	.JS iframe {
		width: 100%;
	}
	.JS .PlateList {
		gap: 1em;
		li {
			width: calc((100% / 2) - .5em);
			height: stretch;
			img {
				width: 100%;
				height: auto;
				max-height: inherit;
			}
			a {
				line-height: normal;
			}
		}
	}
	.JS .Section {
		&#Sec02 {
			& .ActionArea {
				min-height: 900px;
				& .PointPopup {
					&#point-image-j {
						top: 60%;
						left: 20%;
					}
					&#point-image-o {
						top: 10%;
						left: 40%;
					}
				}
			}
		}
		&#Sec03 {
			.Plate {
				width: 100%;
			}
		}
	}
	.JS .ModalInner {
		.ModalContent {
			max-width: max-content;
			flex-direction: column-reverse;
			dl {
				width: 100%;
			}
			.Img {
				width: 100%;
			}
		}
	}
}
@media screen and (max-width: 767px) {
	.JS br.PC {
		display: none;
	}
	.JS br.RWD {
		display: block;
	}
	.JS .PageTitleStyle3 {
		height: 96vh;
		.Arrow {
			top: 90vh;
		}
	}
	.JS .PageTitleStyle3 h1 {
		font-size: 6vw;
	}
	.JS .Section.InnerLinks > .Inner {
		ul {
			flex-wrap: wrap;
			& li {
				width: calc(100% / 3);
				a {
					font-size: 2.5vw;
					padding: .6em 1em;
					min-height: 3em;
				}
			}
		}
	}
	.JS .Section {
		&#Sec03 {
			.Inner {
				flex-direction: column;
			}
		}
	}
	.JS .PageTitleSub {
		& .Inner {
			.MesBox {
				width: 90vw;
				height: 20vh;
				font-size: 4vw;
			}
		}
	}
.JS .Section {
		&#Sec02 {
			& .ActionArea {
				min-height: 70vh;
			}
		}
	}
}
@media screen and (max-width: 579px) {
	.JS .PageTitleStyle3 {
		background: var(--White) url(/-/media/company/human-it/image/bg_fv.svg) no-repeat center / cover;
	}
	.JS .PlateList {
		li {
			width: 100%;
		}
	}
	.JS .Section {
		&#Sec03 {
			& .Plate {
				li {
					width: 100%;
				}
			}
		}
		&#Sec02 {
				& .ActionArea {
					min-height: 56vh;
					& .PointPopup {
						&#point-image-a {
							top: 38%;
							left: 40%;
						}
						&#point-image-b {
							top: 38%;
							left: 36%;
						}
						&#point-image-d {
							top: 45%;
							left: 38%;
						}
						&#point-image-g {
							top: 66%;
							left: 35%;
						}
						&#point-image-h {
							top: 0%;
							left: 42%;
						}
						&#point-image-f {
							top: 48%;
							left: 29%;
						}
					}
				}
		}
		&#Sec04 {
			.Inner {
				flex-direction: column;
			}
		}
	}
}