@charset "utf-8";


/**
 * HOME
 * ---------------------------------------- */
.page-home {
	padding-top: 0;
}

/* :::::: Keyvisual :::::: */
.keyvisual {
	display: grid;
	justify-content: center;
	justify-items: center;
	margin-inline: var(--breakout);
	color: var(--themecolor);
}
.keyvisual > * {
	grid-area: 1 / 1;
}
.keyvisual_title {
	z-index: 1;
	pointer-events: none;
	margin-top: calc(var(--headerHeight) + 24vw / 11.3);
	fill: currentcolor;
	line-height: 0;
}
.keyvisual_title > * {
	width: calc(var(--width) * var(--viewWidth) / 1130);
}
@supports (width: 50cqi) {
	.keyvisual_title > * {
		width: calc(var(--width) * 1cqi / 11.3);
	}
}
.keyvisual_title svg {
	width: 100%;
	height: auto;
}
.keyvisual_title .catchcopy {
	--width: 1080;
}
.keyvisual_title .recruit {
	--width: 252;
	margin-top: calc(32vw / 11.3);
}
@media screen and (max-width: 767.98px) {
	.keyvisual_title .recruit {
		--width: 406;
	}
}

/* inview */
.keyvisual_title .catchcopy,
.keyvisual_title .recruit {
	mask: linear-gradient(white, white) left center / 0 100% no-repeat;
	background: linear-gradient(currentcolor, currentcolor) right center / 100% 100% no-repeat;
}
.keyvisual .keyvisual_title.is-inview .catchcopy,
.keyvisual .keyvisual_title.is-inview .recruit {
	mask-size: 100% 100%;
	background-size: 0 100%;
}
.keyvisual .keyvisual_title.is-anim .catchcopy,
.keyvisual .keyvisual_title.is-anim .recruit {
	animation: appearTitle 1s var(--easeInOut) both;
	will-change: animation;
	backface-visibility: hidden;
}
.keyvisual .keyvisual_title.is-anim .recruit {
	animation-delay: .2s;
}
@keyframes appearTitle {
	from { mask-size: 0 100%; background-size: 100% 100%; }
	32% { background-size: 100% 100%; animation-timing-function: cubic-bezier(.6,0,.1,1); }
	48% { mask-size: 100% 100%; }
	to { mask-size: 100% 100%; background-size: 0 100%; }
}

/* Full Width */
.keyvisual_image {
	width: 100%;
}
.keyvisual_image img {
	min-height: calc(100svh - var(--scrollHeight));
	object-fit: cover;
}
@media print, (min-width: 768px) {
	.keyvisual_image { width: calc(1300vw / 11.3); }
}
@media print, (min-width: 1130px) {
	.keyvisual_image { width: 1300px; }
}
@media print, (min-width: 1300px) {
	.keyvisual_image { width: 100%; }
}

