/*
 * スタートアップ風の演出（assets/js/startup.js とセット）
 * .fai-js は JS が動いた場合にのみ <html> に付く。JS 無効時は通常表示。
 */
:root {
	--fai-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fai-accent: #509197;
}

/* ---------- スクロール進捗バー ---------- */
.fai-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 1100;
	pointer-events: none;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--vk-color-primary, #24293a), var(--fai-accent));
	opacity: 0;
	transition: opacity 0.3s;
}
.fai-scrolled .fai-progress {
	opacity: 1;
}
.admin-bar .fai-progress {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .fai-progress {
		top: 46px;
	}
}

/* ---------- ヘッダー（Lightning のスクロール固定時に半透明ガラス風） ---------- */
.site-header {
	transition: box-shadow 0.3s var(--fai-ease), background-color 0.3s;
}
.header_scrolled .site-header {
	background-color: rgba(255, 255, 255, 0.9) !important;
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 8px 30px rgba(36, 41, 58, 0.08);
}
/* 固定時もロゴを小さく表示する（親テーマは非表示にする） */
.header_scrolled .site-header-logo {
	display: block;
	width: auto;
	padding-top: 0.45rem;
	margin-bottom: 0.45rem;
}
.header_scrolled .site-header-logo img {
	max-height: 32px;
}
.header_scrolled .site-header--layout--nav-float .site-header-container {
	align-items: center;
}
.header_scrolled .site-header .global-nav {
	margin-right: 0;
}

/* グローバルナビのホバー下線をなめらかに */
.global-nav-list > li:before {
	transition: width 0.3s var(--fai-ease), left 0.3s var(--fai-ease);
}

/* ---------- ヒーロー ---------- */
/* スライダー項目の左右パディングを無くし、動画をコンテンツ幅いっぱい（PRODUCT セクションと同じ幅）にする */
.home .vk_slider_item.vk_slider_item-paddingLR-use {
	padding-left: 0;
	padding-right: 0;
}
.home .vk_slider .wp-block-cover {
	overflow: hidden;
	/* 動画が広がった分、文字が端に寄りすぎないよう内側の余白を確保 */
	padding-left: clamp(18px, 4vw, 56px);
	padding-right: clamp(18px, 4vw, 56px);
}
/* 動画をゆっくりズーム（Ken Burns） */
.fai-js .home .vk_slider .wp-block-cover__video-background {
	animation: fai-kenburns 28s ease-in-out infinite alternate;
}
@keyframes fai-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
/* 文字の可読性を上げる薄いグラデーション */
.home .vk_slider .wp-block-cover__background.has-background-dim-0 {
	opacity: 1;
	background: linear-gradient(180deg, rgba(36, 41, 58, 0.1) 0%, rgba(36, 41, 58, 0.35) 100%) !important;
}
/* キャッチコピーを大きく（.has-large-font-size が !important なので上書きも !important） */
.home .vk_slider .wp-block-cover__inner-container > p:first-child {
	font-size: clamp(2.1rem, 5.2vw, 3.6rem) !important;
	line-height: 1.2;
	letter-spacing: 0.04em;
	margin-bottom: 0.6em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
/* about us リンクをピル型ボタンに */
.home .vk_slider .wp-block-cover__inner-container > p:last-child a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1.6em;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	color: #fff !important;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s, transform 0.3s var(--fai-ease);
}
.home .vk_slider .wp-block-cover__inner-container > p:last-child a::after {
	content: "\2192";
	transition: transform 0.3s var(--fai-ease);
}
.home .vk_slider .wp-block-cover__inner-container > p:last-child a:hover {
	background-color: #fff;
	color: var(--vk-color-primary, #24293a) !important;
	transform: translateY(-2px);
}
.home .vk_slider .wp-block-cover__inner-container > p:last-child a:hover::after {
	transform: translateX(4px);
}
/* 段階的フェードイン */
.fai-js .fai-hero-item {
	opacity: 0;
	translate: 0 28px;
}
.fai-js.fai-hero-ready .fai-hero-item {
	opacity: 1;
	translate: 0 0;
	transition: opacity 0.9s var(--fai-ease) var(--fai-delay, 0s), translate 0.9s var(--fai-ease) var(--fai-delay, 0s);
}
/* スクロール誘導 */
.fai-scroll-cue {
	position: absolute;
	right: 28px; /* CTA ボタン列（左寄せ）と重ならないよう右下に置く */
	bottom: 24px;
	z-index: 5;
	width: 26px;
	height: 42px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.6s var(--fai-ease) 1.4s;
}
.fai-hero-ready .fai-scroll-cue {
	opacity: 0.9;
}
.fai-scroll-cue span {
	position: absolute;
	left: 50%;
	top: 7px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: #fff;
	animation: fai-cue 1.8s ease-in-out infinite;
}
.fai-scrolled .fai-scroll-cue {
	opacity: 0;
	pointer-events: none;
	transition-delay: 0s;
}
@keyframes fai-cue {
	0%   { opacity: 1; translate: 0 0; }
	70%  { opacity: 0; translate: 0 14px; }
	100% { opacity: 0; translate: 0 14px; }
}

/* ---------- スクロール連動フェードイン ---------- */
.fai-js .fai-reveal {
	opacity: 0;
	translate: 0 32px;
	transition: opacity 0.8s var(--fai-ease) var(--fai-delay, 0s), translate 0.8s var(--fai-ease) var(--fai-delay, 0s);
}
.fai-js .fai-reveal--from-left {
	translate: -40px 0;
}
.fai-js .fai-reveal--from-right {
	translate: 40px 0;
}
.fai-js .fai-reveal.is-visible {
	opacity: 1;
	translate: 0 0;
}

/* ---------- ホバーの細かな動き ---------- */
.home .wp-block-button__link,
.home .news .wp-element-button {
	transition: transform 0.25s var(--fai-ease), box-shadow 0.25s var(--fai-ease), background-color 0.25s, color 0.25s;
}
.home .wp-block-button__link:hover,
.home .news .wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(36, 41, 58, 0.18);
}
.home .wp-block-media-text__media {
	overflow: hidden;
	border-radius: 12px;
}
.home .wp-block-media-text__media img {
	transition: transform 0.6s var(--fai-ease);
}
.home .wp-block-media-text:hover .wp-block-media-text__media img {
	transform: scale(1.03);
}
.home .news li {
	transition: translate 0.25s var(--fai-ease);
}
.home .news li:hover {
	translate: 4px 0;
}

/* ---------- 動きを減らす設定の閲覧者 ---------- */
@media (prefers-reduced-motion: reduce) {
	.fai-js .fai-reveal,
	.fai-js .fai-hero-item {
		opacity: 1;
		translate: 0 0;
		transition: none;
	}
	.home .vk_slider .wp-block-cover__video-background,
	.fai-scroll-cue span {
		animation: none;
	}
}