@charset "utf-8";

:root {
	--mobile-visual-height: 256rem;
}

@keyframes parallax-bg {
	from { background-position: 50% 30%; }
	to { background-position: 50% 70%; }
}

/* #region ui */
.ui-section-margin-top {
	@media (width >= 1280px) { margin-top: calc(var(--number-18) * 2); }
	@media (width < 1280px) { margin-top: var(--number-17); }
}
.ui-heading-group {
	@media (width >= 1280px) { margin-bottom: var(--number-13); }
	@media (width < 1280px) { margin-bottom: var(--number-10); }
}
.ui-eyebrow { font: var(--fw-700) var(--heading-4); font-family: var(--ff-play); color: var(--primary-500); text-transform: capitalize; }
.ui-display-1 { font: var(--fw-800) var(--display-1); text-wrap: balance; word-break: keep-all;
	.ui-eyebrow + & {
		@media (width >= 1280px) { margin-top: var(--number-04); }
		@media (width < 1280px) { margin-top: var(--number-02); }
	}
}
.ui-heading-1 { font: var(--fw-800) var(--heading-1); text-wrap: balance; word-break: keep-all;
	.ui-eyebrow + & {
		@media (width >= 1280px) { margin-top: var(--number-04); }
		@media (width < 1280px) { margin-top: var(--number-02); }
	}
}
.ui-heading-2 { font: var(--fw-700) var(--heading-2); text-wrap: balance; word-break: keep-all;
	.ui-badge + & {
		@media (width >= 1280px) { margin-top: var(--number-04); }
		@media (width < 1280px) { margin-top: var(--number-02); }
	}
}
.ui-heading-3 { font: var(--fw-700) var(--heading-3); text-wrap: balance; word-break: keep-all; }
.ui-badge { width: fit-content; min-width: 7em; box-sizing: border-box; margin-inline: auto; padding: 0.25em 1em; font: var(--fw-700) var(--body-1); font-family: var(--ff-play); text-align: center; color: var(--white); text-transform: uppercase; background: var(--primary-500); border-radius: var(--rd-9); }
/* #endregion ui */

.layout-inner {
	* { letter-spacing: var(--ls-n10); }
	@media (width >= 1280px) { padding-bottom: calc(var(--number-18) * 2); }
	@media (width < 1280px) { padding-bottom: var(--number-17); }
	.inner-hero { position: relative; align-content: center; height: calc(100dvh - var(--number-18)); min-height: 560rem; box-sizing: border-box; contain: content; margin-bottom: var(--number-18); padding-block: var(--header-height); color: var(--white); background: var(--black) no-repeat 50% / cover;
		&.inner-hero--short { height: 560rem; text-align: center;
			.heading-container { translate: 0; }
		}
		.heading-container { translate: 0 -16%; }
		.ui-eyebrow{ color: var(--primary-400); }
		.indicator-container { position: absolute; inset: 0; display: grid; place-items: end; margin: auto; pointer-events: none; }
		.scroll-indicator { width: var(--number-01); height: var(--number-20); contain: content; background: oklch(from currentColor l c h / 0.3); pointer-events: auto;
			&::before { display: block; height: var(--number-13); background: currentColor; content: ""; }
		}
		@media (width >= 768px) {
			&.inner-hero--about { background-image: url("/images/hero/about-pc.webp"); }
			&.inner-hero--technology { background-image: url("/images/hero/technology-pc.webp"); background-position-x: 55%; }
			&.inner-hero--berryup { background-image: url("/images/hero/berryup-pc.webp"); }
			&.inner-hero--contact { background-image: url("/images/hero/contact-pc.webp"); }
		}
		@media (width < 768px) {
			&.inner-hero--about { background-image: url("/images/hero/about-mob.webp"); }
			&.inner-hero--technology { background-image: url("/images/hero/technology-mob.webp"); background-position-x: 55%; }
			&.inner-hero--berryup { background-image: url("/images/hero/berryup-pc.webp"); }
			&.inner-hero--contact { background-image: url("/images/hero/contact-pc.webp"); }
		}
	}
}