/* motion */
.keyvisual_image .visual {
	opacity: 1 !important;
	clip-path: polygon(0 100%, 100% 120%, 100% 120%, 0 100%);
}
.keyvisual_image .visual > :first-child {
	transform: scale(1.2);
}
.keyvisual_image .visual.is-active {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.keyvisual_image .visual > :first-child.is-active {
	transform: none;
	transition: transform 5s var(--easeOut);
}
.is-moving .keyvisual_image .visual {
	transition: clip-path 0s 1.2s var(--easeInOut) !important;
	will-change: clip-path;
	backface-visibility: hidden;
}
.is-moving .keyvisual_image .visual.is-active {
	transition-duration: 1.2s !important;
	transition-delay: 0s !important;
}

/* :::::: Component :::::: */
.home_section {
	margin-top: var(--sectionSpace);
}
.home_section_title {
	--sideshift: min(85vw / 11.3, 85px);
}
.home_section_title .title {
	width: fit-content;
	margin-bottom: -.12em;
	color: var(--darkgray);
	font: 500 min(42vw / 3.75, 5.8125rem) / 1 var(--fontCondensed); /* 93px */
	text-transform: uppercase;
}
.home_section_title .lead {
	display: inline-block;
	z-index: 0;
	position: relative;
	padding: 1.25em .25em;
	color: white;
	font-weight: 500;
	font-size: min(12vw / 3.75, 1.25rem); /* 20px */
	line-height: 1.6;
}
.home_section_title .lead::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0 -5em;
	background: var(--themecolor);
	transform: skew(-33deg);
}
/* inview */
.home_section_title.js-inview .title {
	position: relative;
}
.home_section_title.js-inview:not(.is-inview) .title {
	clip-path: inset(0 100% 0 0);
}
.home_section_title.js-inview:not(.is-inview) .title::before {
	content: "";
	position: absolute;
	inset: .15em 0 .05em;
	background: var(--themecolor);
}
.home_section_title.js-inview:not(.is-anim) .more {
	opacity: 0;
	transform: translateX(-1em);
}
.home_section_title.js-inview:not(.is-inview) .lead::before {
	clip-path: inset(0 100% 0 0);
}
.home_section_title.js-inview:not(.is-inview) .lead span:not([class]) {
	mask: linear-gradient(white, white) left center / 0 100% no-repeat;
}
::-webkit-full-page-media, :future, :root .home_section_title.js-inview:not(.is-inview) .lead span:not([class]) {
	display: inline-block;
}
.home_section_title.js-inview.is-anim .title {
	clip-path: inset(0);
	transition: clip-path .2s var(--easeOut);
}
.home_section_title.js-inview.is-anim .title::before {
	animation: split .6s .15s var(--easeOut) both;
}
.home_section_title.js-inview.is-anim .lead::before {
	clip-path: inset(0);
	transition: clip-path 1s .15s cubic-bezier(.6,0,.1,1);
}
.home_section_title.js-inview.is-anim .lead span:not([class]) {
	animation: textAppear 1.2s .4s var(--easeOut) both;
}
.home_section_title.js-inview.is-anim .more {
	z-index: 1;
	transition: opacity .8s, transform .8s var(--easeOut);
	transition-delay: .6s;
}
.home_section_title.js-inview.is-inview .title::before {
	clip-path: inset(0 0 0 100%);
}
.home_section_title.js-inview.is-inview .lead span:not([class]) {
	mask: linear-gradient(white, white) left center / 100% 100% no-repeat;
}
::-webkit-full-page-media, :future, :root .home_section_title.js-inview.is-inview .lead span:not([class]) {
	display: inline-block;
}
@keyframes split {
	from { clip-path: inset(0); }
	to { clip-path: inset(0 0 0 100%); }
}
@keyframes textAppear {
	from { mask-size: 0 100%; }
	to { mask-size: 100% 100%; }
}
@media screen and (max-width: 1129px) {
	.home_section_title.js-inview {
		/* --sideshift: calc(24vw / 3.75); */
	}
}

/* :::::: Concept :::::: */
.home_section.-concept {
	z-index: 0;
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	padding-bottom: min(32vw / 11.3, 64px);
	color: var(--themecolor);
}
.home_section.-concept .concept_title {
	margin-left: calc(var(--sideshift) * .6);
	color: var(--darkgray);
	font: 500 min(42vw / 3.75, 5.8125rem) / 1 var(--fontCondensed); /* 93px */
	text-transform: uppercase;
}
/* inview */
@media print, (min-width: 1130px) {
	.concept_title {
		width: fit-content;
	}
	.concept_title.js-inview {
		position: relative;
		mask: linear-gradient(white, white) left center / 0 100% no-repeat;
	}
	.concept_title.js-inview::before {
		content: "";
		position: absolute;
		inset: .15em 0 .05em;
		background: var(--themecolor);
	}
	.concept_title.js-inview.is-anim {
		mask-size: 100% 100%;
		transition: mask-size .3s var(--easeOut);
	}
	.concept_title.js-inview.is-anim::before {
		animation: split .6s .2s var(--easeOut) both;
	}
}
@media screen and (max-width: 1129.98px) {
	.concept_title span {
		display: block;
		width: fit-content;
	}
	.concept_title.js-inview span {
		position: relative;
		mask: linear-gradient(white, white) left center / 0 100% no-repeat;
	}
	.concept_title.js-inview span::before {
		content: "";
		position: absolute;
		inset: .15em 0 .05em;
		background: var(--themecolor);
	}
	.concept_title.js-inview.is-anim span {
		mask-size: 100% 100%;
		transition: mask-size .3s var(--easeOut);
	}
	.concept_title.js-inview.is-anim span::before {
		animation: split .6s .2s var(--easeOut) both;
	}
	.concept_title.js-inview.is-anim span:last-child {
		transition-delay: .2s;
	}
	.concept_title.js-inview.is-anim span:last-child::before {
		animation-delay: .4s;
	}
}
.home_section.-concept::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0 var(--breakout);
	background: var(--white) url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M7,7H3V3h4v4Z" fill="%23cdcdcd"/></svg>') center / 4px;
}
.home_section.-concept .symbol {
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	width: min(240vw / 3.75, 560px);
	height: auto;
	margin-right: -85px;
	fill: var(--themecolor);
}
.home_section.-concept .link {
	display: grid;
	justify-items: center;
	margin-top: 1em;
}
.concept_catchcopy {
	grid-area: 1 / 1;
	max-width: min(240vw / 3.75, 411px);
	margin-top: min(16vw / 3.75, 40px);
	fill: currentcolor;
}
.concept_catchcopy svg {
	width: 100%;
	height: auto;
}
.concept_lead {
   grid-area: 2 / 1;
   display: grid;
   align-items: center;
   column-gap: 2em;
   grid-template-columns: 1fr auto 1fr;
   margin-top: .5em;
   font-size: min(16vw / 3.75, 1.5625rem); /* 25px */
   font-weight: 500;
}
.concept_lead .copy {
	grid-column: 2;
}
.concept_lead .more {
	grid-column: 3;
}
.home_section.-concept .image {
	z-index: -1;
	grid-area: 1 / 1 / 4 / 2;
}
@media (hover) {
	.home_section.-concept .image {
		overflow: hidden;
	}
	.home_section.-concept .image img {
		transition: transform 2s var(--easeOut);
	}
	.home_section.-concept .link:hover .image img {
		transition-duration: 1s;
		transform: scale(1.04);
	}
}
@media screen and (max-width: 767.98px) {
	.home_section.-concept {
		padding-bottom: min(16vw / 3.75, 32px);
	}
	.home_section.-concept .link {
		position: relative;
	}
	.concept_lead {
		column-gap: 1em;
 	   grid-template-columns: auto auto;
	}
	.concept_lead .more {
		position: absolute;
		right: 1em;
		bottom: 1.25em;
	}
}

