/* =========================================================
   トップページFV（page_front.php 専用）
   ・トップだけテーマのヘッダーと旧FV(#main_img)を隠し、FV専用ヘッダーを重ねる
   ・他のセクション／他ページには影響しない（すべて .ec- 接頭辞）
   ========================================================= */
:root {
	--ec-navy: #0e2c5c;
	--ec-orange: #f2652d;
	--ec-bluegray: #6c8eae;
	--ec-head-h: 90px;
	--ec-hand: "Zen Kurenaido", "Klee One", "Hiragino Maru Gothic ProN", sans-serif;
	--ec-en: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* テーマ側の旧ヘッダー・旧FVはトップでは非表示 */
body.front-top-page #header,
body.front-top-page #main_img { display: none !important; }

/* ---------- FV本体（全幅） ---------- */
.ec-fv {
	position: relative;
	width: 100%;
	height: clamp(640px, 94vh, 960px);
	overflow: hidden;
	background: var(--ec-bluegray);
	color: #fff;
}
.ec-fv *, .ec-fv *::before, .ec-fv *::after, .ec-drawer, .ec-drawer * { box-sizing: border-box; }

/* 背景画像レイヤー */
.ec-fv__bg { position: absolute; inset: 0; z-index: 0; }
.ec-fv__bg img {
	display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: right center;
	filter: saturate(.72) brightness(.97);
}
/* 左側：文字を読みやすくするブルーグレーの半透明レイヤー */
.ec-fv__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(64, 99, 132, .58) 0%, rgba(64, 99, 132, .40) 38%, rgba(64, 99, 132, .08) 60%, rgba(64, 99, 132, 0) 70%);
}

/* 斜めの幾何学レイヤー（PCは素材の模様を活かして控えめ、SPで強める） */
.ec-fv__geo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ec-fv__geo span { position: absolute; inset: 0; }
.ec-fv__geo1 { background: rgba(255, 255, 255, .06); clip-path: polygon(0 62%, 34% 100%, 0 100%); }
.ec-fv__geo2 { display: none; }
.ec-fv__geo3 { display: none; }

