@charset "UTF-8";

:root {

	/*color*/
	--white: #fff;
	
	--black: #000;
	--black_text: #333;
	
	--blue: #40699e;
	--blue_light: #D1D8E2;
	--blue_dark: #104486;

	--red_light: #F06670;
	--red: #E81929;
	
	--gold: #90712B;
	
	--gray_darkest: #333;
	--gray_dark: #898989;
	--gray: #F5F5F5;
	--gray_light: #D8D8D8;
	--gray_lightest: #F4F4F6;
	--gray_line: #ccc;

	--easing: cubic-bezier(.8,0,.4,1);
}


/*reset, over write*/
html {
	overflow-x: hidden;
	overflow-y: auto;
}

.g-mv {
	
	@media screen and (max-width: 1023px) {
		height: 210px;
	}
}

.g-breadcrumb {
	
	@media screen and (max-width: 1023px) {
		display: block;
		
		& .g-breadcrumb_inner {
			opacity: 0;
		}
	}
}

.g-column {
	padding-top: 60px;
}

.g-content {
	padding-bottom: 60px;
}

.c-heading {
	& + * {
		margin-top: 60px;
		
		@media screen and (max-width: 1023px) {
			margin-top: 40px;
		}
	}
	
	& .title_link {
		text-decoration: none;
		position: relative;
		
		& .u-arrow_basic {
			
			&:after {
				vertical-align: -1em;
				margin-left: 30px;
			}
			
			& .c-heading_title {
				display: inline-block;
			}
		}
	}
	
	&.-flex_row {
		display: flex;
		
		@media screen and (max-width: 1023px) {
			flex-direction: column;
		}
		
		& .c-heading_head {
			width: 42.75%;
			
			@media screen and (max-width: 1023px) {
				width: 100%;
			}
		}
		
		& .c-heading_catch {
			width: calc(100% - 42.75%);
			margin: 45px 0 0;
			
			@media screen and (max-width: 1023px) {
				width: 100%;
			}
			
			& .catch {
				font-size: 3rem;
				font-weight: 500;
				line-height: 1.5;
				
				& + * {
					margin-top: 15px;
				}
			}
		}
	}
}

.c-heading_sub_name {
	font-weight: 500;
}

.c-heading_title {
	font-weight: 500;
	margin-left: -.15em;
}

.c-section_text {
	& + .c-section_text {
		margin-top: 2em;
	}
}

/*Utility*/
.u-arrow_basic {
	position: relative;
	
	&:after {
		content: '';
		width: 56px;
		aspect-ratio: 1;
		border: 1px solid var(--red);
		background: var(--red) url(/recruit/_assets/images/common/arrow_01_white.svg) no-repeat center / 17.85% auto;
		border-radius: 100vmax;
		display: inline-block;
		z-index: 10;
		transition: background-color .2s 0s var(--easing);

		@media screen and (max-width: 1023px) {
			width: 40px;
			margin-right: 16px;
			margin-bottom: 16px;
		}
	}
	
	&:hover:after {
		background-color: var(--white);
		background-image: url("/recruit/_assets/images/common/arrow_01_red.svg");
		transition:
			background-color .4s 0s var(--easing)
		;
	}
}

/*category_menu*/
.l-category_menu {
	& + * {
		margin-top: 60px;
	}

	& .items {
		display: flex;
		flex-wrap: wrap;
	}

	& .item {
		width: calc(100% / 4);
		border-bottom: 3px solid var(--gray_light);
		
		@media screen and (max-width: 1023px) {
			width: calc(100% / 2);
		}
	}

	& a {
		text-align: center;
		text-decoration: none;
		line-height: 1;
		letter-spacing: .1em;
		margin: 0 0 -3px;
		padding: 1.25em 0;
		display: block;
		background: linear-gradient(var(--red), var(--red)) no-repeat bottom right / 0 1px;
		transition:
			color .6s 0s var(--easing),
			background-size .6s 0s var(--easing)
		;
		position: relative;
		z-index: 10;
		
		@media screen and (max-width: 1023px) {
			font-size: 1.4rem;
			padding: 1.5em 0;
		}

		&:hover,
		&.is-focus_active {
			color: var(--red);
			background-position: bottom left;
			background-size: 100% 3px;
			transition:
				color .3s .2s var(--easing),
				background-size .3s .2s var(--easing)
			;
		}
	}
}

