@charset 'utf-8';

/*---------------------------------------------------------------------- */
/* Top Styles
------------------------------------------------------------------------ */

/* Utilities
---------------------------------------------------------- */

/* Section --------------------------------- */

.section {
	padding: 4rem 2rem;
}


/* Layout
---------------------------------------------------------- */

/* Base --------------------------------- */

#footer {
	padding-bottom: 7rem;
}

/* #main --------------------------------- */

/* #main-header */

#main-header {
	display: block;
	height: auto;
	color: #fff;
}

#main-header > .copy {
	position: absolute;
	top: 16rem;
	left: 4.7rem;
	z-index: 2;
	line-height: 1.4;
	font-weight: 700;
	font-size: 2rem;
	letter-spacing: .04em;
}

#main-header > .txt {
	padding: 2rem;
	background: #b2bed9;
	font-weight: 700;
	text-align: justify;
}

#main-header > .img {
	position: relative;
}

#main-header > .img > img {
	object-fit: contain;
}

#main-header .banner {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 2;
}

#main-header .banner-content {
	display: flex;
	align-items: center;
	padding: 0 1rem 0 2rem;
	width: 100%;
	height: 6rem;
	background: #019944;
	border-radius: 20px 0 0 0;
	color: #fff;
}

#main-header .banner-content > .title {
	line-height: 1;
	font-family: 'Figtree', sans-serif;
	font-weight: 600;
	font-size: 2.3rem;
	letter-spacing: 0;
}

#main-header .banner-content > .txt {
	margin-left: 1rem;
	font-weight: 600;
	font-size: 1rem;
}

#main-header .banner-content > .more {
	margin-left: .8rem;
}

#main-header .banner-content > .more > .btn {
	margin-top: 0;
	padding: 0 1.5rem;
	width: 10.1rem;
	height: 3.7rem;
}

#main-header .banner-content > .more > .btn::after {
	right: .6rem;
	width: 2.5rem;
	height: 2.5rem;
}

#main-header .banner > .btn-close {
	position: absolute;
	top: -2.8rem;
	right: .5rem;
	width: 2.4rem;
	height: 2.4rem;
	background: url(../images/btn-close-gray.svg) no-repeat left top;
	background-size: 100%;
	outline: 0;
	text-indent: -9999px;
	cursor: pointer;
}

#main-header .banner > .btn-close:checked,
#main-header .banner > .btn-close:checked + .banner-content {
	display: none;
}

#main-content {
	margin: 0;
	padding: 0;
}

/* #section-technical */

#section-technical {
	background: #f0f0f0;
}

#section-technical .swiper {
	position: relative;
	margin: 2rem -2rem 0 -2rem;
	padding-bottom: 2.5rem;
	width: calc(100% + 4rem);
}

#section-technical .swiper-slide {
	display: flex;
	flex-flow: column;
	justify-content: center;
	position: relative;
	color: #fff;
}

#section-technical .swiper-slide > a {
	display: flex;
	flex-flow: column;
	align-items: center;
}

#section-technical .swiper-slide > a > .title {
	margin-top: 1rem;
	font-weight: 700;
	font-size: 1.2rem;
}

#section-technical .swiper-slide > a > .more {
	margin-top: 1rem;
	font-family: 'Figtree', sans-serif;
	font-weight: 700;
	font-size: .9rem;
	text-transform: uppercase;
}

#section-technical .swiper-slide > a > .more::after {
	display: inline-block;
	margin-left: .6rem;
	width: 1.3rem;
	height: 1.3rem;
	vertical-align: middle;
	background: url(../images/icon-link-green.svg) no-repeat left top;
	background-size: 100%;
	content: '';
}

#section-technical .swiper-button-prev,
#section-technical .swiper-button-next {
	margin-top: 0;
	top: 5rem;
	width: 2rem;
	height: 2rem;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100%;
	transition: opacity .3s linear;
}

#section-technical .swiper-button-prev {
	left: 4rem;
	background-image: url(../images/btn-prev.svg);
}

#section-technical .swiper-button-next {
	right: 4rem;
	background-image: url(../images/btn-next.svg);
}

#section-technical .swiper-button-prev:hover,
#section-technical .swiper-button-next:hover {
	opacity: .7;
}

#section-technical .swiper-button-prev::after,
#section-technical .swiper-button-next::after {
	display: none;
}

#section-technical .swiper-pagination {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	z-index: 2;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

#section-technical .swiper-pagination-bullet {
	margin: 0 .4rem;
	width: .8rem;
	height: .8rem;
	background-color: #fff;
	border-radius: 50%;
	opacity: 1;
	transition: opacity .3s;
}

#section-technical .swiper-pagination-bullet:focus,
#section-technical .swiper-pagination-bullet:hover {
	opacity: .7;
}

#section-technical .swiper-pagination-bullet-active {
	background: #56c67a;
}

/* #section-archivements */

.block-archivements > .unit {
	display: flex;
	flex-flow: column;
	margin-top: 3.5rem;
}

.block-archivements > .unit > .img {
	order: -1;
	margin: 0 -2rem;
	width: calc(100% + 4rem);
}

.block-archivements > .unit > .title {
	position: relative;
	margin: 2.2rem 2rem 0 2rem;
	padding-left: 1rem;
	border-left: 2px solid #1cb05c;
	color: #029944;
	font-weight: 700;
	font-size: 1.6rem;
}

.block-archivements > .unit > .txt {
	margin: .5rem 2rem 0 2rem;
}

.block-archivements > .unit > .txt > dt {
	margin-top: 1rem;
	color: #029944;
	font-weight: 700;
}

