/* PCフォントサイズ、カンプより80%小さくしている（もとから小さいところは除外） */
/* -----------
topヘッダー
----------- */
.home {
	@media screen and (max-width: 899px) {
		.site-header {
			position: fixed;

			&:not(.is-scrolled) {
				background-color: transparent;
				transition: opacity .3s ease, transform 1s ease;

				.site-header__logo {
					opacity: 0;

					a {
						pointer-events: none;
						cursor: default;
					}
				}
			}

		}
	}
}


/* -----------
スライダー
-----------  */
.top-slider {
	width: 100%;

	.swiper-wrapper {
		aspect-ratio: 24/11;
		margin-bottom: 30px;

		@media screen and (max-width: 899px) {
			aspect-ratio: unset;
			margin-bottom: 0;
			height: 100svh;
		}

		.cg-fade-up {
			opacity: .01;

			&.is-cg-visible {
				opacity: 1;
			}
		}
	}


	.swiper-slide {
		position: relative;
		container-type: inline-size;

		&[data-slide="1"] {
			.top-slider__logo {
				width: 38.02cqw;
				left: 50%;
				top: 50%;
				translate: -50% -50%;

				@media screen and (max-width: 899px) {
					width: 83.2%;
				}

				.top-slider__catch {
					color: var(--color-white);
					text-align: center;
					font-size: clamp(12px, 5cqw, 20px);
					line-height: 1.25;
					position: relative;
					text-wrap: balance;
					margin-bottom: 1em;
					letter-spacing: 0.06em;
				}

				.top-slider__logo-img {}
			}
		}

		&[data-slide="2"] {
			.top-slider__logo {
				width: 15.47%;
				left: 14.48%;
				bottom: 8.98%;
				mix-blend-mode: multiply;

				@media screen and (max-width: 899px) {
					width: 53.33%;
					left: 5.33%;
					bottom: 3%;
				}
			}

			.top-slider__catch {
				letter-spacing: .05em;
				line-height: 1.7143;
				top: 20%;
				left: 46%;
				font-size: clamp(16px, 1.67cqw, 24px);

				@media screen and (max-width: 899px) {
					top: 50%;
					left: 44%;
					font-size: clamp(16px, 2.45cqw, 30px);
				}
			}
		}

		&[data-slide="3"] {
			.top-slider__logo {
				width: 13.39%;
				left: 15.94%;
				bottom: 8.98%;
				mix-blend-mode: multiply;

				@media screen and (max-width: 899px) {
					width: 46.13%;
					left: 5.33%;
					bottom: 3%;
					letter-spacing: .1em;

				}
			}

			.top-slider__catch {
				letter-spacing: .55em;
				line-height: 1.7143;
				top: 40.57%;
				left: 58.07%;

				@media screen and (max-width: 899px) {
					line-height: 1.9545;
					top: 7.29%;
					left: 8%;
					letter-spacing: .25em;
				}
			}
		}

		&[data-slide="4"] {
			.top-slider__logo {
				width: 15.1%;
				left: 12.45%;
				bottom: 8.98%;
				mix-blend-mode: multiply;
				font-size: clamp(16px, 1.67cqw, 24px);

				@media screen and (max-width: 899px) {
					width: 52.27%;
					left: 5.33%;
					bottom: 3%;
				}
			}

			.top-slider__catch {
				letter-spacing: .05em;
				line-height: 2;
				top: 18%;
				left: 11%;
				font-size: clamp(16px, 1.67cqw, 24px);

				@media screen and (max-width: 899px) {
					font-size: clamp(14px, 2.45cqw, 30px);
					top: 20%;
					left: 5.33%;
					line-height: 1.6;
				}
			}
		}
	}

	.top-slider__logo {
		position: absolute;
	}

	.top-slider__catch {
		position: absolute;
		font-size: 1.82cqw;
		font-weight: 400;

		@media screen and (max-width: 899px) {
			font-size: 5.87vw;
		}
	}

	.top-slider__image {
		img {
			@media screen and (max-width: 899px) {
				width: 100%;
				height: 100%;
				min-height: 100svh;
				-o-object-fit: cover;
				object-fit: cover;
			}
		}
	}

	.swiper-pagination {
		position: relative;
		top: unset;
		bottom: unset;
		left: unset;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;

		.swiper-pagination-bullet {
			border: 1px solid var(--primary-color);
			background-color: var(--color-white);
			width: 15px;
			height: unset;
			aspect-ratio: 1;
			margin: 0;
			display: block;
			opacity: 1;

			&.swiper-pagination-bullet-active {
				background-color: var(--primary-color);
			}
		}

		@media screen and (max-width: 899px) {
			display: none;
		}
	}
}