/*float_recruit_bar*/
.l-float_recruit_bar {
	width: 100%;
	background: rgba(255,255,255,.1);
	position: fixed;
	bottom: 0;
	left: 0;
	backdrop-filter: blur(5px);
	z-index: 100;
	opacity: 0;
	transition: .3s 0s var(--easing);
	translate: 0 20px;
	
	&.active {
		opacity: 1;
		transition: .6s 0s var(--easing);
		translate: 0 0;
	}
	
	& .items {
		padding: 15px 0;
		display: flex;
		justify-content: center;
		
		@media screen and (max-width: 1023px) {
			padding: 13px;
		}
	}
	
	& .item {
		width: calc(100% / 4);
		max-width: 350px;
		padding-inline: 7px;
		
		@media screen and (max-width: 1023px) {
			width: calc(100% / 2);
			padding-inline: 6px;
		}
	}
	
	& a {
		color: var(--red);
		line-height: 1.25;
		text-decoration: none;
		min-height: 70px;
		padding: 0 22px 2px 22px;
		background: var(--white);
		display: flex;
		align-items: center;
		border: 1px solid var(--red);
		position: relative;
		overflow: hidden;
		transition: color .4s;
		
		@media screen and (max-width: 479px) {
			padding-left: 18px;
		}
		
		&:before {
			content: '';
			width: calc(100% + 1px);
			height: 100%;
			background: var(--red);
			position: absolute;
			top: 0;
			right: -1px;
			transition: scale .4s 0s var(--easing);
			scale: 0 1;
			transform-origin: right center;
			z-index: 0;
		}
		
		&:after {
			content: '';
			width: 12px;
			height: 14px;
			margin: 0 15px 0 0;
			display: block;
			background: url("/recruit/_assets/images/common/arrow_01_red.svg") no-repeat center / contain;
			position: absolute;
			top: 50%;
			right: 0;
			translate: 0 -50%;
			transition: background-image .2s .4s var(--easing);
		}
		
		&:hover {
			color: var(--white);
			transition: color .6s;
			
			&:before {
				transition: scale .6s 0s var(--easing);
				scale: 1 1;
				left: -1px;
				right: auto;
				transform-origin: left center;
			}
			
			&:after {
				background-image: url("/recruit/_assets/images/common/arrow_01_white.svg");
				transition: background-image .2s .4s var(--easing);
			}
		}
		
		&.color_red {
			color: var(--white);
			font-weight: 500;
			background: var(--red);
			
			&:before {
				background-color: var(--white);
			}
			
			&:after {
				width: 20px;
				background-image: url("/recruit/_assets/images/common/arrow_02_white.svg");
			}
			
			&:hover {
				color: var(--red);
				
				&:after {
					background-image: url("/recruit/_assets/images/common/arrow_02_red.svg");
				}
			}
		}
	}
	
	& .name {
		white-space: nowrap;
		display: inline-block;
		position: relative;
		z-index: 10;
	}
	
	& br {
		display: none;
		
		@media screen and (max-width: 479px) {
			display: block;
		}
	}
}

/*name card*/
.l-name_card {
	padding: 0 0 0 40px;
	position: relative;

	&:after {
		content: '';
		width: 20px;
		height: 3px;
		margin: .4em 0 0 5px;
		display: block;
		background: var(--red_light);
		position: absolute;
		top: 0;
		left: 0;
	}

	& .name {
		font-size: 1.8rem;
		line-height: 1;
	}

	& .en {
		color: var(--gray_dark);
		font-size: 1.2rem;
		margin: .5em 0 0;
		display: block;
	}

	& .post_title {
		font-size: 1.2rem;
		margin: 1em 0 0;
		display: block;
	}
}

