@charset "UTF-8";
/*----------
	早わかり
----------*/
/*-----------
	override
----------*/
.l-structure {
	padding-bottom: 0;
}

.un-breadcrumb .l-breadcrumb__list > li > a,
.un-breadcrumb .l-breadcrumb__list > li > span {
	color: #fff;
}
.un-breadcrumb .l-breadcrumb__list > li + li::before {
	color: #fff;
}

/*-----------
	billboard
----------*/
.un-billboard {
	position: relative;
	min-height: 100vh;
}
.un-billboard__title {
	position: absolute;
	top: 50%;
	left: 5.3%;
	z-index: 1;
	transform: translateY(-50%);
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.un-billboard__title::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -3px;
	width: 21px;
	height: 2px;
	margin-right: 15px;
	background-color: var(--color-prim);
	transform: skew(-18deg);
}
.un-billboard__en {
	display: block;
	margin-top: 5px;
	font-size: 2.8rem;
	font-family: var(--font-barlow);
	letter-spacing: 0.06em;
}
.un-billboard__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.un-billboard__image img {
	height: 100%;
	object-fit: cover;
}
.un-billboard__image::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.3;
	z-index: 1;
}
@media (min-width: 768px), print {
	.un-billboard {
		height: 800px;
	}
	.un-billboard__title {
		left: 120px;
		font-size: 1.6rem;
	}
	.un-billboard__title::before {
		width: 28px;
		height: 5px;
		margin-right: 20px;
	}
	.un-billboard__en {
		display: block;
		margin-top: 0;
		font-size: 9rem;
		letter-spacing: 0;
	}
}

/*-----------
	deco1
----------*/
.un-deco1__triangle {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 25.64%;
	max-width: 100px;
	aspect-ratio: 1;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	background: var(--color-prim);
}
@media (min-width: 768px), print {
	.un-deco1__triangle {
		width: 24.31%;
		max-width: 350px;
	}
}

/*-----------
	label
----------*/
.un-label {
	position: absolute;
	color: #fff;
	font-family: var(--font-barlow);
	font-size: 4rem;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	line-height: 1;
	letter-spacing: 0.02em;
	z-index: -1;
}
.un-label--gray {
	color: #C2C9CB;
}
@media (min-width: 768px), print {
	.un-label {
		font-size: 10rem;
	}
}

