/* PCフォントサイズ、カンプより80%小さくしている（もとから小さいところは除外） */
/* -----------
topヘッダー
----------- */
.is-announce-bar-visible .home {}

.home {
	@media screen and (max-width: 899px) {
		.site-header {
			position: fixed;

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

		}
	}
}


/* -----------
ミッション
----------- */
.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 45.83cqw;
	gap: 3.92cqw 0;
	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;
	padding-top: 4cqw;

	/* 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: 500;
	letter-spacing: -.02em;
	line-height: 1;
	margin-bottom: .8em;
	color: var(--color-greyish);

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

	img {
		width: 11.67cqw;
		display: inline-block;

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

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

	@media screen and (max-width: 899px) {
		font-size: min(8.53vw, 32px);
	}

	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;
	z-index: -1;

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

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

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

	img {
		width: 70.5cqw;
		max-width: unset;
		justify-self: end;

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

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

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

.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(odd) {
		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) {
		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-family: var(--font-family--en);
	font-size: 4cqw;
	margin: 0;

	@media screen and (max-width: 899px) {
		font-size: min(38px, 10.13vw);
	}
}


.top-product-lines__title {
	margin: 0;
	font-size: clamp(16px, calc(0.62vw + 13.69px), 18px);
	line-height: 1.5;
	font-weight: 500;
	font-family: var(--font-family--en);
	color: var(--color-greyish);

	span {
		font-size: 0.8em;
		margin-left: 0.5em;
	}
}

.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: 90%;
		font-size: var(--base-font-size);
		line-height: 1;
		padding: .5em;
		text-align: center;
		border: 1px solid var(--color-grey);
		background: var(--color-grey);
		font-weight: 300;
		color: var(--color-white);

		@media screen and (max-width: 899px) {
			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;
	flex-direction: column;
	gap: 0;
	align-items: center;

	@media screen and (max-width: 899px) {
		align-items: flex-start;
	}
}

.top-section__title-en {
	font-size: clamp(40px, calc(8.62vw + 7.69px), 68px);
	font-family: var(--font-family--en);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--color-greyish);
}

.top-section__title-ja {
	font-size: clamp(15px, calc(1.85vw + 8.08px), 21px);
	line-height: 1;
	font-weight: 400;
}


.top-product-list .product-list-block {
	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: 16/11;
		overflow: hidden;

		@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-grey);
		background-color: var(--color-grey);
		line-height: 1;
		font-size: var(--base-font-size);
		padding: 0.5em;
		font-weight: 300;
		width: 30.25cqw;
		display: block;
		text-align: center;
		margin: 0 auto;
		color: var(--color-white);

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

		@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);
			}
		}
	}
}