@charset "utf-8";

#top main{
	background-color: var(--c-lightgray);
}

.h2-category-link{
	display: flex;
	justify-content: flex-start;
	.cattitle-text{
		justify-content: flex-start;
		padding: 0;
		.ja{
			font-size: clamp(1.5rem, 2.2vw, 2rem);
			font-weight: normal;
		}
		[lang="en"]{
			font-size: clamp(0.8rem, 1.5vw, 1.2rem);
		}
	}
}

.cat-text{
	font-size: clamp(1rem, 1.8vw, 1.5rem);
	line-height: 180%;
}

/* -------------------------
#top_mv
------------------------- */
#top_mv{
	position: relative;
	background-image: url(/careers/newgrad/img/top/mv_shine.png), url(/careers/newgrad/img/top/mv_bg.png);
	padding: 0 0 50px;
	background-repeat: no-repeat;
	background-position: top center;
}

.top_mv-text{
	color: var(--c-navy);
	text-align: center;
	font-feature-settings: "palt";
	font-family: "BIZ UDPMincho", serif;
	display: grid;
	justify-content: center;
	gap: 50px;
	height: calc(80vh - 75px);
}

.top_mv-chatch1{
	font-size: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .15em;
	margin: 0;
	.-ltxt{
		font-size: 130px;
	}
}

.top_mv-chatch2{
	font-size: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.top_mv-text2{
	color: var(--c-navy);
	text-align: center;
	font-family: "BIZ UDPMincho", serif;
	font-size: 27px;
	margin: 150px 0 0;
	font-feature-settings: "palt";
	p{
		margin-bottom: 65px;
	}
	.mirai{
		font-weight: bold;
		font-size: 120%;
	}
}

.top_mv-logo{
	text-align: center;
	img{
		width: min(270px, 45vw);
	}
}

.top_mv-msglink{
	margin: 50px 0;
	font-size: clamp(1.5rem, 2vw, 1.8rem);
}

@container style(--is-tablet: true) {
	#top_mv{
		padding-top: 65px;
		background-size: auto 100%;
	}
	.top_mv-chatch1{
		font-size: clamp(2rem, 8vw, 100px);
		.-ltxt{
			font-size: clamp(2.1rem, 11vw, 130px);
		}
	}
	.top_mv-chatch2{
		font-size: clamp(1.5rem, 2.5vw, 32px);
	}
	.top_mv-text2{
		font-size: clamp(1.2rem, 2.2vw, 27px);
		margin: 100px 0 0;
	}
}

@container style(--is-mobile: true) {
	#top_mv{
		padding-top: 30px;
		background-image: url(/careers/newgrad/img/top/mv_bg.png);
	}
	.top_mv-text{
		height: auto;
		gap: 35px;
	}
	.top_mv-chatch2{
		margin-top: 0px;
	}
	.top_mv-text2{
		margin: 50px 0 0;
		p{
		margin-bottom: 40px;
	}
	}
}

.-animestart{
	.top_mv-chatch1{
		animation: move_up 2s ease;
		animation-fill-mode: both;
		animation-delay: 0.5s;
	}
	.top_mv-chatch2{
		animation: move_up 2s ease;
		animation-fill-mode: both;
		animation-delay: 1.5s;
	}
}

.top_mv-scroll{
	position: absolute;
	top: calc(75vh - 250px);
	left: 20px;
	writing-mode: vertical-rl;
	color: var(--c-darkgray);
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 100;
}

.top_mv-scroll::after{
	content: "";
	display: block;
	width: 1px;
	height: 100px;
	background-color: var(--c-darkgray);
	animation: mv-scroll 2s 5;
	animation-delay: 4.1s;
}

.top_mv-scroll:hover:after{
	background-color: var(--c-blue);
}

@keyframes mv-scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
}

#top_mv-infoarea{
	padding-left: var(--window-padding-wide);
	padding-right: var(--window-padding);
	position: relative;
	z-index: 100;
	width: 100vw;
}

