@charset "UTF-8";
/* =====================================================================
 * Fortune Shop TOPページ（ファーストビュー中心）
 * ===================================================================== */

/* -------------------- ファーストビュー -------------------- */
.fv {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* 背景画像（assets/img/fv-bg.jpg を差し替えて使用）。
	   読み込み前・失敗時はグラデーションが下地になる。 */
	background-color: #EEF6FF;
	background-image: url(../img/fv-bg.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

/* 文字の可読性を守る薄いオーバーレイ（写真差し替え時の保険） */
.fv::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.fv__bg { z-index: 1; }
.fv__inner { z-index: 2; }

/* 背景の光・雲・粒子 */
.fv__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* 空全体がゆっくり呼吸するグラデーション */
.fv__bg::before {
	content: "";
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(50% 60% at 22% 28%, rgba(174, 205, 245, .5) 0%, rgba(174, 205, 245, 0) 60%),
		radial-gradient(50% 60% at 80% 20%, rgba(255, 244, 214, .6) 0%, rgba(255, 244, 214, 0) 62%),
		radial-gradient(45% 55% at 55% 70%, rgba(216, 183, 90, .16) 0%, rgba(216, 183, 90, 0) 60%);
	mix-blend-mode: screen;
	animation: skyBreath 12s ease-in-out infinite alternate;
}

@keyframes skyBreath {
	0% { transform: translate3d(-2%, 0, 0) scale(1); opacity: .75; }
	50% { transform: translate3d(2%, 1.5%, 0) scale(1.1); opacity: 1; }
	100% { transform: translate3d(-1%, -1.5%, 0) scale(1.05); opacity: .85; }
}

/* 天頂のハロー（強く脈動する光の輪） */
.fv__halo {
	position: absolute;
	top: -26%;
	left: 50%;
	width: 68vw;
	height: 68vw;
	max-width: 980px;
	max-height: 980px;
	transform: translateX(-50%);
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0%, rgba(255, 250, 235, .55) 26%, rgba(216, 183, 90, .22) 46%, rgba(216, 183, 90, 0) 68%);
	mix-blend-mode: screen;
	animation: haloPulse 5s ease-in-out infinite;
}

@keyframes haloPulse {
	0%, 100% { transform: translateX(-50%) scale(.94); opacity: .7; }
	50% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

/* 差し込む光（放射・ゆったり回転） */
.fv__rays {
	position: absolute;
	top: -32%;
	left: 50%;
	width: 160%;
	height: 140%;
	transform-origin: 50% 0%;
	background:
		conic-gradient(from 180deg at 50% 0%,
			rgba(216, 183, 90, 0) 0deg,
			rgba(216, 183, 90, .2) 12deg,
			rgba(216, 183, 90, 0) 26deg,
			rgba(255, 255, 255, .26) 40deg,
			rgba(216, 183, 90, 0) 56deg,
			rgba(216, 183, 90, .18) 72deg,
			rgba(216, 183, 90, 0) 88deg,
			rgba(255, 255, 255, .28) 102deg,
			rgba(216, 183, 90, 0) 118deg,
			rgba(216, 183, 90, .18) 134deg,
			rgba(216, 183, 90, 0) 150deg,
			rgba(255, 255, 255, .2) 164deg,
			rgba(216, 183, 90, 0) 180deg);
	mix-blend-mode: screen;
	animation: raySway 10s ease-in-out infinite alternate, rayPulse 5s ease-in-out infinite;
}

@keyframes raySway {
	0% { transform: translateX(-50%) rotate(-6deg); }
	100% { transform: translateX(-50%) rotate(6deg); }
}

@keyframes rayPulse {
	0%, 100% { opacity: .5; }
	50% { opacity: 1; }
}

/* 横切る光のビーム（はっきり動く主役の演出） */
.fv__beam {
	position: absolute;
	top: -20%;
	height: 140%;
	width: 180px;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, .0) 0%,
		rgba(255, 252, 240, .55) 18%,
		rgba(255, 248, 228, .35) 50%,
		rgba(255, 255, 255, 0) 88%);
	filter: blur(16px);
	transform: rotate(14deg);
	mix-blend-mode: screen;
	animation: beamCross 11s var(--ease) infinite;
	opacity: 0;
}

.fv__beam--1 {
	animation-delay: 0s;
}

.fv__beam--2 {
	width: 110px;
	filter: blur(12px);
	animation-delay: 3.6s;
	animation-duration: 13s;
}

.fv__beam--3 {
	width: 240px;
	filter: blur(22px);
	animation-delay: 7.2s;
	animation-duration: 15s;
}

@keyframes beamCross {
	0% { left: -22%; opacity: 0; }
	12% { opacity: .9; }
	50% { opacity: .65; }
	88% { opacity: .9; }
	100% { left: 112%; opacity: 0; }
}

