.logo__link {
	color: #ffff;
}
.header__list-link {
	color: #ffff;
}
.sp {
	display: none;
}
.landing {
	display: flex;
	align-items: center;
	position: relative;
	background: url(./images/landing-bg.png) no-repeat center;
	background-size: cover;
	aspect-ratio: 16 / 9;
	/* aspect-ratio: 1 / 0.658; */
	/* height: 100svh; */
	padding-inline: 3.75rem;
	container-type: inline-size;

	.info {
		/* transform: translateY(-0.4cqi); */
		h1 {
			font-size: clamp(2.5rem, 12.125vw, 5rem);
		}

		img {
			margin-block-end: 1.5rem;
		}

		p {
			font-size: 1.5rem;
			font-family: var(--font-ttl);
			font-weight: 600;
		}
	}
}

.page-down {
	width: 12.5rem;
	height: 12.5rem;
	position: absolute;
	bottom: 1.75cqi;

	&.right {
		right: 3.75rem;
	}

	&.left {
		left: 7.5rem;
	}
}

.header {
	h1 {
		font-size: clamp(3rem, 12.125vw, 6.25rem);
		font-weight: 700;
		color: #525f56;
	}

	p {
		margin-block-start: 4rem;
	}
}

.content {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.wrapper {
	background: 
        /* url(../images/bg-about-1.png) no-repeat top 8% right,
		url(../images/bg-about-2.png) no-repeat bottom 63% left, */ linear-gradient(
		40deg,
		#424f45 6%,
		#1e2f23 97%
	);
}

.about,
.reason,
.process,
.company {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding: 9rem 7.5rem;
	gap: 2.8rem;
}

.concept {
	display: flex;
	align-items: center;
	position: relative;
	background: url(/top/images/concept-bg1.png) no-repeat;
	background-size: cover;
	background-color: rgba(0, 0, 0, 0.1);
	background-blend-mode: darken;
	aspect-ratio: 16 / 9;
	/* aspect-ratio: 1 / 0.658; */
	/* height: 100svh; */
	padding-inline: 7.5rem;

	.info {
		display: flex;
		flex-direction: column;
		translate: 0 -7.8cqi;

		h1 {
			font-size: clamp(2.5rem, 12.125vw, 5rem);
			font-weight: 700;
			color: #525f56;
			letter-spacing: 0.25rem;
			font-weight: 700;
			/* margin-block-end: 0.75rem; */
		}

		h3 {
			font-size: clamp(1.5rem, 4.125vw, 2.5rem);
			margin-block-end: 2rem;
			/* letter-spacing: 0.125rem; */
		}

		p {
			font-size: 1.125rem;
			line-height: 180%;
			font-weight: 500;
			/* letter-spacing: 0.625rem; */
		}
	}
}

.text-center {
	text-align: center;
}

.company {
	.table-container {
		background: var(--white);
		padding: 4rem 7.5rem;
	}

	table {
		width: 100%;
		border-collapse: collapse;

		tr {
			&:not(:last-of-type) {
				border-bottom: 1px solid #838383;
			}

			&:first-child > * {
				padding-block-start: 0;
			}

			&:last-child > * {
				padding-block-end: 0;
			}

			& > * {
				padding-block: 2rem;
			}

			th {
				vertical-align: top;
				color: #30543a;
				text-align: left;
				white-space: nowrap;
				padding-inline-end: 0.75rem;
			}

			td {
				word-break: break-all;
				vertical-align: top;
				color: var(--black);
			}
		}
	}

	.map-container {
		.map {
			max-width: 100%;
			overflow: hidden;
			height: 400px;
			margin-block-end: 1rem;
		}
		.map-generator {
			max-width: 100%;
			max-height: 100%;
			background: none;
		}

		#embed-ded-map-canvas {
			height: 100%;
			width: 100%;
			max-width: 100%;
		}

		iframe {
			height: 100%;
			width: 100%;
			border: 0;
		}

		.info p:first-of-type {
			margin-block-end: 0.25rem;
		}
	}
}

.achievements {
	aspect-ratio: 1 / 0.435;
	position: relative;

	.bg-1 {
		background: url(./images/achievements-1.png);
		justify-content: flex-end;
	}

	.bg-2 {
		background: url(./images/achievements-2.png);
	}

	.bg-1,
	.bg-2 {
		height: 50%;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-block: 0.75rem;
	}

	.header h1 {
		color: #ffff;
	}

	.desc {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2.75rem;
	}

	a {
		color: #ffff;
	}
}