.top_mv-info{
	position: relative;
	min-height: 100px;
	.top_mv-info_inner{
		display: grid;
		grid-template-columns: auto 1fr 20px;
		align-items: flex-start;
		gap: 20px;
		padding: 12px 20px;
		background-color: #fff;
		box-shadow: 4px 4px 9px 0px rgba(0,0,0,0.22);
		position: absolute;
		top: 0;
		left: 0;
		width: min(780px, 58vw);
		z-index: 20;
	}
	h2{
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		margin: 0;
		color: var(--c-blue);
	}
	.btn-info-more{
		grid-column: 3 / 4;
		grid-row: 1 / 2;
		border: 0;
		background-color: #fff;
		padding-top: 0.7rem;
	}
	.info-list{
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		position: relative;
		p{
			margin: 0;
		}
	}
	#info-more{
		display: none;
	}
}

@container style(--is-tablet: true) {
	#top_mv-infoarea{
		padding-left: var(--window-padding);
	}
}

@container style(--is-mobile: true) {
	#top_mv-infoarea{
		display: block;
		bottom: 10px;
		padding-left: var(--window-padding);
	}
	.top_mv-entry{
		display: flex;
		justify-content: flex-end;
		margin-bottom: 15px;
		.btn-entry{
			width: 40vw;
			font-size: 1rem;
		}
	}
	.top_mv-info {
		.top_mv-info_inner{
			gap: 2vw;
			padding: 3vw;
			width: 100%;
		}
		h2{
			font-size: 1rem;
		}
		.info-list{
			font-size: 0.85rem;
		}
	}
}

/* -------------------------
#top_work
------------------------- */

#top_work{
	position: relative;
	margin-top: 120px;
	padding-left: var(--window-padding-wide);
	padding-right: var(--window-padding);
	display: grid;
	gap: 30px;
	grid-template-columns: 30vw 50vw;
	justify-content: space-between;
	--work-anime-img2: 190px;
}

.top_work_img{
	position: relative;
	height: 510px;
	img{
		position: absolute;
		height: auto;
	}
	.top_work_img1{
		top: 0;
		left: 0;
		width: min(28vw, 480px);
	}
	.top_work_img2{
		top: var(--work-anime-img2);
		right: 0;
		width: min(28vw, 480px);
	}
}

@container style(--is-tablet: true) {
	#top_work{
		--work-anime-img2: 10vw;
	}
	.top_work_img{
		height: 35vw;
	}
}

@container style(--is-mobile: true) {
	#top_work{
		display: block;
		padding-left: var(--window-padding);
		--work-anime-img2: 30vw;
	}
	.top_work_txt{
		margin-bottom: 40px; 
		font-size: 0.85rem;
	}
	.top_work_img{
		height: 75vw;
		.top_work_img1{
			width: 56vw;
		}
		.top_work_img2{
			width: 56vw;
		}
	}
}

.-animestart{
	.top_work_txt{
		animation: move_x 2s ease;
		animation-fill-mode: both;
	}
	.top_work_img1{
		animation: work_img1 2s ease;
		animation-fill-mode: both;
		animation-delay: 1s;
	}
	.top_work_img2{
		animation: work_img2 2s ease;
		animation-fill-mode: both;
		animation-delay: 1.5s;
	}
}

@keyframes  work_img1{
	from{
		top: 50px;
		opacity: 0;
	}
	to{
		top: 0;
		opacity: 1;
	}
}

@keyframes  work_img2{
	from{
		top: calc(var(--work-anime-img2) + var(--animation-distance));
		opacity: 0;
	}
	to{
		top: var(--work-anime-img2);
		opacity: 1;
	}
}

/* -------------------------
#top_people
------------------------- */
#top_people{
	position: relative;
	margin-top: 65px;
	padding: 50px 0 30px var(--window-padding-wide);
	background-color: var(--c-gray);
}

@container style(--is-mobile: true) {
	#top_people{
		padding-left: var(--window-padding);
	}
}

.swiper{
	padding-left: 220px;
	margin-top: 40px;
	position: relative;
}

@container style(--is-mobile: true) {
	.swiper{
		padding-left: 43vw;
	}
}

.-animestart{
	.top_people_txt{
		animation: move_x 2s ease;
		animation-fill-mode: both;
	}
	.swiper{
		animation: move_up 2s ease;
		animation-fill-mode: both;
		animation-delay: 1s;
	}
}

.swiper-wrapper{
	align-items: flex-end;
}

.swiper-slide{
	height: auto;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: flex-end;
	opacity: 1;
	.people-img{
		width: 180px;
		transition: transform 1s;

	}
	&.swiper-slide-active .people-img{
		transform: scale(1.3);
		z-index: 2;
	}
	&.swiper-slide-prev{
		opacity: 0;
	}
}