/* -----------
ミッション
----------- */
.top-mission {
	padding-inline: 20px;

	@media screen and (max-width: 899px) {
		padding-inline: 5.33vw;
	}
}

.top-mission__container {
	width: min(1200px, 100%);
	container-type: inline-size;
	margin: 0 auto;
}

.top-mission__inner {
	padding-top: min(158px, 13.17cqw);
	display: grid;
	grid-template-columns: 1fr 40.83cqw;
	gap: 3.92cqw 8.33cqw;
	grid-template-rows: auto 1fr;

	@media screen and (max-width: 899px) {
		padding-top: 15.73vw;
		grid-template-columns: 1fr;
		gap: 10.67vw;
	}
}

.top-mission__head {
	grid-area: 1/1/2/2;

	/* grid-row: span 1; */
	@media screen and (max-width: 899px) {
		order: 1;
		grid-area: unset;
	}
}

.top-mission__en {
	font-size: 2.67cqw;
	font-family: var(--font-family--en);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1;
	margin-bottom: .8em;

	@media screen and (max-width: 899px) {
		font-size: 5.87vw;
	}
}

.top-mission__title {
	font-size: 3.92cqw;
	font-weight: 200;
	margin: 0;
	line-height: 1.4;

	@media screen and (max-width: 899px) {
		font-size: 8.53vw;
		letter-spacing: -.01em;
	}

	span {
		font-feature-settings: "palt";
	}
}

.top-mission__body {
	grid-area: 2/1/3/2;

	@media screen and (max-width: 899px) {
		order: 3;
		grid-area: unset;
	}
}

.top-mission__text {
	font-weight: 400;
	line-height: 2.5;
}

.top-mission__images {
	grid-area: 1/2/3/3;

	@media screen and (max-width: 899px) {
		display: contents;
		grid-area: unset;
	}
}

.top-mission__image {
	@media screen and (max-width: 899px) {
		&:nth-of-type(1) {
			order: 2;
		}

		&:nth-of-type(2) {
			order: 4;
		}
	}
}

/* -----------
製品ライン
----------- */
.top-product-lines {
	padding-inline: 20px;

	@media screen and (max-width: 899px) {
		padding-inline: 0;
	}
}

.top-product-lines__container {
	width: min(1200px, 100%);
	container-type: inline-size;
	margin: 0 auto;
}

.top-product-lines__inner {
	padding-top: 16.67cqw;

	@media screen and (max-width: 899px) {
		padding-top: 26.67vw;
	}
}

.top-product-lines__list {
	display: grid;
	gap: 8.33cqw;
	margin-bottom: 2.5vw;

	@media screen and (max-width: 899px) {
		gap: 26.67vw;
		margin-bottom: 8vw;
	}
}

.top-product-lines__item {
	display: flex;
	gap: 3.33cqw;

	@media screen and (max-width: 899px) {
		flex-direction: column;
		gap: 6.4vw;
	}

	&:nth-of-type(even) {
		flex-direction: row-reverse;

		@media screen and (max-width: 899px) {
			flex-direction: column;
		}
	}


}

.top-product-lines__image {
	width: 65cqw;

	@media screen and (max-width: 899px) {
		width: 100%;
	}
}

.top-product-lines__content {
	flex: 1;
	display: flex;
	flex-direction: column;

	@media screen and (max-width: 899px) {
		padding-inline: 5.33vw;
		gap: 8vw;
	}
}

.top-product-lines__title-wrap {
	margin-bottom: 2.5cqw;

	@media screen and (max-width: 899px) {
		margin-bottom: 0;
	}
}

.top-product-lines__en-title {
	font-size: 2cqw;
	font-family: var(--font-family--en);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.015em;
	margin-bottom: .333em;

	@media screen and (max-width: 899px) {
		font-size: 8vw;
		margin-bottom: .533em;
	}

	strong {
		font-size: 1.833em;
		font-weight: 500;
	}
}

.top-product-lines__title {
	margin: 0;
	font-size: 0.812rem;
	line-height: 1.5;
	font-weight: 400;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
}

.top-product-lines__title:before,
.top-product-lines__title:after {
	content: "";
	width: .75em;
	height: 1px;
	background: currentColor;
	display: block;
}

.top-product-lines__description {
	margin-bottom: 1rem;

	p {
		line-height: 2.25;
		font-weight: 400;
		letter-spacing: .01875em;

		@media screen and (max-width: 899px) {
			line-height: 2.5;
		}
	}
}