/* 雲 */
.fv__cloud {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%);
	filter: blur(10px);
}

.fv__cloud--1 {
	width: 50vw;
	height: 26vw;
	top: 54%;
	left: -10vw;
	animation: cloudDrift1 18s ease-in-out infinite alternate;
}

.fv__cloud--2 {
	width: 44vw;
	height: 22vw;
	top: 64%;
	right: -12vw;
	animation: cloudDrift2 22s ease-in-out infinite alternate;
}

.fv__cloud--3 {
	width: 64vw;
	height: 28vw;
	bottom: -12vw;
	left: 50%;
	transform: translateX(-50%);
	opacity: .9;
	animation: cloudDrift3 26s ease-in-out infinite alternate;
}

@keyframes cloudDrift1 {
	0% { transform: translate(0, 0) scale(1); opacity: .75; }
	100% { transform: translate(9vw, -3.5vw) scale(1.08); opacity: 1; }
}

@keyframes cloudDrift2 {
	0% { transform: translate(0, 0) scale(1); opacity: .7; }
	100% { transform: translate(-9vw, -4.5vw) scale(1.1); opacity: 1; }
}

@keyframes cloudDrift3 {
	0% { transform: translateX(-54%) translateY(0) scale(1); }
	100% { transform: translateX(-46%) translateY(-3vw) scale(1.06); }
}

/* 粒子 canvas */
.fv__particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* FV テキスト */
.fv__inner {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	padding-bottom: 120px;
}

.fv__lead {
	font-family: var(--font-mincho);
	font-size: 1rem;
	letter-spacing: .32em;
	color: var(--c-gold-3);
	margin-bottom: 28px;
}

.fv__title {
	font-family: var(--font-mincho);
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.55;
	letter-spacing: .08em;
	color: var(--c-navy);
	margin-bottom: 28px;
	text-shadow: 0 2px 20px rgba(255, 255, 255, .8);
}

.fv__sub {
	font-size: clamp(.95rem, 1.6vw, 1.1rem);
	line-height: 2.1;
	color: var(--c-charcoal);
	max-width: 40em;
	margin: 0 auto 44px;
}

.fv__cta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 40px;
}

.fv__sns {
	display: flex;
	justify-content: center;
	gap: 18px;
}

.fv__sns-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--c-gold);
	color: var(--c-navy);
	background: rgba(255, 255, 255, .6);
	transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}

.fv__sns-link:hover {
	background: var(--c-gold);
	color: #fff;
	transform: translateY(-3px);
}

/* スクロール誘導 */
.fv__scroll {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--c-gold-3);
}

.fv__scroll-text {
	font-family: var(--font-mincho);
	font-size: .72rem;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.fv__scroll-line {
	position: relative;
	width: 1px;
	height: 56px;
	background: rgba(182, 147, 59, .3);
	overflow: hidden;
}

.fv__scroll-line::after {
	content: "";
	position: absolute;
	top: -40%;
	left: 0;
	width: 100%;
	height: 40%;
	background: var(--c-gold);
	animation: scrollLine 2.2s var(--ease) infinite;
}

@keyframes scrollLine {
	0% { top: -40%; }
	100% { top: 100%; }
}

/* -------------------- サービスカード -------------------- */
.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.service-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--c-line);
	padding: 44px 32px 40px;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}



/* サービスカードの画像（カード幅いっぱいにブリード。角丸なし） */
.service-card__thumb {
	margin: -44px -32px 15px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-ivory);
	border-radius: 0;
}

.service-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform .8s var(--ease);
}

.service-card:hover .service-card__thumb img {
	transform: scale(1.05);
}

.service-card__no {
	display: block;
	font-family: "EB Garamond", serif;
	font-size: 1.8rem;
	color: var(--c-gold);
	letter-spacing: .1em;
	margin-bottom: 10px;
	line-height: 1.6;
}

.service-card__title {
	font-size: 1.35rem;
	color: var(--c-navy);
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-line);
}

.service-card__text {
	font-size: .9rem;
	color: var(--c-gray);
	line-height: 1.95;
	margin-bottom: 22px;
}

/* -------------------- レスポンシブ -------------------- */
@media screen and (max-width: 1024px) {
	.service-grid {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	.fv {
		min-height: 92vh;
		min-height: 92svh;
	}

	.fv__inner {
		padding-top: 40px;
		padding-bottom: 90px;
	}

	.fv__lead {
		font-size: .82rem;
		letter-spacing: .24em;
		margin-bottom: 20px;
	}

	.fv__title {
		font-size: clamp(1.6rem, 7vw, 2.1rem);
		margin-bottom: 22px;
	}

	.fv__sub {
		margin-bottom: 34px;
	}

	.fv__cta {
		flex-direction: column;
		gap: 12px;
		margin-bottom: 32px;
	}

	.fv__scroll {
		bottom: 16px;
	}
}