/*person_card*/
.person_card {
	& .items {
		margin-inline: -40px;
		display: flex;
		
		@media screen and (max-width: 1023px) {
			margin-inline: -20px;
		}
		
		@media screen and (max-width: 767px) {
			flex-direction: column;
		}
	}
	
	& .item {
		width: calc(100% / 3);
		padding: 0 40px;
		border-right: 1px solid var(--gray_light);
		
		@media screen and (max-width: 1023px) {
			padding-inline: 20px;
		}
		
		@media screen and (max-width: 767px) {
			width: 100%;
			padding-block: 8px;
			border-right: 0;
		}
		
		&:last-child {
			border-right: 0;
		}
		
		& a {
			text-decoration: none;
			display: flex;
			align-items: center;
			
			&.link_none {
				pointer-events: none;
			}
		}
	}
	
	& .image {
		width: 80px;
	}
	
	& .data {
		padding: 0 0 0 16px;
		flex-grow: 1;
	}
	
	& .name {
		font-weight: 500;
	}
	
	& .year {
		color: var(--gray_dark);
		font-size: 1.2rem;
		font-weight: 400;
		display: inline-block;
		margin: 0 0 0 .75em;
		
		@media screen and (max-width: 1023px) {
			margin-left: 0;
			display: block;
		}
		
		@media screen and (max-width: 767px) {
			margin-left: .75em;
			display: inline-block;
		}
	}
	
	& .department {
		font-size: 1.2rem;
		margin: .35em 0 0;
	}
	
}

/*mv*/
.l-mv {
	& .image {
		text-align: center;
		clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0% 100%);
		
		@media screen and (max-width: 1023px) {
			clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0% 100%);
		}
	}
}

/*subject_box*/
.l-subject_box {
	
	& .subject_title {
		
		& + * {
			margin-top: 55px;
			
			@media screen and (max-width: 1023px) {
				margin-top: 40px;
			}
		}
		
		& .title {
			font-size: 2.6rem;
			font-weight: 500;
			font-style: normal;
			
			@media screen and (max-width: 1023px) {
				font-size: 2.4rem;
			}
		}
	}
	
	& .c-section_block {
		padding: 70px 0 0;
		position: relative;
		
		@media screen and (max-width: 1023px) {
			padding-top: 50px;
		}
		
		&:nth-child(even) {
			
			& .photo {
				margin-bottom: 70px;
				
				@media screen and (max-width: 1023px) {
					margin-bottom: 0;
				}
			}
			
			&:after {
				content: '';
				width: 100vw;
				height: 100%;
				display: block;
				background: var(--gray);
				position: absolute;
				top: 0;
				left: 50%;
				translate: -50% 0;
				z-index: -1;
			}
		}
		
		&.bg_none:after {
			display: none !important;
		}
	}
	
	& .inner {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		
		@media screen and (max-width: 1023px) {
			flex-direction: column;
		}
	}
	
	& .photo {
		width: 40%;
		
		@media screen and (max-width: 1023px) {
			width: calc(100% + (20px * 2));
			margin-inline: -20px;
		}
	}
	
	& .insides {
		width: 48.825%;
		padding: 0 0 70px;
		
		@media screen and (max-width: 1023px) {
			width: 100%;
			padding-bottom: 40px;
		}
		
		& .item {
			color: #242424;
			margin: 40px 0 0;
			display: flex;
			justify-content: space-between;
			
			@media screen and (max-width: 1023px) {
				margin-top: 30px;
			}
			
			&:first-of-type {
				margin-top: 0;
			}
			
			& figure {
				width: 65px;
				
				&:after {
					content: attr(data-name);
					font-size: 1.2rem;
					font-weight: 500;
					text-align: center;
					margin: .5em 0 0;
					display: block;
				}
			}
			
			& div {
				width: calc(100% - 65px - 30px);
				margin: -.25em 0 0;
				
				@media screen and (max-width: 1023px) {
					width: calc(100% - 65px - 10px);
				}
			}
			
			& .c-section_text {
				line-height: 2;
			}
		}
	}
}