.top-product-lines__link {
	margin-top: auto;

	@media screen and (max-width: 899px) {
		margin-top: 0;
	}
}

.top-product-lines__link-button {
	a {
		display: block;
		width: 78.95%;
		font-size: 0.812rem;
		line-height: 1;
		padding: .813em;
		text-align: center;
		border: 1px solid var(--color-black);
		background: var(--color-white);
		font-weight: 300;

		@media screen and (max-width: 899px) {
			width: 80vw;
			margin: 0 auto;
		}

		@media (hover: hover) {
			&:hover {
				color: var(--color-white);
				background-color: var(--primary-color);
			}
		}

		@media (hover: none) {
			&:active {
				color: var(--color-white);
				background-color: var(--primary-color);
			}
		}
	}
}

.top-product-lines__note {
	/* 375px-899px:10px-12px */
	font-size: clamp(0.625rem, 0.536rem + 0.38vw, 0.75rem);
	font-weight: 300;

	@media screen and (max-width: 899px) {
		padding-inline: 5.33vw;
	}
}


/* -----------
製品一覧
----------- */
.top-section {
	padding-inline: 20px;

	@media screen and (max-width: 899px) {
		padding-inline: 5.33vw;
	}
}

.top-section__container {
	width: min(1200px, 100%);
	container-type: inline-size;
	margin: 0 auto;
}

.top-section__inner {
	padding-top: 14.17cqw;
	display: grid;
	gap: 5cqw;

	@media screen and (max-width: 899px) {
		padding-top: 26.67vw;
		gap: 8vw;
	}
}

.top-section--product {}

.top-section__head {
	display: flex;
	gap: 20px;
	justify-content: flex-start;
	align-items: flex-end;

	@media screen and (max-width: 899px) {
		flex-direction: column;
		gap: 2.67cqw;
		align-items: flex-start;
	}
}

.top-section__title-en {
	/* 375px-899px:55px-80px */
	font-size: clamp(3.438rem, 2.319rem + 4.77vw, 5rem);
	font-family: var(--font-family--en);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.02em;
	margin: 0;

	@media screen and (max-width: 899px) {
		font-size: 14.67vw;
	}
}

.top-section__title-ja {
	font-size: 1rem;
	line-height: 2;
	font-weight: 400;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
	display: flex;
}

.top-section__title-ja:before,
.top-section__title-ja:after {
	content: "";
	width: .75em;
	height: 1px;
	background: currentColor;
	display: block;
}


.top-product-list {
	display: grid;
	gap: 5.83cqw;

	@media screen and (max-width: 899px) {
		gap: 8vw;
	}
}



/* -----------
お知らせ・メディア
----------- */
.top-section--news {}


.top-section__list {}


.top-section__item {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5.58cqw;

	@media screen and (max-width: 899px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 5.67cqw;
	}

	a {
		@media (hover: hover) {
			&:hover {
				text-decoration: underline;
			}
		}

		@media (hover: none) {
			&:active {
				text-decoration: underline;
			}
		}
	}
}

.top-section__thumb {
	margin-bottom: 1.67cqw;

	@media screen and (max-width: 899px) {
		margin-bottom: 2.99cqw;
	}

	a {
		display: block;
		aspect-ratio: 1;

		@media (hover: hover) {
			&:hover {
				opacity: .5;
			}
		}

		@media (hover: none) {
			&:active {
				opacity: .5;
			}
		}
	}
}

.top-section__title {
	margin: 0 0 0.83cqw;
	/* 375px-899px:14px-16px */
	font-size: clamp(0.875rem, 0.786rem + 0.38vw, 1rem);
	line-height: 1.8;
	font-weight: 400;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;

	@media screen and (max-width: 899px) {
		margin-bottom: 4.18cqw;
	}
}

.top-section__date {
	font-size: .875rem;
	line-height: 2;
}

.top-section__more {
	a {
		border: 1px solid var(--color-black);
		background-color: var(--color-white);
		line-height: 1;
		font-size: 0.812rem;
		padding: 1em;
		font-weight: 300;
		width: 25cqw;
		display: block;
		text-align: center;

		@media screen and (max-width: 899px) {
			width: 89.55cqw;
			margin: 0 auto;
		}

		@media (hover: hover) {
			&:hover {
				color: var(--color-white);
				background-color: var(--primary-color);
			}
		}

		@media (hover: none) {
			&:active {
				color: var(--color-white);
				background-color: var(--primary-color);
			}
		}
	}
}