/* トップ：メインビジュアル（2.0.7〜）
   動画を画面幅いっぱいの背景にし、その上に見出しと検索ボックスを重ねる */

.hero { position: relative; display: block; isolation: isolate; }
.hero-r { position: absolute; inset: 0; min-height: 0; z-index: 0; }
.hero-r img, .hero-r video { object-position: 50% 40%; }
/* 文字が読めるよう、左側を暗くするグラデーション */
.hero-r::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 34, 42, .72) 0%, rgba(10, 34, 42, .5) 38%, rgba(10, 34, 42, .12) 70%, rgba(10, 34, 42, 0) 100%); pointer-events: none; }
.hero-l { position: relative; z-index: 1; display: block; }
.hero-t { max-width: 1160px; margin: 0 auto; padding: clamp(40px, 5vw, 72px) clamp(16px, 3.2vw, 40px) clamp(56px, 6vw, 88px); gap: 22px; }
.hero-t .en { color: #BDEBF2; }
.hero h1.jk-hero-h1 { color: #FFFFFF; font-size: clamp(32px, 4.4vw, 54px); text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.jk-hero-h1 span { display: inline-block; }
.hero-t > .muted { color: rgba(255, 255, 255, .92) !important; margin: 0; max-width: 40em !important; }
.hero-t .hs { width: 100%; max-width: 560px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
.hero-t .hs-links { max-width: 560px; }
.hero-t .hs-links a { color: #FFFFFF; }
.hero-t .hs-links a:hover { color: #BDEBF2; }
/* 校舎数は右下、動画の再生ボタンは右上 */
.hero-badge { left: auto; right: 0; z-index: 1; }
.hvbtn { top: 12px; bottom: auto; }

@media (max-width: 640px) {
	.hero-r::after { background: linear-gradient(180deg, rgba(10, 34, 42, .62) 0%, rgba(10, 34, 42, .5) 55%, rgba(10, 34, 42, .7) 100%); }
	.hero-t { padding: 28px 16px 84px; gap: 16px; }
	.hero h1.jk-hero-h1 { font-size: 30px; }
	.hero-badge { padding: 10px 14px; }
}