.l-subject_box .subject_num {
	color: var(--black);
	font-size: 1.4rem;
	letter-spacing: .05em;
	padding: 0 0 0 1em;
	position: relative;
	
	& + * {
		margin-top: 20px;
	}
	
	&:after {
		content: '';
		width: calc(100% - 6.5em);
		height: 1px;
		display: block;
		background-color: var(--gray_light);
		position: absolute;
		top: 50%;
		right: 0;
	}
	
	& .title {
		display: inline-block;
		
		&:before {
			content: '';
			width: 5px;
			height: 5px;
			margin: .65em 0 0;
			background-color: var(--red_light);
			border-radius: 100vmax;
			position: absolute;
			top: 0;
			left: 0;
		}

		&:after {
			counter-increment: subject_num 1;
			content: counter(subject_num);
			display: inline-block;
			margin: 0 0 0 .25em;
		}
	}
		
	&.-schedule {
		
		&:after {
			width: calc(100% - 9em);
		}
		
		& .title {
			
			&:after {
				display: none;
			}
		}
	}
}








/*inside*/
.p-inside_page {
	counter-reset: subject_num 0;
}

/*interview_page*/
.p-interview_page {
	counter-reset: subject_num 0;
	
	& .c-heading {
		&.-flex_row {
			& .c-heading_head {
				width: 68.4685%;
				
				@media screen and (max-width: 1023px) {
					width: 100%;
				}
			}
			
			& .c-heading_catch {
				width: calc(100% - 68.4685%);
				margin: 55px 0 0;
				
				@media screen and (max-width: 1023px) {
					width: 100%;
					margin-top: 20px;
				}
			}
		}
	}
	
	& .person_card {
		
		@media screen and (max-width: 1023px) {
			margin-top: -40px;
		}
		
		& .items {
			margin-inline: 0;
			gap: 0 15px;
		}
		
		& .item {
			padding-inline: 0;
			border: 0;
		}
		
		& a {
			padding: 15px 0 15px 25px;
			border: 1px solid var(--gray_light);
			
			&.is-focus_active {
				color: var(--black);
				background-color: var(--blue_light);
				border-color: var(--blue_light);
				pointer-events: none;
			}
			
			&:hover {
				color: var(--black);
				opacity: 1;
				background-color: var(--blue_light);
				border-color: var(--blue_light);
				
				& img {
					opacity: 1;
				}
			}
		}
	}
	
	.l-subject_box {
		& .insides {
			margin-top: -.65em;
		}
	}
	
	.schedules {
		
		& .items {
			position: relative;
			
			&:after {
				content: '';
				width: 1px;
				height: calc(100% - (10px * 2));
				margin: 0 0 0 calc(5px + 6px);
				display: block;
				background-image: repeating-linear-gradient(180deg, #898989, #898989 2px, transparent 2px, transparent 4px);
				background-position: right top;
				background-repeat: repeat-y;
				background-size: 1px 100%;
				position: absolute;
				top: 50%;
				left: 0;
				translate: 0 -50%;
			}
		}
		
		& .item {
			font-size: 2.2rem;
			font-weight: 500;
			line-height: 1.5;
			list-style: none;
			margin: 40px 0 0;
			display: flex;
			justify-content: space-between;
			position: relative;
			z-index: 10;
			
			@media screen and (max-width: 1023px) {
				font-size: 1.8rem;
				margin-top: 20px;
			}
			
			&:first-child {
				margin-top: 0;
			}
			
			&:last-child:after {
				content: '';
				width: 22px;
				height: calc(100% - (22px / 2));
				display: block;
				background-color: var(--white);
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: -1;
			}
		}
		
		& time {
			font-size: 2.2rem;
			width: 140px;
			padding: 0 0 0 30px;
			position: relative;
			
			@media screen and (max-width: 1023px) {
				font-size: 1.8rem;
				width: 90px;
			}
			
			&:after {
				content: '';
				width: 12px;
				aspect-ratio: 1;
				margin: .5em 0 0 5px;
				display: block;
				border-radius: 100vmax;
				background: linear-gradient(135deg, #e81929 0%, #f06670 100%);
				position: absolute;
				top: 0;
				left: 0;
				
				@media screen and (max-width: 1023px) {
					margin-top: .35em;
				}
			}
		}
		
		& .item:first-child time:before,
		& .item:last-child time:before {
			content: '';
			width: 12px;
			aspect-ratio: 1;
			margin-top: .55em;
			margin-left: 6px;
			border-radius: 100vmax;
			background-color: var(--white);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}
		
		& .item:first-child time:after,
		& .item:last-child time:after {
			width: 22px;
			margin-top: .275em;
			margin-left: 1px;
		}
		
		& span {
			flex-grow: 1;
			
			@media screen and (max-width: 1023px) {
				width: calc(100% - 90px);
			}
		}
	}
	
	.holiday {
		min-height: 300px;
		margin: 70px 0 0;
		padding: 50px calc(41.45% + 80px) 50px 70px;
		background-color: var(--gray);
		border-radius: 8px;
		position: relative;
		overflow: hidden;
		transform: translateZ(0);
		
		@media screen and (max-width: 1023px) {
			padding: 40px 40px 0 40px;
		}
		
		& .subject_num {
			& + * {
				margin-top: 0;
				
				@media screen and (max-width: 1023px) {
					margin-top: 10px;
				}
			}
		}
		
		& .subject_title {
			& + * {
				margin-top: 25px;
			}
		}
		
		& .image {
			width: 41.45%;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			
			@media screen and (max-width: 1023px) {
				width: calc(100% + (40px * 2));
				margin-top: 40px;
				margin-inline: -40px;
				position: relative;
				top: auto;
				right: auto;
			}
			
			& img {
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
	}
}

.l-interview_menu {
	padding-top: 120px !important;
	
	@media screen and (max-width: 1023px) {
		padding-top: 60px !important;
	}
	
	&:after {
		display: none !important;
	}
	
	& .subject_num {
		& .title {
			&:after {
				display: none;
			}
		}
	}
	
	& .items {
		display: flex;
		gap: 0 75px;
		
		@media screen and (max-width: 1023px) {
			flex-direction: column;
			gap: 30px 0;
		}
	}
	
	& .item {
		width: calc(100% / 3);
		
		@media screen and (max-width: 1023px) {
			width: 100%;
		}
		
		& .data {
			@media screen and (max-width: 1023px) {
				width: calc(100% - 160px);
				padding-left: 20px;
			}
		}
		
		& .title {
			font-size: 2.2rem;
			font-weight: 600;
			margin: 15px 0 0;

			@media screen and (max-width: 1023px) {
				font-size: 1.8rem;
				margin-top: -.25em;
			}
			
			& + * {
				margin-top: 20px;
			}
		}

		& .name {
			font-size: 2rem;
			font-weight: 500;
			
			@media screen and (max-width: 1023px) {
				font-size: 1.6rem;
			}
		}

		& .year {
			color: var(--gray_dark);
			font-size: 1.4rem;
			margin: 0 0 0 1em;
			
			@media screen and (max-width: 1023px) {
				font-size: 1.2rem;
				margin-left: 0;
				display: block;
			}
		}

		& .department {
			margin: .25em 0 0;
			
			@media screen and (max-width: 1023px) {
				font-size: 1.2rem;
			}
		}
		
		& .u-arrow_basic {
			&:after {
				margin: calc(130% - 24px) 24px 0 0;
				position: absolute;
				top: 0;
				right: 0;
				translate: 0 -100%;
				
				@media screen and (max-width: 1023px) {
					margin: calc(220px - 16px) 0 0 calc(160px - 16px);
					right: auto;
					left: 0;
					translate: -100% -100%;
				}
			}
		}
	}
	
	& .image {
		position: relative;
		overflow: hidden;
		transform: translateZ(0);
		
		@media screen and (max-width: 1023px) {
			width: 160px;
			min-height: 220px;
		}
	}
	
	& img {
		object-fit: cover;
		object-position: top center;
		height: 100%;
		transition:
			scale .6s .2s var(--easing)
		;
		
		@media screen and (max-width: 1023px) {
			width: 100%;
			height: 100%;
			position: absolute;
		}
	}
	
	& a {
		text-decoration: none;
		
		@media screen and (max-width: 1023px) {
			display: flex;
		}
		
		&:hover {
			opacity: 1;
			
			& img {
				opacity: 1;
				scale: 1.075;
				transition:
					scale 1.2s 0s var(--easing)
				;
			}
		}
		
		&.is-focus_active {
			pointer-events: none;
			opacity: .75;
			
			& .image {
				border: 1px solid var(--red);
			}
		}
	}
}

/*index*/
.p-index_page {
	
	& .c-heading {
		& + * {
			margin-top: 30px;
		}
	}
	
}

.l-mv_index {
	position: relative;
	
	& .copy {
		width: 77%;
		margin: 0 0 -2.5%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		left: 50%;
		translate: -50% 10%;
		z-index: 100;
		opacity: 0;
		transition: 1s var(--easing);
		
		@media screen and (max-width: 1023px) {
			width: calc(100% - (20px * 2));
			margin-bottom: -5%;
		}
		
		&:after {
			content: '';
			width: 44%;
			height: 2px;
			margin: 0 0 15% 18%;
			background-color: var(--red);
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			transition: 1s 1s var(--easing);
			clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
			
			@media screen and (max-width: 1023px) {
				width: 37%;
				margin: 0 0 16.5% 20%;
			}
		}
		
		& .text {
			color: var(--red);
			font-size: 6.25vw;
			font-weight: 500;
			line-height: 1.25;
			
			@media screen and (max-width: 1023px) {
				font-size: 8vw;
			}
		}
	}
	
	& .images {
		aspect-ratio: 1440 / 697;
		
		@media screen and (max-width: 1023px) {
			aspect-ratio: 25 / 16
		}
	}
	
	& .image {
		height: 100%;
		clip-path: unset;
		position: absolute;
		
		& img {
			height: 100%;
			object-fit: cover;
			clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0% 100%);
			transition:
				opacity .8s var(--easing),
				translate .8s var(--easing),
				filter .8s var(--easing)
			;
			opacity: 0;
			filter: brightness(200%);
			
			@media screen and (max-width: 1023px) {
				clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0% 100%);
			}
		}
	}
	
	& .scene1 img {
		translate: 0 5%;
	}
	
	& .half {
		display: flex;
		
		& > * {
			width: calc(100% / 2);
			
			&:nth-child(odd) {
				
				& img {
					margin-top: 40px;
					clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0% 100%);
					translate: 0 5%;
					
					@media screen and (max-width: 1023px) {
						margin-top: 10px;
						clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0% 100%);
					}
				}
			}
			
			&:nth-child(even) {
				width: calc(100% / 2 + 1px);
				margin-left: -1px;
				
				& img {
					clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0% 100%);
					translate: 0 -5%;
					
					@media screen and (max-width: 1023px) {
						clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0% 100%);
					}
				}
			}
		}
	}
	
	/*animation start*/
	&.active {
		
		& .copy {
			translate: -50% 0;
			opacity: 1;
			
			&:after {
				clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
			}
		}
	}
	
	&.s1s {
		& .scene1 img {
			opacity: 1;
			translate: 0 0;
			filter: brightness(100%);
		}
	}
	
	&.s1e {
		& .scene1 img {
			opacity: 0;
			translate: 0 -5%;
			filter: brightness(150%);
		}
	}
	
	&.s2s {
		& .scene2 > *:nth-child(odd) img,
		& .scene2 > *:nth-child(even) img {
			opacity: 1;
			translate: 0 0;
			filter: brightness(100%);
		}
	}
	
	&.s2e {
		& .scene1 img {
			translate: 0 5%;
		}
		
		& .scene2 > *:nth-child(odd) img {
			opacity: 0;
			translate: 0 -5%;
			filter: brightness(100%);
		}
		
		& .scene2 > *:nth-child(even) img {
			opacity: 0;
			translate: 0 5%;
			filter: brightness(100%);
		}
	}
	
	&.s3s {
		& .scene3 > *:nth-child(odd) img,
		& .scene3 > *:nth-child(even) img {
			opacity: 1;
			translate: 0 0;
			filter: brightness(100%);
		}
	}
	
	&.s3e {
		& .scene3 > *:nth-child(odd) img {
			opacity: 0;
			translate: 0 -5%;
		}
		
		& .scene3 > *:nth-child(even) img {
			opacity: 0;
			translate: 0 5%;
		}
	}
}

