@charset "utf-8";

@keyframes reverse-rotate {
	100% { rotate: -360deg; }
}

@keyframes indicator-down {
	0% { translate: 0 -100%; }
	70%, 100% { translate: 0 240%; }
}

.layout-home { word-break: keep-all;
	.section-hero { position: relative; height: max(800rem, 100dvh); color: #fff;
		.swiper-slide { background: var(--black) no-repeat 53% / cover;
			@media (width >= 768px) {
				&.bg-1 { background-image: url("/images/home/hero-bg-1-pc.webp"); }
			}
			@media (width < 768px) {
				&.bg-1 { background-image: url("/images/home/hero-bg-1-mob.webp"); }
			}
		}
		.content-block { align-content: center; height: 100%; box-sizing: border-box; padding-top: var(--header-height); translate: 0 6.9%; }
		.eyebrow { --max-font-size: 20; font: 900 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.3 var(--font-sans); color: var(--primary); }
		.copyright { --min-font-size: var(--font-size-heading-min); --max-font-size: 50; margin-block: 0.18em clamp(var(--gap-base), calc(40 / var(--container) * 100vw), 40rem); font: 900 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.3 var(--font-sans); text-transform: uppercase;
			u { text-decoration-thickness: 2px; text-underline-offset: 0.17lh; }
		}
		.link { --min-font-size: 100; --max-font-size: 250; display: block; align-content: center; width: 1em; aspect-ratio: 1; margin-left: auto; font: clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) var(--font-sans); background: url("/images/home/hero-arrow.svg") no-repeat 50% / min(16%, 40rem), rgb(from currentColor r g b / 0.2); border-radius: 50%; backdrop-filter: blur(10px);
			&::before { display: block; width: 100%; aspect-ratio: 1; margin: auto; background: url("/images/home/hero-text.svg") no-repeat 50% / contain; content: ""; }
			@media (prefers-reduced-motion: no-preference) {
				&::before { animation: reverse-rotate 15s linear infinite; }
			}
		}
		.indicator-block { position: absolute; inset: 0; z-index: 1; display: grid; align-items: end; pointer-events: none;
			.indicator { width: 2rem; height: 120rem; contain: content; background: rgb(from currentColor r g b / 0.3); }
			.indicator-bar { height: 50rem; background: currentColor;
				@media (prefers-reduced-motion: no-preference) { animation: indicator-down 4s ease-in-out infinite; }
			}
		}
	}
	/* #region shared style */
	.shared-eyebrow { --min-font-size: 14; --max-font-size: 30; font: 700 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-play); color: var(--primary); }
	.shared-heading { --min-font-size: var(--font-size-heading-min); --max-font-size: 70; font: 800 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-sans); color: #090909;
		.shared-eyebrow + & { margin-top: 0.02857143em; }
	}
	.shared-subheading { --min-font-size: 16; --max-font-size: 30; font: 600 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-sans); color: #090909; }
	.shared-description { --max-font-size: 20; font: 300 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.6 var(--font-sans); color: #555; }
	/* #endregion shared style */
	.section-layout { display: grid; gap: clamp(var(--section-gap), calc(202 / var(--container) * 100vw), 202rem); padding-block: clamp(var(--section-gap), calc(189 / var(--container) * 100vw), 189rem) clamp(var(--section-gap), calc(180 / var(--container) * 100vw), 180rem); }
	.section-solution { text-wrap: balance;
		.container { display: grid; gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);
			@media (width >= 768px) { grid-template-columns: repeat(2, 1fr);
				.card--1 { grid-row-end: span 2; }
			}
		}
		.desc-block {
			@media (width >= 768px) { padding-block: 10.1% 1.4%; }
		}
		.shared-subheading { margin-bottom: 0.46666667em; }
		.card { position: relative; align-content: end; min-height: clamp(20rem, calc(310 / var(--container) * 100vw), 310rem); box-sizing: border-box; padding: 45rem 49rem; padding: clamp(20rem, calc(49 / var(--container) * 100vw), 49rem) clamp(20rem, calc(49 / var(--container) * 100vw), 49rem); color: #fff; background: var(--secondary) var(--bg-url, none) no-repeat 50% / cover; border-radius: 20rem; isolation: isolate;
			&::before, &::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
			&::before { z-index: -2; background: linear-gradient(in oklch, #0000 min(50%, 160rem), #00000080); }
			&::after { z-index: -1; background: rgb(from var(--secondary) r g b / 0.7); }
			@media (hover: none) {
				&::before { display: none; }
			}
			@media (hover), (width >= 1280px) {
				&::after { opacity: 0; }
				&:hover {
					&::before { opacity: 0; }
					&::after { opacity: 1; }
				}
				&:not(:hover) {
					.title { translate: 0 1.835lh; }
					.desc { translate: 0 1.835lh; opacity: 0; }
				}
				@media (prefers-reduced-motion: no-preference) {
					&, &::before, &::after, .title, .desc { transition: 0.3s; }
				}
			}
			@media (width >= 768px) {
				&.card--1 { --bg-url: url("/images/home/solution-bg-1-pc.webp"); }
				&.card--2 { --bg-url: url("/images/home/solution-bg-2-pc.webp"); }
				&.card--3 { --bg-url: url("/images/home/solution-bg-3-pc.webp"); }
			}
			@media (width < 768px) {
				&.card--1 { --bg-url: url("/images/home/solution-bg-1-mob.webp"); }
				&.card--2 { --bg-url: url("/images/home/solution-bg-2-mob.webp"); }
				&.card--3 { --bg-url: url("/images/home/solution-bg-3-mob.webp"); }
			}
		}
		.title { --min-font-size: 16; --max-font-size: 28; margin-bottom: 0.57142857em; font: 700 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-sans); }
		.desc { --max-font-size: 18; font: 300 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-sans); color: rgb(from currentColor r g b / 0.9); }
		@media (width < 1280px) {
			br { display: none; }
		}
	}
	.section-berry { text-wrap: balance;
		.container { display: grid; gap: var(--gap-base) clamp(8rem, calc(70 / var(--container) * 100vw), 70rem);
			@media (width >= 768px) { grid-template-columns: 83fr 70fr; align-items: start; }
		}
		.badge { --min-font-size: 14; --max-font-size: 20; display: inline-block; margin-left: 0.68ch; padding: 0.25em 1em; font: 800 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-sans); letter-spacing: -0.05em; color: #fff; background: var(--primary); border-radius: 5em; translate: 0 -0.2lh; }
		.shared-subheading { margin-top: clamp(var(--gap-base), 1em, 26rem); }
		.shared-description { margin-top: 14rem;
			@media (width < 1280px) {
				br { display: none; }
			}
		}
		.visual { display: block; aspect-ratio: 830 / 609; margin-top: clamp(var(--gap-base), calc(24 / var(--container) * 100vw), 24rem); background: var(--primary) no-repeat 50% / cover; border-radius: 20rem;
			@media (width >= 768px) { background-image: url("/images/home/berry-visual-pc.webp"); }
			@media (width < 768px) { background-image: url("/images/home/berry-visual-mob.webp"); }
		}
		.list { display: grid; gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);
			@media (width >= 1280px) { margin-top: clamp(0px, calc(5 / var(--container) * 100vw), 5rem); }
		}
		.item { display: grid; grid-template-columns: 1fr auto; padding: clamp(var(--gap-base), calc(49 / var(--container) * 100vw), 49rem) clamp(var(--gap-base), calc(49 / var(--container) * 100vw), 49rem) clamp(var(--gap-base), calc(44 / var(--container) * 100vw), 44rem); border: 1px solid var(--border-color); border-radius: 20rem; }
		.eyebrow { --min-font-size: 14; --max-font-size: 18; align-self: end; font: 900 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-play); color: var(--primary); translate: 0 -2rem; }
		.icon { width: auto; height: clamp(calc(var(--font-size-heading-min) * 2rem), calc(80 / var(--container) * 100vw), 80rem); color: #ccc; }
		.title { --min-font-size: var(--font-size-heading-min); --max-font-size: 40; grid-column-end: span 2; margin-block: -2rem 13rem; font: 700 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-sans); color: #111; }
		.desc { --max-font-size: 18; grid-column-end: span 2; font: 300 clamp(calc(var(--min-font-size) * 1rem), calc((var(--min-font-size) * 1rem) + (var(--max-font-size) - var(--min-font-size)) * var(--fluid-formula)), calc(var(--max-font-size) * 1rem)) / 1.5 var(--font-sans); color: #555; }
	}
}