/* :::::: Vision :::::: */
.home_section.-vision .home_section_title {
	margin-left: calc(var(--sideshift) * .6);
}
.vision_section {
	margin-top: min(32vw / 3.75, 56px);
}
.vision_section .more {
	display: block;
	margin: 1em 0 0 auto;
	color: var(--themecolor);
}
.vision_section + .vision_section {
	margin-top: min(32vw / 3.75, 104px);
}
.vision_section_title {
	float: left;
	position: relative;
	margin-bottom: -.5em;
	padding: 0 1em .1em;
	color: white;
	font: 500 min(20vw / 3.75, 2.375rem) / 1.4 var(--fontCondensed); /* 38px */
	text-transform: uppercase;
}
.vision_section_title::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0;
	background: var(--themecolor);
	transform: skew(-33deg);
}
.vision_section_image {
	clear: both;
}
.vision_section_image::after {
	content: "";
	display: block;
	clear: both;
}
.vision_section_image .wrap {
	display: grid;
	place-content: center;
	place-items: center;
	overflow: hidden;
	max-height: min(470vw / 11.3, 470px);
	margin-inline: var(--breakout);
	width: 100vw;
}
@media screen and (max-width: 767.98px) {
	.vision_section_image .wrap {
		max-height: calc(200vw / 3.75);
	}
}
.vision_section_image .wrap > * {
	grid-area: 1 / 1;
}
.vision_section_image .video {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: 100%;
}
.vision_section_image img {
	width: calc(1300vw / 11.3);
	max-width: none;
	transition: opacity .4s, transform 2s var(--easeOut);
}
@media print, (min-width: 1130px) {
	.vision_section_image img { width: 1300px; }
}
@media print, (min-width: 1300px) {
	.vision_section_image .wrap {
		width: 1300px;
		margin-inline: -85px;
	}
}
.vision_section_image .video_play {
	--size: min(64vw / 3.75, 104px);
	cursor: pointer;
	display: grid;
	grid-template-rows: 5fr 3fr;
	align-items: start;
	justify-items: center;
	row-gap: .5em;
	width: var(--size);
	height: var(--size);
	border: 1px solid currentcolor;
	border-radius: var(--size);
	color: var(--themecolor);
	font: 500 min(10vw / 3.75, .875rem) / 1 var(--fontEn);
	text-transform: uppercase;
	transition: opacity .4s, transform .4s var(--easeOut);
}
@media (hover) {
	.video_button {
		cursor: pointer;
	}
	.video_button:hover img,
	.vision_section .link:hover img {
		transform: scale(1.04);
		transition-duration: .4s, 1s;
	}
	.video_button.is-hov .video_play {
		animation: attention .4s var(--easeOut) both;
	}
	@keyframes attention {
		from, to { transform: none; }
		20% { transform: scale(.9); }
		40% { transform: scale(1.08); }
	}
}
.vision_section_image .wrap.is-playing img,
.vision_section_image .wrap.is-playing picture,
.vision_section_image .wrap.is-playing .video_play  {
	pointer-events: none;
	opacity: 0;
	transition-duration: .4s;
}
.vision_section_image .video_play::before {
	content: "";
	align-self: end;
	width: 2em;
	height: 2em;
	margin-left: .5em;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: currentcolor;
}
.vision_section_image .caption {
	float: right;
	position: relative;
	margin-top: -.5em;
	padding: 0 1.8em .1em;
	color: white;
	font-size: min(14vw / 3.75, 1.75rem); /* 28px */
	line-height: 1.4;
	text-align: right;
}
.vision_section_image .caption::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0;
	background: var(--darkgray);
	transform: skew(-33deg);
}
.vision_section_image img,
.vision_section_image picture,
.vision_section_image .video_play {
	z-index: 1;
}
.vision_section_title,
.vision_section_image .caption {
	z-index: 2;
}

