@charset "utf-8";

/* トップページ用CSS */

/*--------------------------------------
ページ背景アニメーション
---------------------------------------*/
.bgImg {
	position: fixed;
    top: 0;
    left: 0;
	z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}
.bgImg__listItem {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: none;
}
.bgImg__listItem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bgImg__listItem.s_active > img {
	animation-name: fade_active;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration: 5s;
	backface-visibility: hidden;
}
@keyframes fade_active {
	0%   { transform: scale(1, 1); }
	100% { transform: scale(1.05, 1.05); }
}
.bgMovie {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 2s;
}
.bgMovie.s_active {
	opacity: 0.15;
}
/*--------------------------------------
ファーストビューボタン
---------------------------------------*/
.fvBtnArea {
	display: flex;
	align-items: center;
	flex-direction: column;
	row-gap: 20px;
}
@media screen and (min-width: 768px) {
	.fvBtnArea {
		flex-direction: row;
		column-gap: 40px;
	}
}
.fvBtnArea__item {
	max-width: 300px;
	width: 100%;
}
@media screen and (min-width: 768px) {
	.fvBtnArea__item {
		max-width: 320px;
	}
}
.fvBtn {
	position: relative;
	z-index: 0;
	padding: 14px 25px 11px;
	width: 100%;
	text-align: center;
	border-radius: 9999px;
	background: var(--gradation-colorBlue);
}
.fvBtn::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	opacity: 0;
	border-radius: 9999px;
	background: var(--gradation-hoverColorBlue);
	transition: opacity 0.3s;
}
.fvBtn span {
	display: block;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--primary-white);
}
.fvBtn span::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--primary-white);
}
@media screen and (min-width: 768px) {
	.fvBtn {
		padding-block: 16px 12px;
	}
	.fvBtn span {
		font-size: 2rem;
	}
}
.fvBtn:focus-visible::after {
	opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
	.fvBtn:hover::after {
		opacity: 1;
	}
}
.copyRightArea {
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
}
.copyRightArea small {
	font-size: 1.2rem;
}