.map {
	color: #0585cc;
}
.reason {
	.slider {
		height: 80vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		position: relative;
		overflow-x: hidden;
	}

	.swiper {
		width: 100%;
		height: 80%;
		overflow: visible;
	}

	.swiper-slide {
		height: 100%;
		width: 100%;

		&.swiper-slide-active {
			img {
				width: 100%;
				height: 75%;
				margin-block-end: 1rem;
        object-fit: cover;
			}
		}
		&:not(.swiper-slide-active) {
			position: relative;

			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background: #222;
				opacity: 0.8;
			}
			.description {
				display: none;
			}
		}

		.description {
			.title {
				margin-block-end: 0.5rem;
			}
		}
	}

	.swiper-slide img {
		display: block;
		height: 100%;
		width: 100%;
	}

	.controls {
		display: flex;
		width: 8.5rem;
		height: 3.5rem;
		position: absolute;
		bottom: 0;
		right: 7%;

		.swiper-button-next,
		.swiper-button-prev {
			width: 3.125rem;
			aspect-ratio: 1 / 1;
			border: 1px solid #838383;
			border-radius: 50%;
			color: #838383;
		}

		.swiper-button-next::after,
		.swiper-button-prev::after {
			content: none;
		}
	}
}

.process {
	gap: 0;

	.content {
		.swiper {
			width: 100%;
			height: 46rem;

			.controls {
				width: fit-content;
				height: 3.5rem;
				display: flex;
				gap: 1rem;
				margin-block-start: 1.75rem;
				margin-inline-start: auto;

				.swiper-button-next,
				.swiper-button-prev {
					position: static;
					width: 3.125rem;
					aspect-ratio: 1 / 1;
					border: 1px solid #838383;
					border-radius: 50%;
					color: #838383;
				}

				.swiper-button-next::after,
				.swiper-button-prev::after {
					content: none;
				}
			}

			.swiper-slide {
				display: flex;
				align-items: flex-end;
				width: 23.75rem;
				height: 37.8125rem;
				background: linear-gradient(
					to top,
					rgba(34, 34, 34, 1),
					rgba(0, 0, 0, 0.2) 50%,
					transparent
				);

				&:hover {
					cursor: grab;
				}

				img {
					position: absolute;
					width: 100%;
					height: 100%;
				}

				.text-container {
					position: relative;
					min-height: 11.25rem;
					padding-inline: 1.5rem;
					padding-block-end: 3rem;

					h3 {
						font-weight: bold;
						font-size: 2rem;
						margin-block-end: 0.5rem;
					}
				}

				.counter {
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 5rem;
					color: #838383;
					transform: translateY(50%);
				}
			}
		}

		& > .btn-container {
			margin-block-start: 4rem;
			margin-inline: auto;
		}
	}

	a {
		color: #ffff;
	}
}

@media screen and (max-width: 769px) {
	.sp {
		display: initial;
	}
	.pc {
		display: none !important;
	}
	.landing,
	.concept {
		aspect-ratio: 1 / 1;
	}
	.page-down {
		width: 8.75rem;
		height: 8.75rem;

		&.right {
			right: 0;
		}
		&.left {
			left: 1.25rem;
		}
	}
	.landing,
	.concept,
	.about,
	.reason,
	.process,
	.company {
		padding-block: 4rem !important;
		padding-inline: 1.25rem !important;
	}
	.process {
		.header {
			p {
				margin-block: 1.5rem;
			}
		}
	}
	.process {
		.swiper {
			height: 28rem !important;
		}
		.swiper-slide {
			width: 17.5rem !important;
			height: 25.625rem !important;

			&.swiper-slide-active {
				img {
					height: 100%;
				}
			}
		}
	}
	.reason {
		.slider {
			height: auto;
		}
		.controls {
			position: relative;
			margin-inline-start: auto;
			right: 0;
      z-index: 1;
		}
	}
	.contacts {
		padding-block-end: 0 !important;

		.image-container {
			aspect-ratio: 1 / 0.5;
		}
	}
	.achievements {
		aspect-ratio: 1 / 0.75;
		h1 {
			font-size: clamp(2rem, 12.125vw, 6.25rem);
		}
		.bg-1 {
			background: url(./images/achievements-1-sp.png);
			padding-inline: 1.25rem !important;
		}
		.bg-2 {
			background: url(./images/achievements-2-sp.png);
			padding-inline: 1.25rem !important;
		}
	}
	.counter {
		font-size: 3rem !important;
	}
	.company {
		.table-container {
			padding: 1.25rem 2rem;
		}
	}
	.process {
		& .content {
			& > .btn-container {
				margin-block-start: 2.5rem;
			}
		}
	}
}

@media screen and (max-width: 426px) {
  .landing {
    width: 100vw;
    height: 100vh;
  }
	.landing,
	.concept {
		aspect-ratio: 1 / 1.45;
	}
	.concept {
		aspect-ratio: 1 / 2;
	}
	.achievements {
		aspect-ratio: 1 / 1.25;
	}
}

@media screen and (max-width: 376px) {
	.landing,
	.concept {
		aspect-ratio: 1 / 1.65;
	}
	.achievements {
		aspect-ratio: 1 / 1.45;
	}
  .sp-none {
    display: none;
  }
}

@media screen and (max-width: 321px) {
	.landing,
	.concept {
		aspect-ratio: 1 / 1.85;
	}
	.achievements {
		aspect-ratio: 1 / 1.5;
	}
}