/* :::::: Originality :::::: */
.home_section.-originality {
	border-image: linear-gradient(var(--white), var(--white)) 0 fill / 0 / 0 50vw;
}
.home_section.-originality .home_section_title {
	float: right;
	margin-right: var(--sideshift);
}
.originality_lineup {
	clear: both;
	display: grid;
	gap: min(2vw / 3.75, 6px);
	margin-top: min(8vw / 3.75, 24px);
	margin-inline: calc(var(--sidefill) * -1);
}
@media print, (min-width: 768px) {
	.originality_lineup {
		grid-template-columns: repeat(2, 1fr);
	}
}
.originality_lineup li {
	padding-top: var(--sectionSpace);
}
.originality_lineup li:nth-child(1) {
	--itemcolor: #ffd53e;
	--subjectWidth: 475;
}
.originality_lineup li:nth-child(2) {
	--itemcolor: #84c888;
	--subjectWidth: 469;
}
.originality_lineup li:nth-child(3) {
	--itemcolor: #6bcde9;
	--subjectWidth: 403;
}
.originality_lineup li:nth-child(4) {
	--itemcolor: #f8a386;
	--subjectWidth: 499;
}
.originality_lineup .link {
	display: grid;
	place-content: center;
}
.originality_lineup .link > * {
	grid-area: 1 / 1;
}
.originality_lineup .label {
	z-index: 1;
	place-self: start;
	position: relative;
	margin: -1.2em 0 0 2em;
	color: var(--darkgray);
	font: 500 min(18vw / 3.75, 2.25rem) / 1 var(--fontCondensed); /* 36px */
	text-transform: uppercase;
}
.originality_lineup .label .num {
	font-size: 1.5em;
}
.originality_lineup .label::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 1em -.5em 0;
	background: var(--itemcolor);
	transform: skew(-33deg);
}
.originality_lineup .subject {
	z-index: 1;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: .25em;
	width: fit-content;
	margin: 0 1em 2em;
	font-size: min(16vw / 3.75, 2.0625rem); /* 33px */
}
.originality_lineup .subject .more {
	align-self: end;
}
.originality_lineup .subject img {
	width: min(var(--subjectWidth) * .5vw / 3.75, var(--subjectWidth) * 1px);
}
.originality_lineup .more {
	color: var(--themecolor);
}
.originality_lineup li:nth-child(-n+2) .more {
	color: white;
}
.originality_lineup .image img {
	max-height: calc(240vw / 3.75);
	object-fit: cover;
}
.originality_lineup li:nth-child(2) .image img {
	object-position: 50% 25%;
}

/* :::::: Interview :::::: */
.home_section.-interview .home_section_title {
	margin-left: var(--sideshift);
}
.home_section.-interview .home_section_title .title {
	margin-bottom: 0;
}
.home_section.-interview .home_section_title .lead {
	z-index: 1;
	margin-top: 0;
	padding: .5em .25em;
}
.home_section.-interview .home_section_title .lead::before {
	left: -2em;
	background: var(--darkgray);
}
.home_section.-interview .interview_lineup {
	margin-top: max(-16vw / 3.75, -2em);
	padding-block: min(56vw / 3.75, 120px);
}
.home_section.-interview .interview_lineup::before {
	content: "";
	position: absolute;
	inset: 0 -15% 0 5%;
	background: var(--themecolor);
	transform: skew(-33deg);
}
.home_section.-interview > .more {
	display: block;
	color: var(--themecolor);
	margin: 1.5em auto 0;
}
@media screen and (max-width: 767.98px) {
	.home_section.-interview .interview_lineup::before {
		right: max(-40%, -160px);
	}
}

