/* ==============================================
   メインビジュアル リニューアル案 v2（2026-10-01）
   プレビューページ専用。本番の style.css は触っていません。
   背景は AI生成画像（ChatGPT / gpt-image-2）。
   ブランドカラー: 青#0678ba / 赤#d72f36 / 紺#1c2b3a / 黄#f7e921
   ============================================== */

/* このプレビューページ限定の保険：どこかの要素が横にはみ出しても
   ページ全体の横スクロールだけは発生させない（htmlとbody両方に設定） */
html{overflow-x:hidden;}
body{overflow-x:hidden;}

.mv3{
	position:relative;
	overflow:hidden;
	min-height:94vh;
	max-height:800px;
	display:flex;
	align-items:center;
	background:#0a1628;
}
.mv3-bg{
	position:absolute;
	inset:0;
	overflow:hidden;
}
.mv3-bg-img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:62% center;
	transform:scale(1.06);
	animation:mv3BgZoom 16s ease-in-out infinite alternate;
}
@keyframes mv3BgZoom{
	from{ transform:scale(1.06) translateX(0); }
	to{ transform:scale(1.14) translateX(-1%); }
}
.mv3-overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(100deg, rgba(5,14,30,.88) 0%, rgba(6,18,38,.72) 32%, rgba(6,18,38,.28) 58%, rgba(6,18,38,.08) 78%),
		linear-gradient(0deg, rgba(5,12,26,.55) 0%, rgba(5,12,26,0) 28%);
}

.mv3-inner{
	position:relative;
	z-index:2;
	max-width:1360px;
	width:100%;
	margin:0 auto;
	padding:0 6% 0 6%;
	box-sizing:border-box;
}
.mv3-content{
	max-width:680px;
	padding-top:40px;
}
.mv3-ribbon{
	display:inline-flex;
	align-items:center;
	gap:10px;
	color:#fff;
	font-size:13px;
	font-weight:700;
	letter-spacing:4px;
	padding:9px 4px;
	margin-bottom:26px;
	opacity:0;
	animation:mv3Rise .7s ease forwards .2s;
}
.mv3-ribbon:before{
	content:"";
	width:34px;
	height:2px;
	background:#f7e921;
	display:inline-block;
}
.mv3-headline{
	margin:0 0 28px;
	font-family:'Zen Kaku Gothic New','Noto Sans JP',"Hiragino Sans","Yu Gothic",sans-serif;
	font-weight:700;
	color:#fff;
	line-height:1.5;
	letter-spacing:.5px;
}
.mv3-headline .mv3-line{
	display:block;
	opacity:0;
	transform:translateY(22px);
	animation:mv3Rise .8s cubic-bezier(.16,.84,.26,1) forwards;
}
.mv3-l1{
	font-size:42px;
	font-weight:900;
	color:#ffe169;
	text-shadow:0 2px 18px rgba(0,0,0,.35);
	animation-delay:.45s !important;
	margin-bottom:6px;
}
.mv3-l2{
	font-size:21px;
	font-weight:500;
	color:#eaf2fb;
	animation-delay:.68s !important;
}
.mv3-l3{
	font-size:34px;
	font-weight:800;
	animation-delay:.88s !important;
}
.mv3-sub{
	display:inline-block;
	color:#1c2b3a;
	background:#ffffff;
	font-weight:800;
	font-size:19px;
	padding:12px 26px;
	border-radius:999px;
	margin:0 0 40px;
	box-shadow:0 10px 26px rgba(0,0,0,.25);
	opacity:0;
	transform:translateY(18px);
	animation:mv3Rise .7s cubic-bezier(.16,.84,.26,1) forwards 1.12s;
}
.mv3-sub:before{
	content:"\2713";
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	border-radius:50%;
	background:#0678ba;
	color:#fff;
	font-size:13px;
	font-weight:900;
	margin-right:10px;
	vertical-align:middle;
}
.mv3-actions{
	display:flex;
	align-items:center;
	gap:22px;
	flex-wrap:wrap;
	opacity:0;
	transform:translateY(18px);
	animation:mv3Rise .7s cubic-bezier(.16,.84,.26,1) forwards 1.34s;
}
.mv3-cta{
	display:inline-flex;
	align-items:center;
	gap:12px;
	background:#d72f36;
	color:#fff;
	font-weight:700;
	font-size:17px;
	padding:19px 40px;
	border-radius:999px;
	text-decoration:none;
	box-shadow:0 14px 30px rgba(215,47,54,.4);
	transition:transform .18s ease,box-shadow .18s ease;
}
.mv3-cta:hover{
	transform:translateY(-3px);
	box-shadow:0 18px 34px rgba(215,47,54,.5);
	color:#fff;
}
.mv3-cta svg{width:18px;height:18px;flex:none;}
.mv3-tel{
	display:inline-flex;
	flex-direction:column;
	color:#fff;
	text-decoration:none;
	line-height:1.3;
}
.mv3-tel small{
	font-size:12px;
	color:#bcd4ea;
	font-weight:500;
}
.mv3-tel strong{
	font-size:22px;
	font-weight:800;
	letter-spacing:.5px;
}