/*-----------
	about
----------*/
.un-about {
	position: relative;
	padding: 50px 0;
}
.un-about::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 26/15;
	background: var(--color-prim);
	z-index: -2;
}
.un-about__inner {
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
}
@media (min-width: 768px), print {
	.un-about__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.un-about__label {
	top: 20px;
	left: -3px;
}
@media (min-width: 768px), print {
	.un-about {
		padding: 150px 0 145px;
	}
	.un-about::before {
		aspect-ratio: 1440/600;
	}
	.un-about__image {
		aspect-ratio: 24/11;
	}
	.un-about__label {
		top: 50px;
		left: -10px;
	}
}

/*-----------
	brand
----------*/
.un-brand {
	position: relative;
	padding: 50px 0;
}
.un-brand::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 225px;
	background: var(--color-prim);
	z-index: -2;
}
.un-brand__inner {
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
}
@media (min-width: 768px), print {
	.un-brand__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.un-brand__label {
	top: -6px;
	right: -3px;
}
.un-brand__triangle {
	position: absolute;
	top: 224px;
	left: 0;
	width: 46.15%;
	max-width: 180px;
	aspect-ratio: 1;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	background: var(--color-prim);
	z-index: -1;
}
@media (min-width: 768px), print {
	.un-brand {
		padding: 150px 0 145px;
	}
	.un-brand::before {
		height: 600px;
	}
	.un-brand__image {
		aspect-ratio: 3/1;
	}
	.un-brand__label {
		right: -20px;
	}
	.un-brand__triangle {
		top: 460px;
		width: 31.94%;
		max-width: 460px;
	}
}

/*-----------
	subsection
----------*/
.un-subsection {
	margin-top: 20px;
}
.un-subsection__heading {
	margin-bottom: 20px;
	color: var(--color-txt);
	font-size: 2.3rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
.un-subsection__heading span {
	display: block;
	margin-bottom: 10px;
	color: #00AEEF;
	font-size: 1.6rem;
	font-family: var(--font-barlow);
	line-height: 1.05;
}
.un-subsection__heading span::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -4px;
	width: 16px;
	height: 3px;
	margin-right: 10px;
	background-color: var(--color-prim);
	transform: skew(-18deg);
}
@media (min-width: 768px), print {
	.un-subsection {
		margin-top: 70px;
	}
	.un-subsection__heading {
		margin-bottom: 50px;
		font-size: 3.5rem;
	}
	.un-subsection__heading span {
		font-size: 2rem;
	}
	.un-subsection__heading span::before {
		top: -4px;
		width: 28px;
		height: 5px;
		margin-right: 20px;
	}
}

/*-----------
	contentsbox
----------*/
.un-contentsbox {
	padding: 30px 20px;
	margin-bottom: 50px;
	background-color: var(--color-bg);
}
.un-contentsbox__inner {
	display: flex;
	flex-direction: column-reverse;
}
.un-contentsbox__image {
	margin-bottom: 20px;
}
.un-contentsbox__title {
	margin-bottom: 20px;
	font-size: 1.9rem;
	font-weight: 700;
}
.un-contentsbox__text {
	line-height: 1.8;
	letter-spacing: 0.03em;
}
@media (min-width: 768px), print {
	.un-contentsbox {
		padding: 40px 50px 50px;
		margin-bottom: 87px;
	}
	.un-contentsbox__inner {
		flex-direction: row-reverse;
		align-items: center;
	}
	.un-contentsbox__image {
		flex: 0 0 372px;
		margin: 0 42px 0 0;
	}
	.un-contentsbox__detail {
		flex: 1;
	}
	.un-contentsbox__title {
		margin-bottom: 30px;
		font-size: 2.7rem;
	}
}

/*-----------
	history
----------*/
.un-history {
	position: relative;
	padding: 30px 0;
}
.un-history__inner {
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
}
@media (min-width: 768px), print {
	.un-history__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.un-history__label {
	top: -6px;
	left: -3px;
}
.un-history__triangle {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 25.64%;
	max-width: 100px;
	aspect-ratio: 1;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	background: var(--color-bg);
}
@media (min-width: 768px), print {
	.un-history {
		padding: 100px 0;
	}
	.un-history__label {
		top: -6px;
		left: -10px;
	}
	.un-history__triangle {
		width: 20.83%;
		max-width: 300px;
	}
}

/*-----------
	business
----------*/
.un-business {
	position: relative;
	padding: 50px 0 0;
	background-color: #F7F7F7;
}
.un-business__inner {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
	z-index: 1;
}
@media (min-width: 768px), print {
	.un-business__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.un-business__subtitle {
	position: relative;
	margin-bottom: 40px;
}
.un-business__subtitle span {
	display: grid;
	place-content: center;
	height: 96px;
	text-align: center;
	background-color: var(--color-prim);
	color: #fff;
	font-size: 2.3rem;
	font-weight: 700;
	line-height: 1.3;
	margin-right: 33px;
}
.un-business__subtitle::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	width: 33px;
	height: 96px;
	aspect-ratio: 1/2;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background-color: var(--color-prim);
}
.un-business__button {
	margin: 0 20px;
}
.un-business__label {
	top: -6px;
	right: -8px;
	z-index: 1;
}
@media (min-width: 768px), print {
	.un-business {
		padding: 100px 0 130px;
	}
	.un-business__subtitle span {
		height: 100px;
		font-size: 3.5rem;
		margin-right: 50px;
	}
	.un-business__subtitle::after {
		width: 50px;
		height: 100px;
	}
	.un-business__button {
		margin: 100px auto 0;
		max-width: 640px;
	}
	.un-business__label {
		top: -6px;
		right: -20px;
		z-index: 1;
	}
}

/*-----------
	attraction
----------*/
.un-attraction {
	position: relative;
	padding: 50px 0 0;
}
.un-attraction__inner {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
}
@media (min-width: 768px), print {
	.un-attraction__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.un-attraction__label {
	top: -6px;
	left: -8px;
}
.un-attraction__triangle {
	position: absolute;
	top: 0;
	left: 0;
	width: 46.15%;
	max-width: 180px;
	aspect-ratio: 1;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	background: var(--color-bg);
	z-index: -2;
}
@media (min-width: 768px), print {
	.un-attraction {
		padding: 150px 0 0;
	}
	.un-attraction__label {
		top: 43px;
		left: -10px;
	}
	.un-attraction__triangle {
		max-width: 300px;
	}
}

/*-----------
	future
----------*/
.un-future {
	position: relative;
	padding: 50px 0 0;
}
.un-future__inner {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
}
@media (min-width: 768px), print {
	.un-future__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.un-future__label {
	top: -6px;
	right: -8px;
}
.un-future__triangle {
	position: absolute;
	top: 0;
	right: 0;
	width: 46.15%;
	max-width: 460px;
	aspect-ratio: 1/2;
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
	background: var(--color-bg);
	z-index: -2;
}
@media (min-width: 768px), print {
	.un-future {
		padding: 150px 0 0;
	}
	.un-future__label {
		top: 43px;
		left: -10px;
	}
	.un-future__triangle {
		top: -270px;
		max-width: 460px;
	}
}

/*-----------
	environment
----------*/
.un-environment {
	position: relative;
	padding: 50px 0 90px;
}
.un-environment__inner {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
}
@media (min-width: 768px), print {
	.un-environment__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.un-environment__label {
	top: -6px;
	left: -8px;
}
.un-environment__button {
	margin: 30px 20px 0;
}
@media (min-width: 768px), print {
	.un-environment {
		padding: 150px 0 200px;
	}
	.un-environment__label {
		top: 43px;
		left: -10px;
	}
	.un-environment__button {
		max-width: 330px;
		margin: 40px 0 0;
	}
	.un-environment__button .c-button__inner > span {
		padding-left: 38px;
		padding-right: 38px;
		font-size: 1.8rem;
	}
}

/*-----------
	grid
----------*/
.un-grid__image {
	position: relative;
	margin: 0 -6%;
}
.un-grid__detail {
	margin-top: 20px;
	padding-bottom: 30px;
}
.un-grid__title {
	margin-bottom: 20px;
	font-size: 2.3rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
.un-grid__image {
	aspect-ratio: 390/310;
}
.un-grid + .un-grid {
	margin-top: 30px;
}
@media (min-width: 768px), print {
	.un-grid {
		display: grid;
		align-items: center;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 60px;
	}
	.un-grid__image {
		margin: 0;
		aspect-ratio: 570/380;
	}
	.un-grid__detail {
		margin-top: 0;
		padding-bottom: 0;
	}
	.un-grid__title {
		margin-bottom: 30px;
		font-size: 2.7rem;
		letter-spacing: 0;
	}
	.un-grid + .un-grid {
		margin-top: 90px;
	}
	.un-grid--reverse .un-grid__image {
		order: 2;
	}
}

/*-----------
	numbers
----------*/
.un-numbers {
	position: relative;
}
.un-numbers__heading {
	position: relative;
	width: auto;
	height: 154px;
	margin-right: 10px;
	background: url(/recruit/assets/images/hayawakari/bg_title_numbers.png) no-repeat 100% 0;
	background-size: auto 154px;
}
.un-numbers__heading::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background-color: #010522;
	z-index: -1;
}
.un-numbers__title {
	position: absolute;
	top: 50%;
	left: 30px;
	transform: translateY(-50%);
	color: #fff;
	font-size: 2.3rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.un-numbers__title span {
	position: relative;
	display: block;
	font-family: var(--font-barlow);
	text-transform: uppercase;
}
.un-numbers__title span::before {
	content: var(--icon-title2);
	font-family: iconfont !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	display: inline-block;
	margin-right: 10px;
	font-size: 12px;
	position: relative;
	top: -1px;
	display: none;
}
.un-numbers__body {
	background-color: var(--color-prim);
	padding-top: 45px;
	padding-bottom: 48px;
	margin-top: -1px;
}
.un-numbers__datas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 15px;
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
}
@media (min-width: 768px), print {
	.un-numbers__datas {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.un-numbers__datas .un-numbers__data figure {
	max-width: 300px;
}
.un-numbers__datas .un-numbers__data figcaption {
	margin-top: 12px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.7;
}
.un-numbers__triangle {
	position: absolute;
	bottom: 0;
	right: -10px;
	width: 60px;
	aspect-ratio: 15/23;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	background-color: var(--color-prim);
}
@media (min-width: 768px), print {
	.un-numbers__heading {
		height: 300px;
		margin-right: 120px;
		background: url(/recruit/assets/images/hayawakari/bg_title_numbers_pc.png) no-repeat 100% 0;
		background-size: auto 300px;
	}
	.un-numbers__title {
		left: 120px;
		font-size: 3.5rem;
	}
	.un-numbers__title span {
		font-size: 2rem;
	}
	.un-numbers__triangle {
		right: -120px;
		width: 272px;
		aspect-ratio: 68/67;
	}
	.un-numbers__body {
		padding-top: 100px;
		padding-bottom: 140px;
	}
	.un-numbers__datas {
		padding: 0 36px;
		grid-template-columns: repeat(3, 1fr);
		gap: 80px 160px;
	}
	.un-numbers__datas .un-numbers__data figcaption {
		margin-top: 17px;
		font-size: 2.7rem;
		line-height: 1.18;
	}
}

/*-----------
	information
----------*/
.un-information {
	padding-top: 50px;
	padding-bottom: 100px;
	margin-top: -1px;
	background: linear-gradient(180deg, #009FE8 0%, #F2F2F2 30%, #F2F2F2 100%);
}
.un-information__inner {
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
}
@media (min-width: 768px), print {
	.un-information__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media (min-width: 768px), print {
	.un-information {
		padding-top: 150px;
		padding-bottom: 200px;
	}
}