/* ---------- ヘッダー（FVに重ねる・追従） ---------- */
.ec-head {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
	height: var(--ec-head-h);
	background: transparent;
	transition: background-color .3s ease, box-shadow .3s ease;
}
body.admin-bar .ec-head { top: 32px; }
.ec-head.is-scrolled { background: rgba(14, 44, 92, .94); box-shadow: 0 2px 14px rgba(0, 0, 0, .12); }
.ec-head__inner {
	height: 100%; padding: 0 clamp(20px, 2.8vw, 48px);
	display: flex; align-items: center; gap: clamp(20px, 3vw, 56px);
}
.ec-head__logo {
	flex-shrink: 0;
	font-family: var(--ec-en); font-weight: 500; font-size: clamp(22px, 1.9vw, 32px);
	letter-spacing: .06em; line-height: 1; color: #fff !important; text-decoration: none !important;
	white-space: nowrap;
}
.ec-head__nav { flex: 1; }
.ec-head__nav ul { display: flex; gap: clamp(20px, 2.6vw, 48px); margin: 0; padding: 0; list-style: none; }
.ec-head__nav li { margin: 0; padding: 0; list-style: none; }
.ec-head__nav a {
	position: relative; display: block; padding: 8px 0;
	font-size: clamp(14px, 1.05vw, 18px); font-weight: 700; letter-spacing: .06em; line-height: 1.4;
	color: #fff !important; text-decoration: none !important; white-space: nowrap;
	text-shadow: 0 1px 6px rgba(20, 50, 80, .25);
}
.ec-head__nav a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.ec-head__nav a:hover::after { transform: scaleX(1); }
.ec-head__btns { display: flex; gap: 12px; flex-shrink: 0; }
.ec-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 54px; padding: 0 clamp(18px, 1.8vw, 32px); border-radius: 6px;
	font-size: clamp(14px, 1.05vw, 17px); font-weight: 700; letter-spacing: .06em; line-height: 1.3;
	color: #fff !important; text-decoration: none !important; white-space: nowrap;
	transition: background-color .25s ease, transform .25s ease;
}
.ec-btn--navy { background: var(--ec-navy); }
.ec-btn--navy:hover { background: #1b4385; }
.ec-btn--orange { background: var(--ec-orange); }
.ec-btn--orange:hover { background: #ff7d47; }
.ec-head__burger { display: none; }

/* ---------- コピー ---------- */
.ec-fv__inner {
	position: relative; z-index: 2; height: 100%;
	display: flex; align-items: center;
	padding: var(--ec-head-h) 0 0 clamp(24px, 7vw, 140px);
}
.ec-fv__copy { max-width: 860px; }
.ec-fv__catch {
	margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
	font-family: var(--ec-hand); font-weight: 400;
	font-size: clamp(46px, 5.3vw, 98px); line-height: 1.32; letter-spacing: .08em;
	color: #fff; text-shadow: 0 2px 14px rgba(30, 60, 92, .22);
}
.ec-fv__catch::before, .ec-fv__catch::after { display: none !important; }
.ec-fv__catch span { display: block; white-space: nowrap; }
.ec-fv__l2 { padding-left: .62em; }
.ec-fv__line {
	display: block; width: clamp(300px, 32vw, 600px); height: clamp(18px, 1.6vw, 28px);
	margin: .2em 0 0 clamp(36px, 3.4vw, 64px);
}
.ec-fv__sub {
	margin: clamp(28px, 4.4vh, 56px) 0 0 !important; padding: 0;
	font-size: clamp(20px, 1.95vw, 34px); font-weight: 700; line-height: 1.6; letter-spacing: .08em;
	color: #fff; text-shadow: 0 1px 8px rgba(30, 60, 92, .25);
}
.ec-fv__text {
	margin: clamp(14px, 2.2vh, 26px) 0 0 !important; padding: 0;
	font-size: clamp(15px, 1.25vw, 22px); font-weight: 500; line-height: 1.9; letter-spacing: .1em;
	color: #fff; text-shadow: 0 1px 8px rgba(30, 60, 92, .25);
}

/* ---------- SPメニュー ---------- */
.ec-drawer {
	position: fixed; inset: 0; z-index: 999;
	padding: calc(var(--ec-head-h) + 16px) 24px 40px;
	background: rgba(14, 44, 92, .97); color: #fff;
	overflow-y: auto;
	opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
body.admin-bar .ec-drawer { top: 46px; }
.ec-drawer.is-open { opacity: 1; visibility: visible; }
.ec-drawer ul { margin: 0 0 28px; padding: 0; list-style: none; }
.ec-drawer li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.ec-drawer li a { display: block; padding: 18px 4px; font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #fff !important; text-decoration: none !important; }
.ec-drawer__btns { display: grid; gap: 12px; }
.ec-drawer__btns .ec-btn { min-height: 56px; font-size: 16px; }
.ec-drawer__btns .ec-btn--navy { background: #fff; color: var(--ec-navy) !important; }
body.ec-menu-open { overflow: hidden; }

/* =========================================================
   タブレット：ナビをハンバーガーへ
   ========================================================= */
@media (max-width: 1180px) {
	.ec-head__nav, .ec-head__btns { display: none; }
	.ec-head__inner { justify-content: space-between; }
	.ec-head__burger {
		display: flex; flex-direction: column; justify-content: center; gap: 8px;
		width: 48px; height: 48px; padding: 0 6px; margin: 0;
		background: transparent; border: 0; cursor: pointer;
	}
	.ec-head__burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
	.ec-head__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
	.ec-head__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.ec-head__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
}

/* =========================================================
   スマホ（768px以下）
   ========================================================= */
@media (max-width: 768px) {
	:root { --ec-head-h: 80px; }
	body.admin-bar .ec-head { top: 46px; }

	.ec-fv { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
	.ec-head__inner { padding: 0 20px; }
	.ec-head__logo { font-size: 21px; letter-spacing: .05em; }

	/* 写真：上部〜中段に大きく、人物は右寄せ。下はブルーグレーへなじませる */
	.ec-fv__bg { bottom: auto; height: 76%; top: 0; }
	.ec-fv__bg img { object-position: 72% 0; }
	.ec-fv__bg::after {
		background:
			linear-gradient(180deg, rgba(108, 142, 174, 0) 52%, rgba(108, 142, 174, .85) 88%, var(--ec-bluegray) 100%),
			linear-gradient(90deg, rgba(64, 99, 132, .55) 0%, rgba(64, 99, 132, .22) 55%, rgba(64, 99, 132, 0) 80%);
	}

	/* 斜めの幾何学（参考：左下へ抜ける半透明の面） */
	.ec-fv__geo1 { background: rgba(84, 118, 150, .55); clip-path: polygon(0 30%, 100% 78%, 100% 100%, 0 100%); }
	.ec-fv__geo2 { display: block; background: rgba(255, 255, 255, .10); clip-path: polygon(0 0, 62% 0, 0 38%); }
	.ec-fv__geo3 { display: block; background: rgba(60, 94, 128, .35); clip-path: polygon(0 56%, 60% 100%, 0 100%); }

	/* 文字：左寄せ・下寄り（人物と一部重なる） */
	.ec-fv__inner {
		flex: 1; height: auto; align-items: flex-end;
		padding: calc(var(--ec-head-h) + 34vh) 20px 44px;
		padding: calc(var(--ec-head-h) + 34svh) 20px 44px;
	}
	.ec-fv__copy { width: 100%; }
	.ec-fv__catch { font-size: clamp(36px, 10.6vw, 48px); line-height: 1.38; letter-spacing: .05em; text-shadow: 0 2px 12px rgba(30, 60, 92, .35); }
	.ec-fv__l2 { padding-left: .5em; }
	.ec-fv__line { width: 76%; height: 18px; margin: .15em 0 0 6%; }
	.ec-fv__sub { margin-top: 26px !important; font-size: clamp(17px, 5vw, 21px); letter-spacing: .05em; line-height: 1.6; }
	.ec-fv__text { margin-top: 14px !important; font-size: clamp(13.5px, 3.8vw, 15px); line-height: 1.8; letter-spacing: .06em; }
	.ec-drawer { padding-top: calc(var(--ec-head-h) + 8px); }
}