@container style(--is-mobile: true) {
	.swiper-slide{
		.people-img{
			width: 40vw;
		}
		&.swiper-slide-active .people-img{
			transform: scale(1);
		}
	}
}

.people-caption{
	display: none;
	background-color: rgba(255, 255, 255, 0.8);
	width: 180px;
	height: 240px;
	padding: 12px;
	position: absolute;
	bottom: 0;
	left: -220px;
	.-depart{
		margin: 0;
		padding: 0;
		font-size: 0.8rem;
		display: flex;
		gap: 5px;
		justify-content: flex-start;
		align-items: center;
		font-weight: bold;
		line-height: 0;
		&::before{
			content: "";
			display: block;
			width: 3px;
			height: 0.8rem;
			background-color: var(--c-blue);
		}
	}
	.-ctitle{
		font-weight: bold;
		margin-top: 10px;
		font-size: 0.8rem;
	}
	.-name{
		font-size: 0.7rem;
		border-top: 1px solid var(--c-gray);
		margin-top: 10px;
		padding-top: 10px;
	}
}

@container style(--is-mobile: true) {
	.people-caption{
		width: 40vw;
		left: -43vw;
		height: calc(40vw * 1.333333);
	}
}

.swiper-tools{
	display: flex;
	margin-top: 40px;
	justify-content: space-between;
	padding-right: var(--window-padding);
}

.swiper-pagination{
	position: relative;
	text-align: inherit;
}

.swiper-pagination-lock{
	display: block;
}

.swiper-pagination-fraction{
	width: auto;
	font-family: "Source Sans 3";
	font-variant-numeric: diagonal-fractions;
	font-size: 2rem;
	letter-spacing: 3px;
}

.btn_slide_next, .btn_slide_prev{
	width: 68px;
    height: 34px;
    background-repeat: no-repeat;
    background-size: contain;
	cursor: pointer;
}

.swiper_btn{
	display: flex;
	gap: 15px;
}

.btn_slide_next{
	background-image: url(/careers/newgrad/img/common/icon_link_large.svg);
	&:hover{
		background-image: url(/careers/newgrad/img/common/icon_link_large_blue.svg);
	}
}

.btn_slide_prev{
	background-image: url(/careers/newgrad/img/common/icon_link_back.svg);
	&:hover{
		background-image: url(/careers/newgrad/img/common/icon_link_back_blue.svg);
	}
}


/* -------------------------
#top_environment
------------------------- */
#top_environment{
	position: relative;
	margin-top: 65px;
	padding-left: var(--window-padding-wide);
}

.top_environment_2col{
	display: grid;
	grid-template-columns: 47vw 38vw;
	justify-content: space-between;
	margin-top: 40px;
}

.top_environment_img{
	position: relative;
	height: 35vw;
	img{
		position: absolute;
		height: auto;
	}
	.top_environment_img1{
		top: 0;
		left: 0;
		width: min(28vw, 480px);
		z-index: 5;
	}
	.top_environment_img2{
		bottom: 0;
		right: 0;
		width: min(28vw, 480px);
		z-index: 4;
	}
}

ul.sublink_white{
	margin: 0;
	padding: 0; 
	display: flex;
	flex-direction: column;
	gap: 12px;
	li{
		display: flex;
	}
	a{
		flex: 1;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--window-padding);
		padding: var(--window-padding);
		background-color: #fff;
		font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	}
	a::after{
		content: "";
		display: block;
		width: 25px;
		height: 25px;
		background-image: url(/careers/newgrad/img/common/icon_arrow_black.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	a:hover{
		background-color: var(--c-blue-hover);
	}
	a:hover:after{
		background-image: url(/careers/newgrad/img/common/icon_arrow_blue.svg);
	}
}

.-animestart{
	.top_environment_txt{
		animation: move_x 2s ease;
		animation-fill-mode: both;
	}
	.top_environment_img1{
		animation: environment_img1 2s ease;
		animation-fill-mode: both;
		animation-delay: 1.3s;
	}
	.top_environment_img2{
		animation: environment_img2 2s ease;
		animation-fill-mode: both;
		animation-delay: 0.8s;
	}
	.top_environment_link{
		animation: move_x 2s ease;
		animation-fill-mode: both;
		animation-delay: 1.8s;
	}
}

@keyframes  environment_img1{
	from{
		top: 50px;
		opacity: 0;
	}
	to{
		top: 0;
		opacity: 1;
	}
}

@keyframes  environment_img2{
	from{
		bottom: -50px;
		opacity: 0;
	}
	to{
		bottom: 0;
		opacity: 1;
	}
}

@container style(--is-mobile: true) {
	#top_environment{
		padding-left: var(--window-padding);
	}
	.top_environment_2col{
		display: block;
	}
	.top_environment_img{
		height: 88vw;
		padding-right: var(--window-padding);
		.top_environment_img1{
			width: 54vw;
		}
		.top_environment_img2{
			width: 54vw;
		}
	}
	.top_environment_link{
		padding-left: var(--window-padding);
		margin-top: 30px;
	}
	ul.sublink_white a{
		padding: 30px var(--window-padding);
		gap: 30px;
		&::after{
			width: 20px;
			height: 20px;
		}
	}
} 