/* :::::: Culture :::::: */
.home_section.-culture .home_section_title {
	margin-left: calc(var(--sideshift) * .75);
}
.home_section.-culture {
	display: grid;
	position: relative;
	max-width: 1080px;
	margin-inline: auto;
}
.home_section.-culture::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0 var(--breakout);
	background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M7,7H3V3h4v4Z" fill="%23cdcdcd"/></svg>') center / 4px;
}
.home_section.-culture .home_section_title .lead {
	padding-bottom: 4em;
}
.home_section.-culture .home_section_title .lead::before {
	right: -10em;
}
.home_section.-culture .home_section_title .more {
	margin-top: 1em;
}
.home_section.-culture > * {
	grid-area: 1 / 1;
}
.home_section.-culture .image {
	pointer-events: none;
	display: grid;
	place-items: center;
	grid-template: repeat(6, 1fr) / repeat(2, 1fr);
}
.home_section.-culture .image .obj {
	max-width: 100%;
	width: min(var(--width) * .5vw / 11.3, var(--width) * .5px);
}
.home_section.-culture .image img.obj {
	z-index: 1;
}
.home_section.-culture .image .obj:nth-child(1) {
	--width: 1100;
	grid-row: 2 / 5;
	grid-column: 2;
}
.home_section.-culture .image .obj:nth-child(2) {
	--width: 780;
	grid-row: 4 / 6;
	grid-column: 1;
}
.home_section.-culture .image .obj:nth-child(3) {
	--width: 660;
	grid-row: 5 / 7;
	grid-column: 2;
}
.home_section.-culture .image svg.obj {
	z-index: -1;
	grid-column: 1 / 3;
	height: auto;
	transform-origin: left bottom;
	transform: skew(-33deg);
}
.home_section.-culture .image .obj:nth-child(4) {
	--width: 1500;
	justify-self: end;
	grid-row: 3 / 4;
	height: min(34vw / 3.75, 68px);
	fill: #ffd53e;
}
.home_section.-culture .image .obj:nth-child(5) {
	--width: 1364;
	align-self: end;
	justify-self: start;
	grid-row: 4 / 7;
	height: min(160vw / 3.75, 320px);
	fill: #d0d0d0;
}
@media screen and (max-width: 767.98px) {
	.home_section.-culture .image img.obj {
		position: relative;
	}
	.home_section.-culture .image .obj:nth-child(1) {
		top: 3em;
	}
	.home_section.-culture .image .obj:nth-child(3) {
		top: 2em;
	}
}

/* :::::: Recruiting Info :::::: */
.home_section.-info {
	display: grid;
	max-width: 960px;
	margin-inline: auto;
}
.home_section.-info .home_section_title {
	justify-self: end;
}
.home_section.-info .home_section_title .lead::before {
	inset: 0 -13.6em 0 -3em;
}
.info_lineup {
	clear: both;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-inline: calc(var(--sidefill) * -1);
	padding-top: min(32vw / 3.75, 64px);
}
.info_lineup li {
	max-width: 960px;
	border-top: 3px solid var(--themecolor);
}
.info_lineup li:last-child {
	border-bottom: 3px solid var(--themecolor);
}
.info_lineup .link {
	display: grid;
	place-items: center;
	z-index: 0;
	position: relative;
	color: white;
}
.info_lineup .link::before {
	content: "";
	z-index: 1;
	position: absolute;
	inset: 0;
	background: #0000005e;
}
.info_lineup .link > * {
	grid-area: 1 / 1;
}
.info_lineup .label {
	z-index: 1;
	position: relative;
	width: 11em;
	max-width: calc(100% - 32px);
	border: 1px solid currentcolor;
	font-weight: 700;
	font-size: min(16vw / 3.75, 30px);
	text-align: center;
}
.info_lineup .more {
	position: absolute;
	top: calc(100% + .5em);
	right: 0;
}
@media (hover) {
	.info_lineup .label {
		--shift: -12%;
	}
	.info_lineup picture {
		transition: transform 2s var(--easeOut);
	}
	.info_lineup .label::before {
		content: "";
		z-index: -1;
		position: absolute;
		inset: 0;
		background: #c7161dcc;
		backdrop-filter: blur(4px);
		visibility: hidden;
	}
	.info_lineup .link {
		overflow: hidden;
	}
	.info_lineup .link:hover picture {
		transform: scale(1.04);
		transition-duration: 1s;
	}
	.info_lineup .link.is-hov .label::before {
		animation: splitMask .6s var(--easeOut);
		will-change: animation;
	}
}
