@charset "UTF-8";
:root {
	--overlap-size: 36vw;
	@media (768px <=width), print {
		--overlap-size: 45vw;
	}
	@media (1024px <=width), print {
		--overlap-size: 128px;
	}
	@media (1280px <=width), print {
		--overlap-size: 160px;
	}
}
.chapter-section {
	padding-inline: 0;
	margin-block: 0;
	container-type: inline-size;
	--base-inline-margin: 4cqi;
	@media (1280px <=width), print {
		--base-inline-margin: calc(calc(100cqi - 1200px) / 2);
	}
}
.slide {
	position: relative;
	background-color: #555;
	aspect-ratio: 375 / 265;
	@media (768px <=width), print {
		aspect-ratio: 768 / 400;
	}
	@media (1024px <=width), print {
		aspect-ratio: 2000 / 880;
	}
	vertical-align: bottom;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	& .inner {
		block-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-block-start: var(--global-header-height);
		padding-block-end: 3%;
		@media (1024px <=width), print {
			padding-block-end: 1%;
		}
	}
	& .text {
		color: var(--white);
		text-shadow: 3px 3px 2px rgb(0 0 0 / 0.5);
		@media (768px <=width), print {
			text-shadow: 5px 5px 4px rgb(0 0 0 / 0.5);
		}
		@media (1024px <=width), print {
			text-shadow: 6px 6px 4px rgb(0 0 0 / 0.5);
		}
		@media (1280px <=width), print {
			text-shadow: 7px 7px 5px rgb(0 0 0 / 0.5);
		}
		font-feature-settings: "palt";
	}
	& .shoulder {
		font-size: calc(58 / 1500 * 100vw);
		@media (768px <=width), print {
			font-size: min(calc(43 / 1500 * 100vw), 43px);
		}
		font-weight: var(--font-bold);
		line-height: 1.5;
		margin-block-end: 1.1em;
	}
	& .main-copy {
		font-size: calc(180 / 1500 * 100vw);
		@media (768px <=width), print {
			font-size: min(calc(150 / 1500 * 100vw), 150px);
		}
		font-family: var(--font-serif);
		font-weight: var(--font-bold);
		line-height: 1.25;
	}
	& .sub-copy {
		font-size: calc(70 / 1500 * 100vw);
		@media (768px <=width), print {
			font-size: min(calc(57.5 / 1500 * 100vw), 57.5px);
		}
		font-weight: var(--font-bold);
		line-height: 1.25;
		margin-block-start: 0.08em;
	}
}
.slide1 {
	background: var(--key-color) url("../images/top/bg_logo.svg") no-repeat bottom center / 100%;
	& .text {
		text-align: center;
	}
	& .sub-copy {
		font-size: min(calc(75 / 1500 * 100vw), 75px);
		font-family: var(--font-serif);
		font-weight: var(--font-bold);
		margin-block-start: 0.08em;
		line-height: 1.25
	}
}
.slide2 {
	background-image: url("../images/top/hero_2-sm.jpg");
	@media (768px <=width), print {
		background-image: url("../images/top/hero_2.jpg");
	}
}
.slide3 {
	background-image: url("../images/top/hero_3-sm.jpg");
	@media (768px <=width), print {
		background-image: url("../images/top/hero_3.jpg");
	}
}
.slide4 {
	background-image: url("../images/top/hero_4-sm.jpg");
	@media (768px <=width), print {
		background-image: url("../images/top/hero_4.jpg");
	}
}
.slide5 {
	background-image: url("../images/top/hero_5-sm.jpg");
	@media (768px <=width), print {
		background-image: url("../images/top/hero_5.jpg");
	}
}
.slide6 {
	background-image: url("../images/top/hero_6-sm.jpg");
	@media (768px <=width), print {
		background-image: url("../images/top/hero_6.jpg");
	}
}
/* News */
section.news {
	--_header-inline-size: 100%;
	@media (768px <=width), print {
		--_header-inline-size: calc(var(--base-inline-margin) + 28cqi);
	}
	@media (1280px <=width), print {
		--_header-inline-size: calc(calc(100% - 1200px) / 2 + 360px);
	}
	@media (768px <=width), print {
		display: flex;
		align-items: center;
		position: relative;
		&::before {
			content: "";
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			display: block;
			inline-size: var(--_header-inline-size);
			block-size: 100%;
			background-color: #e4e4e4;
			z-index: -1;
		}
	}
	@media (1024px <=width), print {
		&::before {
			block-size: calc(100% + var(--overlap-size));
		}
	}
	& .news-header {
		padding: var(--bm90) var(--base-inline-margin) var(--bm50);
		color: var(--key-color);
		background-color: #e4e4e4;
		@media (768px <=width), print {
			inline-size: var(--_header-inline-size);
			padding-block: var(--bm75);
			padding-inline: var(--base-inline-margin) var(--bm20);
			flex: none;
			background-color: transparent;
		}
		& .news-heading {
			font-size: calc(36 / 16 * 1rem);
			line-height: 1;
			font-family: "Arimo", sans-serif;
			font-weight: var(--font-bold);
			text-transform: uppercase;
		}
	}
	& .news-body {
		padding: var(--bm50) var(--base-inline-margin) var(--bm90);
		@media (768px <=width), print {
			padding: var(--bm75) var(--base-inline-margin);
		}
		@media (1024px <=width), print {
			padding-inline-start: min(6cqi, 80px);
		}
	}
}
.news-link {
	font-size: var(--bfs16l);
	line-height: 1;
	margin-block-start: calc(30 / 16 * 1em);
	& a {
		padding: 1.03125em 3em;
		border: 1px solid;
		position: relative;
		inline-size: fit-content;
		display: block;
		text-decoration: none;
		&::after {
			content: "";
			inline-size: 0.6em;
			aspect-ratio: 1;
			position: absolute;
			inset-inline-end: 0.6em;
			inset-block-start: calc(50% - 0.3em);
			display: block;
			border-block-start: 1.5px solid;
			border-inline-end: 1.5px solid;
			transform: scaleY(0.8) rotate(45deg);
		}
	}
}
@media (hover: hover) {
	.news-link a:hover {
		background-color: var(--key-color);
		color: var(--white);
	}
}
.news-list {
	font-size: var(--bfs16l);
	line-height: 1.75;
	& li {
		border-block-end: 1px solid #bfcad2;
	}
	& li:first-child {
		border-block-start: 1px solid #bfcad2;
	}
	& .date {
		color: #284889;
		margin-block-end: 0.3em;
	}
	& a {
		text-decoration: none;
		color: inherit;
		display: block;
		padding-block: 1.19375em;
		transition: background-color 400ms, padding 400ms;
		padding-inline: 0 0.75em;
	}
}
@media (hover: hover) {
	.news-list a:hover {
		background-color: var(--blue-light);
		padding-inline: 0.75em 0;
	}
}
section.company {
	position: relative;
	margin: 0 0 var(--bm90);
	@media (1024px <=width), print {
		margin-block-end: calc(var(--overlap-size) + var(--bm110));
	}
	& .company-text {
		padding: var(--bm90) var(--base-inline-margin) calc(var(--overlap-size) + var(--bm90));
		color: var(--white);
		position: relative;
		@media (768px <=width), print {
			border-inline-start: 4cqi solid #e4e4e4;
		}
		@media (1024px <=width), print {
			border-inline-start: none;
			inline-size: 74cqi;
			padding: var(--bm200) var(--base-inline-margin) var(--bm150) calc(15cqi + var(--bm50));
			margin-inline-start: auto;
		}
		&::before {
			content: "";
			display: block;
			position: absolute;
			inset-inline-start: 0;
			inset-block-start: 0;
			inline-size: 100%;
			block-size: 100%;
			background-color: var(--key-color);
		}
	}
	& .company-image {
		inline-size: calc(100% - var(--base-inline-margin));
		margin-block-start: calc(var(--overlap-size) * -1);
		aspect-ratio: 10 / 6;
		position: relative;
		z-index: 1;
		& img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
		@media (768px <=width), print {
			inline-size: 60%;
			aspect-ratio: auto;
		}
		@media (1024px <=width), print {
			margin: 0;
			position: absolute;
			inset-block-start: var(--overlap-size);
			inset-inline-start: 0;
			inline-size: 40cqi;
			block-size: 100%;
		}
	}
}
.company-text {
	& .company-heading {
		font-size: clamp(2.875rem, 2.136rem + 3.15vw, 4.5rem); /*46-72*/
		line-height: calc(62 / 72);
		font-weight: var(--font-bold);
		font-family: "Arimo", sans-serif;
		text-transform: uppercase;
		opacity: 0.5;
	}
	& .lead-copy {
		font-size: var(--bfs28);
		line-height: calc(42 / 28);
		font-weight: var(--font-medium);
		margin-block-start: 1.8em;
	}
	& .body-copy {
		font-size: var(--bfs16l);
		line-height: calc(30 / 16);
		font-weight: var(--font-medium);
		margin-block-start: 2.5em;
		text-align: justify;
	}
	& .link {
		font-size: var(--bfs24);
		line-height: 1.5;
		margin-block-start: 1.4em;
		color: var(--white);
		& a {
			text-decoration: none;
			color: inherit;
			padding-inline-start: 1.4em;
			background: url("../images/common/arr_wh-r.svg") no-repeat center left / 1em;
			padding-block-end: 0.1em;
		}
	}
}
.solution-header {
	padding-inline: var(--base-inline-margin);
	margin-block-end: var(--bm40);
	& .solution-heading {
		font-size: clamp(2.875rem, 2.136rem + 3.15vw, 4.5rem); /*46-72*/
		color: var(--blue);
		font-family: "Arimo", sans-serif;
		text-transform: uppercase;
		line-height: 1;
		@media (768px <=width), print {
			display: inline-block;
		}
	}
	& .link {
		font-size: var(--bfs24);
		line-height: 1.5;
		margin-block-start: 0.5em;
		position: relative;
		@media (768px <=width), print {
			inset-block-start: -0.5em;
			display: inline-block;
			margin-inline-start: 1.25em;
		}
		color: var(--blue);
		font-feature-settings: "palt";
		letter-spacing: 7%;
		& a {
			text-decoration: none;
			color: inherit;
			padding-inline-start: 1.4em;
			background: url("../images/common/arr_bl-r.svg") no-repeat center left / 1em;
			padding-block-end: 0.1em;
		}
	}
	& .lead-copy {
		font-size: var(--bfs28);
		line-height: calc(42 / 28);
		margin-block-start: 0.5em;
	}
}
.solution-list {
	display: grid;
	inline-size: min(calc(100% - 4cqi * 2), 1500px);
	margin-inline: auto;
	grid-template-columns: repeat(auto-fill, minmax(min(342px, 100%), 1fr));
	@media (1024px <=width), print {
		grid-template-columns: repeat(3, 1fr);
	}
	gap: 20px;
	& li {
		position: relative;
	}
	& p.label {
		font-size: bfs(--bfs18);
		background-color: var(--text-color);
		color: var(--white);
		position: absolute;
		inset-block-start: calc(50% - 100 / 18 * 1em / 2);
		inset-inline-start: 0;
		line-height: 1.55555556;
		block-size: calc(100 / 18 * 1em);
		text-align: center;
		inline-size: 13.33333333em;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
}
@media (hover: hover) {
	.solution-list li a {
		overflow: hidden;
		display: block;
		& p.label {
			transition: background-color 200ms;
		}
		& > img {
			transition: scale 200ms, opacity 200ms;
		}
		&::after {
			content: "";
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			inline-size: 100%;
			block-size: 100%;
			background-color: var(--key-color);
			opacity: 0;
			transition: opacity 100ms;
		}
	}
	.solution-list li a:hover {
		& p.label {
			background-color: var(--key-color);
		}
		& > img {
			scale: 1.1;
			opacity: 0.6;
		}
		&::after {
			opacity: 0.5;
			inline-size: 100%;
		}
	}
}
section.products {
	inline-size: 100%;
	margin: 0;
	overflow-x: hidden;
	margin-block-start: var(--bm90);
	@media (1024px <=width), print {
		margin-block-start: var(--bm160);
	}
	& .inner {
		inline-size: calc(375px * 2.7);
		margin-inline: calc(calc(375px * 2.7 - 100cqi) / -2);
		@media (414px <=width), print {
			inline-size: calc(414px * 2.6);
			margin-inline: calc(calc(414px * 2.6 - 100cqi) / -2);
		}
		@media (768px <=width), print {
			inline-size: calc(768px * 1.5);
			margin-inline: calc(calc(768px * 1.5 - 100cqi) / -2);
		}
		@media (1024px <=width), print {
			inline-size: calc(1024px * 1.5);
			margin-inline: calc(calc(1024px * 1.5 - 100cqi) / -2);
		}
		@media (1280px <=width), print {
			inline-size: 2000px;
			margin-inline: calc(calc(2000px - 100cqi) / -2);
		}
		display: grid;
		aspect-ratio: 2 / 1;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(4, 1fr);
		gap: 4px;
		grid-template-areas: "img1 img1 img2 img3 img4 img5"
		"img1 img1 text text img4 img6"
		"img12 img10 text text img7 img7"
		"img11 img10 img9 img8 img7 img7";
		/**/
		& .imagery {
			display: contents;
			& img {
				inline-size: 100%;
				block-size: 100%;
				object-fit: cover;
			}
		}
		& .center-text {
			grid-area: text;
		}
		& .image1 {
			grid-area: img1;
		}
		& .image2 {
			grid-area: img2;
		}
		& .image3 {
			grid-area: img3;
		}
		& .image4 {
			grid-area: img4;
		}
		& .image5 {
			grid-area: img5;
		}
		& .image6 {
			grid-area: img6;
		}
		& .image7 {
			grid-area: img7;
		}
		& .image8 {
			grid-area: img8;
		}
		& .image9 {
			grid-area: img9;
		}
		& .image10 {
			grid-area: img10;
		}
		& .image11 {
			grid-area: img11;
		}
		& .image12 {
			grid-area: img12;
		}
	}
}
.center-text {
	container-type: inline-size;
	border: 6px solid var(--white);
	padding: 5px 7%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	background-color: var(--text-color);
	color: var(--white);
	@media (768px <=width), print {
		border-width: 13px;
		padding: 5px 7.5%;
	}
	@media (1024px <=width), print {
		border-width: 30px;
	}
	@media (1280px <=width), print {
		border-width: 40px;
	}
	& .products-heading {
		font-size: 15.5cqi;
		line-height: calc(62 / 72);
		font-weight: var(--font-bold);
		font-family: "Arimo", sans-serif;
		text-transform: uppercase;
		&::first-letter {
			color: var(--blue);
		}
	}
	& .link {
		font-size: var(--bfs24);
		position: relative;
		font-feature-settings: "palt";
		line-height: 1.5;
		margin-block-start: 0.5em;
		& a {
			text-decoration: none;
			color: inherit;
			padding-inline-start: 1.4em;
			background: url("../images/common/arr_wh-r.svg") no-repeat center left / 1em;
			padding-block-end: 0.1em;
		}
	}
	& .catch-copy {
		font-size: 11cqi;
		line-height: 1.5;
		margin-block-start: 0.4em;
		font-weight: 800;
		& b {
			color: var(--blue);
		}
	}
	& .lead-copy {
		font-size: calc(15 / 16 * 1rem);
		@media (768px <=width), print {
			font-size: calc(16.5 / 16 * 1rem);
		}
		@media (1024px <=width), print {
			font-size: var(--bfs24);
		}
		line-height: calc(36 / 24);
		margin-block-start: 0.25em;
	}
}
section.catalog {
	padding: var(--bm90) var(--base-inline-margin);
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: var(--bm50);
	@media (1024px <=width), print {
		padding-block: var(--bm120);
		flex-direction: row;
		gap: calc(50 / 1200 * 100%);
	}
	& .logo {
		inline-size: calc(400 / 1200 * 100%);
		aspect-ratio: 400 / 150;
		& a {
			inline-size: 100%;
			block-size: 100%;
			display: grid;
			place-items: center;
			border: 1px solid var(--text-color);
		}
		& img {
			inline-size: calc(242 / 400 * 100%);
		}
	}
	& .text {
		flex: auto;
		justify-content: center;
		text-align: center;
		& .link {
			font-size: clamp(1.5rem, 1.102rem + 1.7vw, 2.375rem); /*24-38*/
			line-height: 1.31578947;
			padding-block-end: 0.5em;
			font-feature-settings: "palt";
			& a {
				text-decoration: none;
				color: inherit;
				padding-inline-start: 2em;
				background: url("../images/common/arr_bk-r.svg") no-repeat center left / 1.31578947em;
				padding-block-end: 0.1em;
			}
		}
		& .note {
			border-block-start: 1px solid;
			font-size: var(--bfs16);
			line-height: 1.5;
			padding-block-start: 0.75em;
		}
	}
}
@media (hover: hover) {
	section.catalog {
		& .link a:hover, & .logo a:hover {
			opacity: 0.6;
		}
	}
}
section.works {
	background-color: var(--text-color);
	padding: var(--bm90) 0;
	@media (768px <=width), print {
		padding-block: var(--bm60);
		display: flex;
		align-items: center;
	}
	& .works-image {
		inline-size: calc(100% - var(--base-inline-margin));
		aspect-ratio: 1000 / 375;
		& img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
		@media (768px <=width), print {
			aspect-ratio: auto;
			inline-size: 50%;
			block-size: 290px;
			flex: none;
		}
		@media (1024px <=width), print {
			block-size: 340px;
		}
		@media (1280px <=width), print {
			block-size: 375px;
		}
	}
	& .text {
		color: var(--white);
		padding-inline: 4.3cqi var(--base-inline-margin);
		padding-block-start: var(--bm50);
		@media (768px <=width), print {
			padding-block-start: 0;
		}
	}
	& .works-heading {
		font-size: clamp(2.875rem, 2.136rem + 3.15vw, 4.5rem); /*46-72*/
		color: var(--white);
		text-transform: uppercase;
		line-height: 1;
		&::first-letter {
			color: var(--blue);
		}
	}
	& .link {
		font-size: var(--bfs24);
		line-height: 1.5;
		margin-block-start: 0.75em;
		font-feature-settings: "palt";
		& a {
			text-decoration: none;
			color: inherit;
			padding-inline-start: 1.4em;
			background: url("../images/common/arr_wh-r.svg") no-repeat center left / 1em;
			padding-block-end: 0.1em;
		}
	}
	& .copy {
		font-size: var(--bfs21l);
		line-height: calc(36 / 21);
		margin-block-start: 1.8em;
	}
}
section.test {
	background: url("../images/top/bg_test.jpg") no-repeat center / cover;
	padding: var(--bm100) var(--base-inline-margin);
	& .text {
		display: grid;
		grid-template-rows: 1fr 1fr;
		@media (768px <=width), print {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
			max-width: 1000px;
		}
		margin-inline: auto;
	}
	& .test-heading-en {
		font-size: clamp(3rem, 2.602rem + 1.7vw, 3.875rem); /*48-62*/
		line-height: 1.05;
		text-transform: uppercase;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-family: "Oswald", sans-serif;
		font-weight: 500;
		padding-block-end: 0.2em;
		background-color: var(--text-color);
		color: var(--white);
		& em {
			text-transform: none;
			font-size: calc(150 / 62 * 1em);
			display: block;
			color: inherit;
			&::first-letter {
				color: var(--blue);
			}
		}
	}
	.test-body {
		background-color: var(--blue);
		color: var(--white);
		padding: var(--bm50) 5.5cqi;
		@media (768px <=width), print {
			padding: var(--bm30) 4.3cqi;
		}
		@media (1024px <=width), print {
			padding-inline: var(--bm70);
		}
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	& .test-heading {
		font-size: clamp(1.688rem, 1.148rem + 2.3cqi, 2.875rem);
		line-height: 1;
		font-weight: var(--font-bold);
	}
	& .link {
		font-size: var(--bfs24);
		line-height: 1.5;
		margin-block-start: 0.75em;
		font-feature-settings: "palt";
		& a {
			text-decoration: none;
			color: inherit;
			padding-inline-start: 1.4em;
			background: url("../images/common/arr_wh-r.svg") no-repeat center left / 1em;
			padding-block-end: 0.1em;
		}
	}
	& .copy {
		font-size: var(--bfs21l);
		margin-block-start: var(--bm25);
	}
}
section.recruit {
	background-color: var(--blue);
	margin-block-start: var(--bm90);
	position: relative;
	@media (768px <=width), print {
		margin-block-start: 120px;
	}
	@media (1024px <=width), print {
		margin-block-start: 200px;
	}
	@media (1280px <=width), print {
		margin-block-start: 255px;
	}
	& .recruit-image {
		aspect-ratio: 1000 / 450;
		& img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
		@media (768px <=width), print {
			aspect-ratio: auto;
			inline-size: 50%;
			block-size: 100%;
			position: absolute;
			inset-block-start: -15%;
			inset-inline-start: 0;
		}
		@media (1280px <=width), print {
			inset-block-start: -100px;
		}
	}
	& .text {
		color: var(--white);
		text-align: center;
		padding: var(--bm50) var(--base-inline-margin) var(--bm90);
		@media (768px <=width), print {
			padding: var(--bm60) var(--base-inline-margin) var(--bm60) 4.3cqi;
			margin-inline-start: 50%;
			inline-size: 50%;
		}
		@media (1032px <=width), print {
			padding-block: var(--bm110) var(--bm140);
		}
	}
	& .recruit-heading {
		font-size: clamp(2.5rem, 1.591rem + 3.88cqi, 4.5rem); /*40-72*/
		line-height: 1;
		& a {
			text-decoration: none;
			color: inherit;
			padding-inline-end: 1em;
			background: url("../images/common/arr_wh-r.svg") no-repeat center right / 0.84em;
			padding-block-end: 0.1em;
		}
	}
	& .recruit-heading-en {
		font-size: clamp(1.313rem, 0.886rem + 1.82cqi, 2.25rem); /*21-36*/
		font-weight: var(--font-bold);
		text-transform: uppercase;
		line-height: 1;
		margin-block-start: 0.5em;
	}
	& .copy {
		font-size: var(--bfs21l);
		line-height: 1.75;
		margin-block-start: var(--bm40);
		@media (1024px <=width), print {
			margin-block-start: var(--bm65);
		}
		text-align: start;
	}
}
@media (hover: hover) {
	section.recruit .recruit-heading a:hover {
		opacity: 0.7;
	}
}
@media (hover: hover) {
	section.company .link a, section.solution .link a, section.products .link a, section.works .link a, section.test .link a {
		position: relative;
		&::after {
			content: "";
			display: block;
			border-block-end: 1px solid;
			position: absolute;
			inset-block-end: 0;
			inset-inline-start: 0;
			inline-size: 0;
			transition: width 300ms;
		}
		&:hover {
			&::after {
				inline-size: 100%;
			}
		}
	}
}
@media print {
	.slick-track {
		width: 100vw;
		overflow: hidden;
	}
	.slick-track {
		width: 100% !important;
		height: auto !important;
		transform: none !important;
	}
	.slick-initialized .slick-slide {
		display: none !important;
	}
	.slick-initialized .slick-slide:nth-child(2) {
		display: block !important;
		left: 0 !important;
		opacity: 1 !important;
		width: 100% !important;
	}
}