.l-inside_block {
	background-color: var(--gray);
	clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0% 100%);
	display: flex;
	overflow: hidden;
	transform: translateZ(0);
	
	@media screen and (max-width: 767px) {
		margin-top: 40px;
		clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0% 100%);
	}
	
	& .u-inner {
		display: flex;
		align-items: center;
	}
	
	& .image {
		width: calc(50.45% - 8.555%);
		margin: 0 0 0 8.555%;
		display: flex;
		justify-content: space-between;
		
		@media screen and (max-width: 767px) {
			width: calc(50% - 10.5%);
			margin-right: 10.5%;
			margin-left: 5.25%;
		}
		
		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 8px;
		}
		
		& .swiper-wrapper {
			transition-timing-function: linear;
		}
		
		& .swiper {
			margin-inline: 0;
			transition: opacity 1s;
			opacity: 0;
			
			&.swiper-initialized {
				opacity: 1;
			}
			
			& .swiper-slide {
				padding: 3px 4px 4px 3px;
			}
		}
		
		& .swiper1 {
			width: calc(55.5%);
			height: calc(200px * 3);
			
			@media screen and (max-width: 767px) {
				display: none;
			}
		}
		
		& .swiper2 {
			width: calc(100% - 55.5%);
			height: calc(290px * 2);
			
			@media screen and (max-width: 767px) {
				width: 100%;
				height: calc(42vw * 2.5);
			}
		}
	}
	
	& .data {
		width: calc(100% - 50.45%);
		padding: 0 0 0 110px;
		
		@media screen and (max-width: 767px) {
			width: 50%;
			padding-left: 0;
		}
		
		@media screen and (max-width: 767px) {
			& .u-arrow_basic:after {
				display: block;
				margin-top: 10px;
				margin-left: 0;
			}
			
			& .c-section_text {
				font-size: 1.5rem;
				line-height: 1.75;
			}
		}
	}
}