.block-archivements > .unit > .txt > dd {
	margin-top: .5rem;
}

/* #section-recruit, #section-company */

#section-recruit,
#section-company {
	padding-top: 5rem;
	padding-bottom: 6rem;
	color: #fff;
}

#section-recruit {
	background: #019944;
}

#section-company {
	background: #595656;
}

#section-recruit .section-header > .title > .txt01,
#section-recruit .section-header > .title > .txt02,
#section-company .section-header > .title > .txt01,
#section-company .section-header > .title > .txt02 {
	color: inherit;
}

#section-recruit .section-content > .txt,
#section-company .section-content > .txt {
	text-align: center;
}







/*---------------------------------------------------------------------- */
/* 768px Tablet & PC Styles
------------------------------------------------------------------------ */

@media screen and (min-width: 768px), print {

/* Utilities
---------------------------------------------------------- */

/* Section --------------------------------- */

.section {
	padding: 11rem 0;
}

.section-content > .txt {
	text-align: center;
}

/* Layout
---------------------------------------------------------- */

/* #main --------------------------------- */

/* #main-header */

#main-header {
	padding-top: 0;
	min-height: 96rem;
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
}

#main-header > .copy {
	top: auto;
	bottom: 27rem;
	left: 11.7rem;
	font-size: 5rem;
}

#main-header > .txt {
	position: absolute;
	bottom: 16rem;
	left: 11.7rem;
	padding: 0;
	background: none;
	font-size: 1.6rem;
}

#main-header > .img {
	width: 100%;
	height: 100%;
}

#main-header > .img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#main-header .banner-content {
	flex-flow: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 4rem 0 4.3rem;
	width: 29rem;
	height: 23rem;
	border-radius: 30px 0 0 0;
}

#main-header .banner-content > .title {
	font-size: 3.4rem;
}

#main-header .banner-content > .txt {
	margin: 1rem 0 0 0;
	font-size: 1.6rem;
}

#main-header .banner-content > .more {
	margin: 1rem 0 0 0;
}

#main-header .banner-content > .more > .btn {
	padding: 0 3rem;
	width: 20.7rem;
	height: 5.4rem;
}

#main-header .banner-content > .more > .btn::after {
	right: 1rem;
	width: 3.6rem;
	height: 3.5rem;
}

#main-header .banner > .btn-close {
	top: 2rem;
	right: 1.5rem;
	background-image: url(../images/btn-close-white.svg)
}

#main-content {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

/* #section-technical */

#section-technical {
	padding-bottom: 7.5rem;
	width: 100%;
}

#section-technical .swiper {
	margin: 5rem auto 0 auto;
	padding-bottom: 6rem;
	width: 120rem;
	overflow: visible;
}

#section-technical .swiper::before,
#section-technical .swiper::after {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 20rem;
	height: 100%;
	background: #f0f0f0;
	content: '';
}

#section-technical .swiper::before {
	left: -20rem;
}

#section-technical .swiper::after {
	right: -20rem;
}

#section-technical .swiper-slide > a > .title {
	margin-top: 2rem;
	font-size: 2rem;
}

#section-technical .swiper-slide > a > .more {
	font-size: 1.4rem;
}

#section-technical .swiper-slide > a > .more::after {
	margin-left: .8rem;
	width: 1.8rem;
	height: 1.8rem;
}

#section-technical .swiper-button-prev,
#section-technical .swiper-button-next {
	top: 10.2rem;
	width: 4.6rem;
	height: 4.6rem;
}

#section-technical .swiper-button-prev {
	left: -7.6rem;
}

#section-technical .swiper-button-next {
	right: -7.6rem;
}

#section-technical .swiper-pagination-bullet {
	margin: 0 .5rem;
	width: 1rem;
	height: 1rem;
}

/* #section-archivements */

#section-archivements {
	width: 100%;
}

.block-archivements {
	margin: -1rem auto 0 auto;
	width: 120rem
}

.block-archivements > .unit {
	display: grid;
	grid-template-rows: 1fr auto auto 1fr;
	align-items: center;
	gap: 0 9rem;
	margin-top: 10rem;
}

.block-archivements > .unit:nth-child(odd) {
	grid-template-areas:
		'img  . '
		'img title'
		'img txt'
		'img  . ';
	grid-template-columns: 57rem 54rem;
}

.block-archivements > .unit:nth-child(even) {
	grid-template-areas:
		' .    img'
		'title img'
		'txt   img'
		' .    img';
	grid-template-columns: 54rem 57rem;
}

.block-archivements > .unit > .img {
	grid-area: img;
	margin: 0;
	width: 57rem;
}

.block-archivements > .unit > .title {
	grid-area: title;
	margin: -1rem 0 0 0;
	padding-left: 2rem;
	line-height: 4.2rem;
	font-size: 2.6rem;
	border-left-width: 3px;
}

.block-archivements > .unit > .txt {
	grid-area: txt;
	display: flex;
	flex-flow: row wrap;
	margin: 2.5rem 0 0 0;
}

.block-archivements > .unit > .txt  > dt {
	margin-top: 0;
	width: 9rem;
}

.block-archivements > .unit > .txt  > dd {
	margin-top: 0;
	width: calc(100% - 9rem);
}

/* #section-recruit, #section-company */

#section-recruit,
#section-company {
	padding: 10rem 0 11rem 0;
	width: 50%;
}

#section-recruit .section-content > .more > .btn,
#section-company .section-content > .more > .btn {
	margin-top: 6rem;
}


}