.page-about {
	.section-about-lnp {
		.container { display: grid; column-gap: var(--grid-gutter); }
		.desc-group { font: var(--fw-300) var(--body-1); color: var(--gray-500);
			.desc + .desc { margin-top: 1.4em; }
		}
		.visual { grid-column: 1 / -1; background: var(--gray-100) no-repeat 50% / cover; border-radius: var(--rd-7);
			@media (width >= 768px) { height: clamp(var(--mobile-visual-height), calc(450 / var(--container-base) * 100vw), 450rem); margin-top: var(--number-15); background-image: url("/images/about/about-visual-pc.webp"); }
			@media (width < 768px) { height: var(--mobile-visual-height); margin-top: var(--number-14);
				/* 753/256 */ background-image: url("/images/about/about-visual-mob.webp");
			}
		}
		@media (width >= 768px) {
			.container { grid-template-columns: repeat(var(--grid-columns), 1fr); }
			.ui-heading-group { grid-column: 1 / 6; }
			.desc-group { grid-column: 6 / -1; margin-top: var(--number-11); }
			@media (width >= 1280px) {
				.desc-group { margin-top: var(--number-15); }
			}
		}
	}
	.section-vision-mission {
		.section-vision { text-align: center; color: var(--white); background: var(--gray-900) no-repeat 50% / cover;
			.ui-heading-1 { font-weight: var(--fw-300); }
			@media (width >= 768px) { background-image: url("/images/about/vision-static-bg-pc.webp"); }
			@media (width >= 1280px) { padding-block: var(--number-21); }
			@media (width < 1280px) { padding-block: var(--number-16); }
			@media (width < 768px) { background-image: url("/images/about/vision-static-bg-mob.webp"); }
			@media (prefers-reduced-motion: no-preference) {
				@supports (animation-timeline: view()) { animation: parallax-bg linear; animation-timeline: view();
					@media (width >= 768px) { background-image: url("/images/about/vision-parallax-bg-pc.webp"); }
					@media (width < 768px) { background-image: url("/images/about/vision-parallax-bg-mob.webp"); }
				}
			}
		}
		.section-mission {
			.list { display: grid; gap: var(--grid-gutter); margin-top: var(--number-12); }
			.item { border: var(--bw-1) solid var(--gray-200); border-radius: var(--rd-7); }
			.icon-bg { display: grid; place-items: center; width: 3.6em; aspect-ratio: 1; font: var(--fw-700) var(--heading-4); background: var(--gray-100); border-radius: 50%; }
			.icon { --svg-sub-color: #354440; width: 52rem; aspect-ratio: 1; color: var(--primary); }
			.eyebrow { display: block; margin-top: var(--number-10); font: var(--fw-700) var(--body-3); font-family: var(--ff-play); color: var(--gray-500); }
			.title { margin-top: var(--number-03); font: var(--fw-700) var(--heading-4); }
			.desc { margin-top: var(--number-05); font: var(--fw-300) var(--body-2); color: var(--gray-500); }
			@media (width >= 768px) { padding-top: var(--number-18);
				.list { grid-template-columns: repeat(var(--grid-columns), 1fr); }
				.item { grid-column-end: span 4; }
			}
			@media (width >= 1280px) {
				.item { padding: var(--number-12); }
			}
			@media (width < 1280px) {
				.item { padding: var(--number-08);
					br { display: none; }
				}
			}
			@media (width < 768px) { padding-top: var(--number-16);
				.item { grid-column-end: span 6; }
			}
		}
	}
	.section-history {
		.container { display: grid; column-gap: var(--grid-gutter); }
		.ui-heading-group { position: sticky; top: calc(var(--number-12) + var(--header-height-min)); }
		.year-list { border-top: var(--bw-2) solid var(--primary-800); border-bottom: var(--bw-1) solid var(--gray-200); }
		.year-item { display: grid; column-gap: var(--grid-gutter);
			& + & { border-top: var(--bw-1) solid var(--gray-200); }
		}
		.year { font: var(--fw-700) var(--heading-2); font-family: var(--ff-play); color: var(--primary-500); }
		.month-item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--number-11); }
		.month { display: inline-block; min-width: 2ch; font: var(--fw-900) var(--body-2); color: var(--gray-900); }
		.event { font: var(--fw-300) var(--body-2); color: var(--gray-500); }
		@media (width >= 768px) {
			.container { grid-template-columns: repeat(var(--grid-columns), 1fr); }
			.heading-wrapper { grid-column: 1 / 5; }
			.year-list { grid-column: 5 / -1; margin-top: var(--number-03); }
			.year-item { grid-template-columns: 1fr 4.7fr; }
			.year { padding-inline: var(--number-05); }
		}
		@media (width >= 1280px) {
			.year-item { padding-block: var(--number-08); }
			.month-item { margin-top: var(--number-06); }
		}
		@media (width < 1280px) {
			.year-item { padding-block: var(--number-07); }
			.month-item { margin-top: var(--number-03); }
		}
		@media (width < 768px) {
			.year { margin-bottom: var(--number-03); }
			.year, .month-item { padding-inline: var(--number-03); }
		}
	}
}
.page-technology {
	.section-why-lnp {
		.layout { display: grid; gap: var(--number-14) var(--grid-gutter); padding-top: var(--number-12); border-top: var(--bw-2) solid var(--primary-800); }
		.visual { background: var(--gray-100) no-repeat 50% / cover; border-radius: var(--rd-7);
			@media (width >= 768px) { background-image: url("/images/technology/why-lnp-visual-pc.webp"); }
			@media (width < 768px) { background-image: url("/images/technology/why-lnp-visual-mob.webp"); }
		}
		.item {
			& + & { margin-top: var(--number-13); padding-top: var(--number-12); border-top: var(--bw-1) solid var(--gray-200); }
		}
		.title { display: block; margin-bottom: var(--number-04); }
		.eyebrow { display: block; font: var(--fw-700) var(--body-2); font-family: var(--ff-play); color: var(--primary-500); }
		.desc { font: var(--fw-300) var(--body-2); color: var(--gray-500); }
		@media (width >= 768px) {
			.layout { grid-template-columns: repeat(var(--grid-columns), 1fr); }
			@media (width >= 1280px) {
				.visual { grid-column: 1 / 7; }
				.list { grid-column: 8 / -1; }
			}
			@media (width < 1280px) {
				.visual { grid-column: 1 / 5; }
				.list { grid-column: 6 / -1; }
			}
		}
		@media (width < 768px) {
			.visual { height: var(--mobile-visual-height); }
			.eyebrow { margin-top: var(--number-01); }
		}
	}
	.section-awards {
		.list { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--number-13) var(--grid-gutter); font: var(--fw-500) var(--body-2); text-align: center; color: var(--gray-800); }
		.item {
			@media (width >= 1280px) { grid-column-end: span 3; }
			@media (768px <= width < 1280px) { grid-column-end: span 4; }
			@media (width < 768px) { grid-column-end: span 2; }
		}
		.frame { position: relative;
			&::before { position: absolute; inset: 0; border: var(--bw-3) solid var(--gray-100); content: ""; pointer-events: none; }
		}
		.image { display: block; width: 100%; height: auto; }
		.text { margin-top: var(--number-07); }
	}
	.section-achievement { font: var(--fw-600) var(--heading-2); text-align: center; color: var(--white); background: var(--gray-900) no-repeat 50% / cover;
		@media (width >= 768px) { background-image: url("/images/technology/achievement-static-bg-pc.webp"); }
		@media (width >= 1280px) { padding-block: var(--number-21); }
		@media (width < 1280px) { padding-block: var(--number-16); }
		@media (width < 768px) { background-image: url("/images/technology/achievement-static-bg-mob.webp"); }
		@media (prefers-reduced-motion: no-preference) {
			@supports (animation-timeline: view()) { animation: parallax-bg linear; animation-timeline: view();
				@media (width >= 768px) { background-image: url("/images/technology/achievement-parallax-bg-pc.webp"); }
				@media (width < 768px) { background-image: url("/images/technology/achievement-parallax-bg-mob.webp"); background-size: auto 309%; }
			}
		}
	}
	.section-partnership {
		.container { display: grid; gap: var(--number-13) var(--grid-gutter); }
		.desc { margin-top: var(--number-05); font: var(--fw-300) var(--body-1); color: var(--gray-500); }
		.list-frame { padding-top: var(--number-08); border-top: var(--bw-2) solid var(--primary-800); }
		.item { padding-block: var(--number-11);
			& + & { border-top: var(--bw-1) solid var(--gray-200); }
		}
		.title { font: var(--fw-700) var(--heading-4); }
		.subtitle { width: fit-content; padding: var(--number-02) var(--number-10); font: var(--fw-700) var(--body-1); color: var(--white); background: var(--primary-500); border-radius: var(--rd-9); }
		.logo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc((100% - var(--grid-gutter)) / 2), 200rem), 1fr)); gap: var(--grid-gutter); margin-top: var(--number-07); font: var(--fw-500) var(--body-3); text-align: center; color: var(--gray-500); }
		.logo { display: block; width: 100%; height: auto; aspect-ratio: 20 / 8; object-fit: scale-down; box-sizing: border-box; margin-inline: auto; padding: var(--number-04); background: var(--gray-100); border-radius: var(--rd-4); }
		.name { margin-top: var(--number-03); }
		@media (width >= 768px) {
			.container { grid-template-columns: repeat(var(--grid-columns), 1fr); }
			.heading-frame { grid-column: 1 / 5; }
			.list-frame { grid-column: 5 / -1; margin-top: var(--number-03); padding-inline: var(--number-04); }
		}
	}
}