@charset "utf-8";

/* アニメーション定義 */
@media (width > 767px) {/* PC */
	@keyframes kvphline_line01 {
		0% { background-position-y: 0px; }
		100% { background-position-y: 100000px; }
	}
	@keyframes kvphline_line02 {
		0% { background-position-y: 0px; }
		100% { background-position-y: -100000px; }
	}
}
@media (width <= 767px) {/* SP */
	@keyframes kvphline_line01 {
		0% { background-position-x: 0px; }
		100% { background-position-x: 100000px; }
	}
	@keyframes kvphline_line02 {
		0% { background-position-x: 0px; }
		100% { background-position-x: -100000px; }
	}
}
@media (width <= 767px) {/* SP */
	.mod_header{
		.row01{
			transition: background .2s;
			background: var(--cc-black-A);
			body:has(#menuopenstate:checked) & {
				background-color: var(--cc-black-A);
			}
		}
		.menu .open .bar{
			background-color: #fff;
		}
	}
	.state_fewscroll{
		.mod_header{
			.row01{
				background: transparent;
			}
			.menu .open .bar{
				background-color: var(--cc-blue-2);
			}
		}
	}
}


.topPage{
	background: var(--cc-Grey);
	.kvBlock {
		position: relative;
		overflow: hidden;
		@media (width > 767px) {/* PC */
			height: calc(100vh - 8rem);
		}
		@media (width <= 767px) {/* SP */
			height: calc(100lvh - 6rem);
		}
		.kvlogoline ,
		.kvtxtline ,
		.kvphline {
			position: absolute;
			background-repeat: repeat;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			@media (width > 767px) {/* PC */
				animation-duration: 2000s;
				background-size: 100% auto;
				height: 100%;
				top: 0;
			}
			@media (width <= 767px) {/* SP */
				animation-duration: 3000s;
				background-size: auto 100%;
				width: 100%;
				left: 0;
			}
		}
		.kvlogoline {
			&:is(.is-animated) {
				clip-path: inset(0% 0% 0% 0%);
				transition: clip-path 0.7s ease .0s;
			}
		}
		.kvtxtline ,
		.kvphline {
			&:is(.is-animated) {
				transform: translateY(0px);
				transition: transform 0.7s ease .0s;
			}
		}
		.kvlogoline {
			animation-name: kvphline_line01;
			@media (width > 767px) {/* PC */
				background-position: left bottom;
				left: 41.0%;
				width: 16.75%;
			}
			@media (width <= 767px) {/* SP */
				background-position: right bottom;
				top: 44.0%;
				height: 12.3%;
			}
			&:is(:not(.is-animated)){
				@media (width > 767px) {/* PC */
					clip-path: inset(0% 0% 100% 0%);
				}
				@media (width <= 767px) {/* SP */
					clip-path: inset(0% 100% 0% 0%);
				}
			}
		}
		.kvtxtline {
			@media (width > 767px) {/* PC */
				width: 1.9%;
			}
			@media (width <= 767px) {/* SP */
				height: 2%;
			}
			&.line01 {
				animation-name: kvphline_line01;
				@media (width > 767px) {/* PC */
					background-position: left bottom;
					left: 2.5%;
				}
				@media (width <= 767px) {/* SP */
					background-position: right bottom;
					top: 20.4%;
				}
				&:is(:not(.is-animated)){
					@media (width > 767px) {/* PC */
						transform: translateY(-100%);
					}
					@media (width <= 767px) {/* SP */
						transform: translateX(-100%);
					}
				}
			}
			&.line02 {
				animation-name: kvphline_line02;
				@media (width > 767px) {/* PC */
					background-position: left top;
					left: 75.5%;
				}
				@media (width <= 767px) {/* SP */
					background-position: left top;
					top: 76.1%;
				}
				&:is(:not(.is-animated)){
					@media (width > 767px) {/* PC */
						transform: translateY(100%);
					}
					@media (width <= 767px) {/* SP */
						transform: translateX(100%);
					}
				}
			}
		}
		.kvphline {
			&.line01 {
				animation-name: kvphline_line01;
				@media (width > 767px) {/* PC */
					background-position: left bottom;
					width: 18.6%;
					left: 4.4%;
				}
				@media (width <= 767px) {/* SP */
					background-position: right bottom;
					height: 20%;
					top: 0;
				}
				&:is(:not(.is-animated)){
					@media (width > 767px) {/* PC */
						transform: translateY(-100%);
					}
					@media (width <= 767px) {/* SP */
						transform: translateX(-100%);
					}
				}
			}
			&.line02 {
				animation-name: kvphline_line02;
				@media (width > 767px) {/* PC */
					background-position: left top;
					width: 18.6%;
					left: 25.8%;
				}
				@media (width <= 767px) {/* SP */
					background-position: left top;
					height: 19.2%;
					top: 22.4%;
				}
				&:is(:not(.is-animated)){
					@media (width > 767px) {/* PC */
						transform: translateY(100%);
					}
					@media (width <= 767px) {/* SP */
						transform: translateX(100%);
					}
				}
			}
			&.line03 {
				animation-name: kvphline_line01;
				@media (width > 767px) {/* PC */
					background-position: left top;
					width: 16.8%;
					left: 58.125%;
				}
				@media (width <= 767px) {/* SP */
					background-position: left top;
					height: 21.3%;
					top: 54.3%;
				}
				&:is(:not(.is-animated)){
					@media (width > 767px) {/* PC */
						transform: translateY(100%);
					}
					@media (width <= 767px) {/* SP */
						transform: translateX(100%);
					}
				}
			}
			&.line04 {
				animation-name: kvphline_line02;
				@media (width > 767px) {/* PC */
					background-position: left bottom;
					width: 17.5%;
					left: 78.125%;
				}
				@media (width <= 767px) {/* SP */
					background-position: right bottom;
					height: 21.3%;
					top: 78.8%;
				}
				&:is(:not(.is-animated)){
					@media (width > 767px) {/* PC */
						transform: translateY(-100%);
					}
					@media (width <= 767px) {/* SP */
						transform: translateX(-100%);
					}
				}
			}
		}
	}
	.c-ttlArw{
		@media (width > 767px) {/* PC */
			padding-left: 4rem;
    		padding-bottom: 5rem;
		}
	}
	.introBlock{
		background: url(../images/top/intro-bg.jpg) center center /cover no-repeat;
		margin-bottom: 9.4rem;
		@media (width <= 767px) {/* SP */
			margin-bottom:4rem
		}
		.introBlock__in{
			display: flex;

			margin: 0 auto;
			@media (width > 767px) {/* PC */
				width: 108rem;
				padding: 8rem 0;
				gap: 14.7rem;
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				align-items: center;
				margin-left:.4rem;
				padding: 4.5rem 0 4rem;
				gap: 3rem;
			}
		}
		.ttl{
			position: relative;
			width: 35.8rem;
			@media (width > 767px) {/* PC */
				margin: 7.5rem 0 0 3rem;
			}
			@media (width <= 767px) {/* SP */
				width: 17rem;
				gap: 3rem;
			}
			img:nth-child(2){
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.txt{
			width: 52.7rem;
			@media (width <= 767px) {/* SP */
				width: 27.1rem;
			}
		}
	}

	.secMessage{

		background: linear-gradient(80deg, #FFF46D -16.94%, #009FE6 63.91%);
		color: #fff;
		@media (width > 767px) {/* PC */
			height: 43rem;
			margin-bottom: 12rem;
		}
		@media (width <= 767px) {/* SP */
			height:16rem;
			margin-bottom: 4rem;
		}
		.secMessage__in{
			position: relative;
			margin: 0 auto;
			height: 100%;
			@media (width > 767px) {/* PC */
				width: 104rem;
			}
		}
		.secTtl{
			position: absolute;
			top: 5rem;
			left: 0rem;
			@media (width <= 767px) {/* SP */
				top: -1.8rem;
        		left: 3rem;
				padding-bottom: 0;
			}
			img{
				width: 3.9rem;
				@media (width <= 767px) {/* SP */
					width: 1.47rem;
				}
			}
		}
		.img{
			position: absolute;
			right: 12.5rem;
			bottom: 0;
			width: 43rem;
			@media (width <= 767px) {/* SP */
				width: 16.1rem;
				right: 4rem;
			}
		}
		.txtBlock{
			position: absolute;
			line-height: 1;
			left: 27.4rem;
			bottom: 7.5rem;
			@media (width <= 767px) {/* SP */
				left: 9rem;
				bottom: 2rem;
			}
			.ttl{
				width: 27rem;
				@media (width <= 767px) {/* SP */
					width: 10.2rem;
				}
			}
			.txt{
				font-size: 1.8rem;
				margin-top: 5.5rem;
				@media (width <= 767px) {/* SP */
					margin-top: 1.5rem;
					font-size: 1.2rem;
				}
			}
			.name{
				margin-top: 1.3rem;
				font-size: 2.6rem;
				@media (width <= 767px) {/* SP */
					margin-top: .5rem;
					font-size: 1.6rem;
				}
			}
		}
		.secBtn{
			position: absolute;
			right: 7.7rem;
			top: 50%;
			transform: translateY(-50%);
			width: 7.2rem;
			@media (width <= 767px) {/* SP */
				width: 2.7rem;
				right: 3rem;
			}
			img{
				width: 100%;
			}
		}
	}

	.jobSec{
		background:var(--Blue-3);
		color: #fff;
		padding: 10.5rem 0 17.3rem;
		@media (width <= 767px) {/* SP */
			padding: 4.5rem 0 6rem;
		}
		.secTtl{
			margin-bottom: 8.5rem;
			padding-left: 1rem;
			@media (width <= 767px) {/* SP */
				padding-left: 3.5rem;
				margin-bottom: 4rem;
			}
			img{
				width: 71rem;
				@media (width <= 767px) {/* SP */
					width: 22.8rem;
				}
			}
			
		}
		.jobSec__in{
			margin: 0 auto;
			@media (width > 767px) {/* PC */
				width: 104rem;
			}
		}

		.bnr{
			position: relative;
			display: block;
			.bnr__arw{
				position: absolute;
				left: 5.2rem;
				top: 50%;
				transform: translateY(-50%);
				width: 7.2rem;
				@media (width <= 767px) {/* SP */
					width: 2.7rem;
					left: 2rem;
				}
				img{
					width: 100%;
				}
			}
			@media(hover) {
				& {
					transition: 0.2s;
				}
				&:hover {
					opacity:.6;
				}
			}
		}
		.topBlock{
			position: relative;
			padding-left: 12.3rem;
			margin-bottom: 7.5rem;
			@media (width <= 767px) {/* SP */
				padding-left: 8rem;
				margin-bottom:4.7rem;
			}
			.blockTtl{
				position: absolute;
				left: 0;
				top: 0;
				@media (width > 767px) {/* PC */
					height: 36.5rem;
				}
				@media (width <= 767px) {/* SP */
					height: 12rem;
					left: 3rem;
				}
				img{
					width: 4.4rem;
					@media (width <= 767px) {/* SP */
						width: 1.7rem;
					}
				}
			}
			.bnr{
				@media (width > 767px) {/* PC */
					width: 79.3rem;
				}
			}
		}
		.peopleBlock{
			position: relative;
			padding-left: 12.3rem;
			@media (width <= 767px) {/* SP */
				padding-left: 8rem;
			}
			.blockTtl{
				position: absolute;
				left: 0;
				top: 0;
				@media (width > 767px) {/* PC */
					top: 3.5rem;
					height: 36.5rem;
				}
				@media (width <= 767px) {/* SP */
					height: 12rem;
					left: 3rem;
				}
				img{
					width: 4.45rem;
					@media (width <= 767px) {/* SP */
						width: 1.7rem;
					}
				}
			}
			.peopleBlock__list{
				display: flex;
				flex-direction: column;
				gap: 5.5rem;
				@media (width > 767px) {/* PC */
					margin-left: 6rem;
				}
				@media (width <= 767px) {/* SP */
					width: 25.8rem;
					gap: 3rem;
				}
				.item{
					@media (width > 767px) {/* PC */
						width: 69.3rem;
					}
					.bnr__arw{
						left: 3.5rem;
						@media (width <= 767px) {/* SP */
							left: 1.5rem;
						}
					}
					.item__txtarea{
						display: flex;
						flex-direction: column;
						font-size: 2.6rem;
						font-weight: 700;
						line-height: 1; /* 54.6px */
						margin-top: 2.8rem;
						gap: 1.7rem;
						@media (width <= 767px) {/* SP */
							margin-top: 0.8rem;
							gap: 0.7rem;
						}
						p{
							display: flex;
							align-items: center;
							gap: 2rem;
							@media (width <= 767px) {/* SP */
								flex-direction: column;
								align-items: flex-start;
								gap: .5rem;
							}
						}
						.txt1{
							font-size: 1.8rem;
							@media (width <= 767px) {/* SP */
								font-size: 1.2rem;
							}
						}
						.txt2{
							display: flex;
							align-items: center;
							font-size: 2.6rem;
							@media (width <= 767px) {/* SP */
								font-size: 1.5rem;
							}
							.-sml{
								margin-left: 1rem;
								font-size: 1.8rem;
								@media (width <= 767px) {/* SP */
									font-size: 1.2rem;
								}
							}
						}
						.and{
							@media (width <= 767px) {/* SP */
								font-size: 1.5rem;
								margin-top: 0.2rem;
							}
						}
					}
				}
			}
		}
	}
}

[data-title01] img:nth-child(2):is(:not(.is-animated)){
	transform: scale(1.2) rotate(-10deg);
	opacity: 0;
}
[data-title01] img:nth-child(2):is(.is-animated){
	opacity: 1;
	transition: transform 1s ease .0s, opacity 1s ease .0s;
}