@charset "utf-8";

.layout-home { --radius: 20rem;
	/* #region shared elements */
	.shared-eyebrow { margin-bottom: 0.88888889em; font: 700 var(--font-size-18-to-14) var(--font-play); letter-spacing: -0.025em; color: var(--primary);
		@media (width < 768px) {
			.heading-block & { margin-bottom: calc(0.88888889em - 3rem); }
		}
	}
	.shared-heading { font: 800 var(--font-size-45) / 1.375 var(--font-sans); color: #090909; }
	.shared-link { display: inline-flex; align-items: center; gap: 1.25em; padding: 0.6875em 1.3125em; font: 500 clamp(10rem, calc(16 / var(--container) * 100vw), 16rem) var(--font-sans); color: #fff; background: var(--primary); border: 2rem solid #0000; border-radius: 5em; outline-color: #101010;
		&:after { font-size: 1.25em; translate: 0 -8%; content: "+"; }
		@media (any-hover) {
			&:not(:hover, :focus) { color: hsla(0, 0%, 20%, 0.5); background: #0000; border-color: #ddd; }
			@media(prefers-reduced-motion: no-preference){ transition: .3s; }
		}
	}
	.shared-cta { font: var(--font-size-14) var(--font-play); text-transform: uppercase; opacity: 0.5; user-select: none;
		&::after { display: inline-block; width: 1.21428571em; aspect-ratio: 17 / 9; margin-left: 0.78571429em; background: no-repeat 50% / contain; content: ""; }
		&.shared-cta--gray::after { background-image: url("/assets/images/ui/right-arrow-gray.svg"); }
		&.shared-cta--white::after { background-image: url("/assets/images/ui/right-arrow-white.svg"); }
	}
	.shared-controls { display: flex; align-items: center; }
	.shared-nav-btn { position: relative; flex-shrink: 0; width: 7rem; height: 11rem; pointer-events: auto;
		&::before { position: absolute; inset: 0; background: currentColor; content: ""; }
		&::after { position: absolute; inset: -10rem; content: ""; }
		&.shared-nav-btn--prev::before { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
		&.shared-nav-btn--next::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
	}
	.shared-pagination { flex-shrink: 0; width: auto; font: 700 var(--font-size-16) var(--font-play);
		.swiper-pagination-current { margin-inline: 1.3ch 0.7ch; }
		.swiper-pagination-total { margin-inline: 0.8ch 1.2ch; }
	}
	/* #endregion shared elements */
	.section-hero { position: relative; z-index: 1;
		.container { display: grid; gap: 10rem;
			@media (width >= 1280px) { grid-template: "swiper tel" "swiper education" "swiper equipment" / 113fr 36fr; }
			@media (768px <= width < 1280px) { grid-template: "swiper swiper swiper" "tel education equipment" / 1fr 1fr 1fr; }
			@media (width < 768px) { grid-template: "swiper" "tel" "education" "equipment"; }
		}
		.swiper { grid-area: swiper; width: 100%; min-width: 0; min-height: clamp(300rem, calc(400 / var(--container) * 100vw), 400rem); color: #fff; border-radius: var(--radius);
			.swiper-slide { padding: clamp(24rem, calc(70 / var(--container) * 100vw), 70rem) clamp(16rem, calc(39 / var(--container) * 100vw), 39rem); background: var(--black) no-repeat 90% / cover; isolation: isolate;
				@media (width >= 768px) {
					&.swiper-slide-1 { background-image: url("/assets/images/home/hero-slide-1-pc.webp"); }
					&.swiper-slide-2 { background-image: url("/assets/images/home/hero-slide-2-pc.webp"); }
					&.swiper-slide-3 { background-image: url("/assets/images/home/hero-slide-3-pc.webp"); }
				}
				@media (width < 768px) {
					&.swiper-slide-1 { background-image: url("/assets/images/home/hero-slide-1-mob.webp"); }
					&.swiper-slide-2 { background-image: url("/assets/images/home/hero-slide-2-mob.webp"); }
					&.swiper-slide-3 { background-image: url("/assets/images/home/hero-slide-3-mob.webp"); }
				}
				&::before {
					@media (width < 768px) { position: absolute; inset: 0; z-index: -1; background: #000; opacity: 0.3; content: ""; }
				}
			}
			.title { font: 700 clamp(30rem, calc(70 / var(--container) * 100vw), 70rem) / 1 var(--font-play); letter-spacing: -0.025em; }
			.description { margin-top: 24rem; font: 500 var(--font-size-22) / 1.46 var(--font-sans); }
			.description strong { font-size: 1.13636364em; }
			.shared-controls { position: absolute; inset: auto 4.5% 9.2%; z-index: 1; pointer-events: none; }
			.progress { width: 100%; max-width: 300rem; height: 4rem; margin-left: 40rem; background: #ffffff80; }
			.progress::before { display: block; width: 50%; height: 100%; background: var(--primary); content: "";
				@media (prefers-reduced-motion: no-preference) { width: calc(var(--progress) * 100%); }
			}
		}
		.link { display: block; color: #fff; border-radius: var(--radius);
			&.link--tel { --color: #002248; grid-area: tel; align-content: center; padding: clamp(24rem, calc(38 / var(--container) * 100vw), 38rem) 16rem clamp(24rem, calc(30 / var(--container) * 100vw), 30rem); text-align: center; background: var(--color); }
			:where(&.link--education, &.link--equipment) { --icon-space: clamp(20rem, calc(30 / var(--container) * 100vw), 30rem); padding: clamp(24rem, calc(26 / var(--container) * 100vw), 26rem) clamp(16rem, calc(29 / var(--container) * 100vw), 29rem) clamp(33rem, calc(75 / var(--container) * 100vw), 75rem); background: var(--color) var(--icon-url) no-repeat calc(100% - var(--icon-space)) calc(100% - var(--icon-space)) / clamp(32rem, calc(46 / var(--container) * 100vw), 46rem); }
			&.link--education { --color: var(--primary); --icon-url: url("/assets/images/home/hero-education.svg"); grid-area: education; outline-color: #101010; }
			&.link--equipment { --color: #222; --icon-url: url("/assets/images/home/hero-equipment.svg"); grid-area: equipment; }
			.label { display: block; width: fit-content; margin-inline: auto; padding: 0.41111111em 1em; font: 700 var(--font-size-18-to-14) var(--font-sans); color: var(--color); background: #fff; border-radius: 5em; }
			.number { display: block; margin-top: 0.25em; font: 700 var(--font-size-40) var(--font-play); color: #fff; }
			.title { display: block; margin-bottom: 0.40909091em; font: 600 var(--font-size-22) var(--font-sans); }
		}
	}
	.section-news { position: relative; padding-block: clamp(var(--section-block), calc(48 / var(--container) * 100vw), 48rem) clamp(var(--section-block), calc(73.5 / var(--container) * 100vw), 73.5rem); isolation: isolate;
		@media (width >= 1280px) {
			&::before { position: absolute; inset: auto 0 -77rem; z-index: -1; height: 651rem; background: url("/assets/images/home/notice-bg.webp") no-repeat 50% / cover; content: ""; }
		}
		.heading-block { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2ch; }
		.shared-heading { font-weight: 700; font-size: var(--font-size-40); }
		.list { margin-top: clamp(var(--content-top), calc(54 / var(--container) * 100vw), 54rem);
			@media (width >= 768px) { display: grid; row-gap: 40rem; }
			@media (width >= 1280px) { grid-template-columns: repeat(4, 1fr); }
			@media (768px <= width < 1280px) { grid-template-columns: repeat(2, 1fr); }
			@media (width < 768px) { display: flex; overflow: auto; margin-inline: calc(var(--container-edge-offset) * -1); padding: 2px var(--container-edge-offset);
				li { flex: 0 0 80%; }
			}
		}
		.link { display: grid; grid-template-columns: auto 1fr; margin-right: clamp(32rem, calc(90 / var(--container) * 100vw), 90rem); }
		.badge { margin-right: 1.71428571em; font: 700 var(--font-size-14) var(--font-play); color: #333; text-transform: uppercase; }
		.date { font: var(--font-size-14) var(--font-sans); color: #aaa; }
		.title { grid-column: 1 / -1; margin-block: 1.05em 2em; font: 500 var(--font-size-20) / 1.5 var(--font-sans);
			.link:hover & { text-decoration: underline; text-underline-offset: 0.2em; }
			@media (768px <= width < 1280px) { margin-bottom: 1em; }
		}
		.shared-cta { grid-column: 1 / -1; color: #555; }
	}
	.section-training-program { --content-inline: 9rem; position: relative; padding-block: clamp(var(--section-block), calc(73.5 / var(--container) * 100vw), 73.5rem) clamp(var(--section-block), calc(97 / var(--container) * 100vw), 97rem);
		&::before { position: absolute; inset: 50.5% 0 0; z-index: -1; background: #f1f1f1 url("/assets/images/bg/noise-gray.webp"); content: ""; }
		.heading-block { display: grid; grid-template: "eyebrow eyebrow" auto "heading link" 1fr / 1fr auto; align-items: center; }
		.shared-eyebrow { grid-area: eyebrow; }
		.shared-heading { grid-area: heading; }
		.shared-link { grid-area: link; translate: 0 2%; }
		.swiper { overflow: visible; margin-top: clamp(var(--content-top), calc(55 / var(--container) * 100vw), 55rem); }
		.swiper-slide { width: min(calc(var(--font-size-20) * 21.5), calc(var(--container-scale) * 90vw)); }
		.swiper-slide:not(:last-child) { margin-right: clamp(8rem, calc(40 / var(--container) * 100vw), 40rem); }
		.link { display: block; }
		.visual { display: block; width: 100%; aspect-ratio: 3 / 2; border-right: 20rem; border-radius: var(--radius); }
		.title { margin-block: 27rem 20rem; padding-inline: var(--content-inline); font: 600 var(--font-size-20) var(--font-sans); color: #222;
			.link:hover & { text-decoration: underline; text-underline-offset: 0.2em; }
		}
		.excerpt { padding-inline: var(--content-inline); font: var(--font-size-16) / 1.625 var(--font-sans); color: #777; }
	}
	.section-infra-support { padding-block: clamp(var(--section-block), calc(101 / var(--container) * 100vw), 101rem) clamp(var(--section-block), calc(116 / var(--container) * 100vw), 116rem);
		.container { display: grid; gap: 32rem clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
			@media (width >= 768px) { grid-template-columns: 494fr 473fr 473fr; }
			@media (width < 768px) { grid-template-columns: repeat(2, 1fr); }
		}
		.heading-block {
			@media (width >= 768px) { translate: 0 -4rem; }
			@media (width < 768px) { display: grid; grid-template: "eyebrow eyebrow" "heading link" "subheading subheading" / 1fr auto; grid-column: 1 / -1; align-items: center;
				.shared-eyebrow { grid-area: eyebrow; }
				.shared-heading { grid-area: heading; }
				.subheading { grid-area: subheading; }
				.shared-link { grid-area: link; }
			}
		}
		.subheading { margin-top: 1.11111111em; font: var(--font-size-18-to-14) / 1.44444444 var(--font-sans); color: #777; }
		.shared-link {
			@media (width >= 768px) { margin-top: 3.5625em; }
		}
		.link { --padding-block: 20rem; position: relative; display: block; align-content: center; padding: calc(1.7% + var(--padding-block)) 2ch var(--padding-block); font: 600 var(--font-size-25) / 1.4 var(--font-sans); text-align: center; color: #fff; background: var(--black) no-repeat 50% / cover; border-radius: var(--radius); isolation: isolate; outline-color: #101010;
			@media (any-hover) {
				&::before { position: absolute; inset: 0; z-index: -1; background: var(--primary); border-radius: var(--radius); opacity: 0.7; content: ""; }
				&:not(:hover, :focus) {
					&::before { opacity: 0; }
					.title { translate: 0 1.6em; }
					.icon { translate: 0 1.6em; opacity: 0; }
				}
				@media(prefers-reduced-motion: no-preference){
					&::before, .title, .icon { transition: .3s; }
					
				}
			}
			@media (width >= 768px) { height: min-content; aspect-ratio: 473 / 300;
				&.link--1 { background-image: url("/assets/images/home/infra-support-1-pc.webp"); }
				&.link--2 { background-image: url("/assets/images/home/infra-support-2-pc.webp"); }
			}
			@media (width < 768px) {
				&.link--1 { background-image: url("/assets/images/home/infra-support-1-mob.webp"); }
				&.link--2 { background-image: url("/assets/images/home/infra-support-2-mob.webp"); }
			}
		}
		.title { display: block;
			@media (width < 768px) { align-content: center; min-height: 3lh; }
		}
		.icon { display: block; width: 2.8em; aspect-ratio: 1; margin: 0.72em auto 0; background: linear-gradient(var(--primary)) no-repeat 50% / 37.14285714% 5.71428571%, linear-gradient(var(--primary)) no-repeat 50% / 5.71428571% 37.14285714%, #fff; border-radius: 50%; }
	}
	.section-equipment-status { padding-block: clamp(var(--section-block), calc(92 / var(--container) * 100vw), 92rem) clamp(var(--section-block), calc(94 / var(--container) * 100vw), 94rem); color: #fff; background: #191919 url("/assets/images/bg/noise-black.webp");
		.container { display: grid; gap: var(--content-top) clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
			@media (width >= 768px) { grid-template-columns: 390fr 1080fr; }
		}
		.heading-block {
			@media (width >= 768px) { padding-top: 3.9%; }
			@media (width < 768px) { display: grid; grid-template: "eyebrow eyebrow" "heading link" "controls controls" "swiper swiper" / 1fr auto; grid-column: 1 / -1; align-items: center;
				.shared-eyebrow { grid-area: eyebrow; }
				.shared-heading { grid-area: heading; }
				.shared-controls { grid-area: controls; }
				.shared-link { grid-area: link; }
				.swiper { grid-area: swiper; }
			}
		}
		.shared-heading { color: inherit; }
		.shared-controls { margin-top: calc(var(--font-size-45) * 0.97777778); }
		.shared-link {
			@media (any-hover) {
				&:not(:hover, :focus) { color: #dddddd80; border-color: #555; }
			}
			@media (width >= 768px) { margin-top: 4.75em; }
		}
		.swiper { width: 100%; min-width: 0; padding-block: 2px; }
		.swiper-slide {
			&:not(:last-child) { margin-right: 3.7037037%; }
			@media (width >= 768px) { width: 30.83333333%; }
			@media (width < 768px) { width: 48.2%; }
		}
		.link { position: relative; display: block; aspect-ratio: 1; isolation: isolate;
			/* &::before { position: absolute; inset: 0; z-index: -1; background: var(--primary); border-radius: var(--radius); opacity: 0.7; content: ""; } */
			/* @media (any-hover) {
				&:not(:hover) {
					&::before { opacity: 0; }
					.name { top: 88%; }
					.icon { opacity: 0; }
				}
				&:hover { --radius: 200px; }
				@media(prefers-reduced-motion: no-preference){
					&::before, .photo, .name, .icon{ transition: .3s; }
				}
			} */
			@media (any-hover) {
				.frame{ position: relative; }
				.frame::before { position: absolute; inset: 0; width: 1em; aspect-ratio: 1; margin: auto; font-size: clamp(44rem, calc(70 / var(--container) * 100vw + var(--font-offset)), 70rem); background: linear-gradient(#fff) no-repeat 50% / 37.14285714% 4rem, linear-gradient(#fff) no-repeat 50% / 4rem 37.14285714%, var(--primary); border-radius: 50%; box-shadow: 0 0 0 0.1428571429em rgb(from var(--primary) r g b / 0.2); opacity: 0; content: ""; }
				:is(&:hover, &:focus) {
					.name{ color: var(--primary); }
					.frame::before { opacity: 1; }
				}
			}
			@media (prefers-reduced-motion: no-preference) {
				.frame::before, .name-en, .name { transition: 0.3s; }
			}
		}
		.photo { position: relative; z-index: -2; display: block; width: 100%; height: auto; border-radius: var(--radius); object-fit: contain; aspect-ratio: 1; background: #fff; }
		/* .name { position: absolute; top: 30.8%; inset-inline: 0; font: 600 var(--font-size-20) var(--font-sans); text-align: center; translate: 0 -50%; text-wrap: balance; } */
		.name { margin-top: 1lh; font: 600 var(--font-size-20) var(--font-sans); text-align: center; text-wrap: balance; }
		.icon { position: absolute; top: 77.3%; inset-inline: 0; display: block; width: 2.8em; aspect-ratio: 1; margin: 0.72em auto 0; margin: auto; font-size: var(--font-size-25); background: linear-gradient(currentColor) no-repeat 50% / 37.14285714% 5.71428571%, linear-gradient(currentColor) no-repeat 50% / 5.71428571% 37.14285714%; border-radius: 50%; translate: 0 -50%; }
	}
	.section-gallery { padding-block: clamp(var(--section-block), calc(80 / var(--container) * 100vw), 80rem) clamp(var(--section-block), calc(115 / var(--container) * 100vw), 115rem);
		.heading-block { display: grid; grid-template: "eyebrow eyebrow" auto "heading link" 1fr / 1fr auto; align-items: center; }
		.shared-eyebrow { grid-area: eyebrow; }
		.shared-heading { grid-area: heading; }
		.shared-link { grid-area: link; translate: 0 -2%; }
		.swiper { margin-top: clamp(calc(var(--content-top) - 2px), calc(53 / var(--container) * 100vw), 53rem); padding-top: 2px; }
		.swiper-slide {
			@media (width >= 768px) { width: 23%;
				&:not(:last-child) { margin-right: 2.66666667%; }
			}
			@media (width < 768px) { width: 48.2%;
				&:not(:last-child) { margin-right: 3.7037037%; }
			}
		}
		.link { display: block; aspect-ratio: 345 / 240; border-radius: var(--radius); }
		.scrollbar { max-width: min(1000rem, 86%); height: 4rem; margin-top: 61rem; margin-top: 4.1%; margin-inline: auto; background: #e5e5e5; }
		.swiper-scrollbar-drag { color: #222; border-radius: 0; }
	}
}