.l-interview_block {
	margin: 120px 0 0;
	
	@media screen and (max-width: 1023px) {
		margin-top: 75px;
	}
	
	& .l-interview_menu {
		padding-top: 10px !important;
		
		& .item:nth-child(3n + 2) {
			margin-top: -36px;
			
			@media screen and (max-width: 1023px) {
				margin-top: 0;
			}
		}
	}
}

.l-message_block {
	margin: 120px 0 0;
	padding-block: 120px;
	background-color: var(--gray);
	clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0% 100%);
	display: flex;
	overflow: hidden;
	transform: translateZ(0);
	
	@media screen and (max-width: 1023px) {
		clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0% 100%);
		margin-top: 70px;
		padding-block: 80px;
	}
	
	& .u-arrow_basic:after {

		@media screen and (max-width: 1023px) {
			margin-bottom: .275em;
		}
	}
	
	& .u-inner {
		display: flex;
		align-items: center;
		
		@media screen and (max-width: 1023px) {
			padding-inline: 40px;
			flex-direction: column;
		}
	}
	
	& .data {
		width: 50%;
		padding: 0 0 0 95px;
		
		@media screen and (max-width: 1023px) {
			width: 100%;
			padding-left: 0;
		}
		
		@media screen and (max-width: 767px) {
			& .c-section_text {
				font-size: 1.5rem;
				line-height: 1.75;
			}
		}
	}
	
	& .image {
		width: 50%;
		padding-inline: 15px;
		
		@media screen and (max-width: 1023px) {
			width: 100%;
			padding-inline: 0;
		}
		
		& img {
			max-width: 445px;
			border-radius: 8px;
			
			@media screen and (max-width: 767px) {
				max-width: 100%;
				margin-top: 30px;
			}
		}
	}
}