/* -------------------------
#top_company
------------------------- */
#top_company{
	padding-top: 100px;
	position: relative;
}

.top_company_inner{
	padding-left: var(--window-padding-wide);
    display: grid;
    grid-template-columns: 30vw 58vw;
	justify-content: space-between;
    position: relative;
    z-index: 10;
}

.-animestart{
	.top_company_head{
		animation: move_x 2s ease;
		animation-fill-mode: both;
	}
	.top_company_link{
		animation: move_x 2s ease;
		animation-fill-mode: both;
		animation-delay: 1s;
	}
}

.sublink_white.-img{
	a{
		grid-template-columns: auto 1fr auto;
		background-color: rgba(255, 255, 255, 0.8);
		padding: 20px var(--window-padding);
	}
	a:hover{
		background-color: color-mix(in srgb, var(--c-blue-hover) 80%, transparent 20%);
	}
	img{
		width: min(260px, 15vw); 
	}
}

@container style(--is-mobile: true) {
	#top_company{
		padding-top: 65px;
	}
	.top_company_inner{
		display: block;
		padding-left: var(--window-padding);
	}
	.top_company_link{
		padding-left: var(--window-padding);
		margin-top: 30px;
	}
	.sublink_white.-img{
		a{
			padding: var(--window-padding);
		}
		img{
			width: 20vw;
		}
	}
}

/* -------------------------
#top_recruit
------------------------- */
#top_recruit{
	margin-top: 65px;
	padding-left: var(--window-padding-wide);
	padding-right: var(--window-padding);
	position: relative;
	z-index: 10;
}

.top_recruit_inner{
	display: grid;
	grid-template-columns: 40vw 40vw;
	justify-content: space-between;
	margin-top: 40px;
}

.top_recruit_img img{
	width: 100%;
}

.-animestart{
	.top_recruit_txt{
		animation: move_x 2s ease;
		animation-fill-mode: both;
	}
	.top_recruit_img{
		animation: move_up 2s ease;
		animation-fill-mode: both;
		animation-delay: 0.5s;
	}
	.top_recruit_link{
		animation: move_x 2s ease;
		animation-fill-mode: both;
		animation-delay: 1s;
	}
}

.sublink_line{
	margin: 0;
	padding: 0;
	li{
		display: flex;
		border-top: 1px solid var(--c-black);
		&:last-child{
			border-bottom: 1px solid var(--c-black);
		}
	}
	a{
		flex: 1;
		display: grid;
		grid-template-columns: 1fr auto;
		padding: var(--window-padding);
		font-size: clamp(1.1rem, 1.5vw, 1.3rem);
		&::after{
			content: "";
			display: block;
			width: 25px;
			height: 25px;
			background-image: url(/careers/newgrad/img/common/icon_arrow_black.svg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
		}
		&:hover{
			background-color: var(--c-blue-hover);
			&:after{
				background-image: url(/careers/newgrad/img/common/icon_arrow_blue.svg);
			}
		}
	}
}

@container style(--is-mobile: true) {
	#top_recruit{
		padding-left: var(--window-padding);
	}
	.top_recruit_inner{
		display: block;
	}
	.top_recruit_link{
		margin-top: 40px;
	}
	.sublink_line a{
		padding: 30px var(--window-padding);
		&::after{
			width: 20px;
			height: 20px;
		}
	}
}