/* 登場アニメーション(opacity+translateY)と浮遊アニメーション(translateY)が
   同じtransformプロパティで競合し止まって見えるバグがあったため、
   ラッパー(登場)と画像本体(浮遊)で担当を分離している。 */
.mv3-mascot-wrap{
	position:absolute;
	right:4.5%;
	bottom:0;
	width:168px;
	z-index:3;
}
.mv3-mascot{
	display:block;
	width:168px;
	filter:drop-shadow(0 16px 18px rgba(0,0,0,.3));
	animation:mv3Float 3.4s ease-in-out infinite;
}
@keyframes mv3Float{
	0%,100%{ transform:translateY(0); }
	50%{ transform:translateY(-12px); }
}
@keyframes mv3Rise{
	to{ opacity:1; transform:translateY(0); }
}

.mv3-scroll{
	position:absolute;
	left:50%;
	bottom:26px;
	transform:translateX(-50%);
	z-index:3;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	color:#fff;
	font-size:11px;
	letter-spacing:2px;
	opacity:0;
	animation:mv3Rise 1s ease forwards 1.8s;
}
.mv3-scroll span{
	width:22px;
	height:36px;
	border:2px solid rgba(255,255,255,.75);
	border-radius:999px;
	position:relative;
}
.mv3-scroll span:before{
	content:"";
	position:absolute;
	top:6px;
	left:50%;
	width:4px;
	height:4px;
	background:#fff;
	border-radius:50%;
	transform:translateX(-50%);
	animation:mv3ScrollDot 1.6s ease infinite;
}
@keyframes mv3ScrollDot{
	0%{ top:6px; opacity:1; }
	70%{ top:20px; opacity:0; }
	100%{ top:20px; opacity:0; }
}

/* ---------- タブレット（768〜999px） ---------- */
@media only screen and (min-width:768px) and (max-width:999px){
	.mv3{min-height:640px;}
	.mv3-l1{font-size:34px;}
	.mv3-l2{font-size:18px;}
	.mv3-l3{font-size:27px;}
	.mv3-mascot{width:120px;}
}

/* ---------- SP（〜767px） ----------
   2026-10-05 改訂2：写真を縦長に大きく敷き、人物を上部に大きく見せる。
   写真の下半分から薄めの紺グラデーションをかけ、その上に白文字を載せる。
   グラデーションの終点（写真の下端）と .mv3 の背景色を同色にして継ぎ目を消す。 */
@media only screen and (max-width:767px){
	.mv3{
		min-height:0;
		max-height:none;
		height:auto;
		overflow:hidden;
		padding:0;
		display:block;
		background:#2a4f78;
	}
	.mv3-bg{
		position:absolute;
		inset:auto;
		top:0;
		left:0;
		width:100%;
		height:128vw;
		max-height:620px;
	}
	.mv3-bg-img{
		object-position:94% 0%;
		animation:none;
		transform:none;
	}
	.mv3-overlay{
		background:linear-gradient(180deg,
			rgba(42,79,120,0) 0%,
			rgba(42,79,120,0) 42%,
			rgba(42,79,120,.45) 60%,
			rgba(42,79,120,.82) 80%,
			#2a4f78 100%);
	}
	.mv3-inner{
		position:relative;
		padding:min(76vw,370px) 6% 38px;
		margin-top:0;
	}
	.mv3-content{padding-top:0;max-width:none;}
	.mv3-ribbon{margin-bottom:10px;font-size:11px;letter-spacing:2px;text-shadow:0 1px 6px rgba(0,0,0,.4);}
	.mv3-ribbon:before{width:22px;}
	.mv3-headline{margin-bottom:16px;text-shadow:0 2px 10px rgba(10,25,45,.55);}
	.mv3-l1{font-size:27px;}
	.mv3-l2{font-size:clamp(11px,3.3vw,14px);white-space:nowrap;}
	.mv3-l3{font-size:21px;}
	.mv3-sub{font-size:14px;padding:9px 16px;margin-bottom:22px;}
	.mv3-actions{
		flex-direction:column;
		align-items:stretch;
		gap:12px;
		width:100%;
	}
	.mv3-cta{
		justify-content:center;
		width:100%;
		box-sizing:border-box;
		padding:17px 10px;
		font-size:15px;
	}
	.mv3-tel{align-items:center;}
	.mv3-tel small{color:#d6e6f5;}
	/* 直下の補助金セクションに同じキャラクターがいるため、SPのMVでは出さない */
	.mv3-mascot-wrap{display:none;}
	.mv3-scroll{display:none;}
}

/* ---------- プレビューページ全体の注記バー ---------- */
.mv2-preview-note{
	background:#fff6d6;
	border-bottom:2px dashed #e0b400;
	color:#7a5b00;
	text-align:center;
	font-size:14px;
	padding:10px 16px;
	position:relative;
	z-index:10;
}
.mv2-preview-note b{color:#bc272d;}