@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
/*------------------------------------------------------------
	common
------------------------------------------------------------*/
.secBox {
	width: 100%;
	height: 100vh;
	background: url(../../img/common/bg.jpg) no-repeat center center / cover;
}
.online {
	position: fixed;
	bottom: -378px;
	right: -495px;
	width: 769px;
}
.online a {
	display: block;
	position: relative;
}
.online .hover {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}
@media all and (min-width: 897px) {
	.online a:hover .on {
		opacity: 0;
	}
	.online a:hover .hover {
		opacity: 1;
	}
}
@media all and (max-width: 896px) {
	.secBox {
		background-image: url(../../img/common/sp_bg.png);
	}
	.online {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 106px;
	}
	.online .hover {
		display: none;
	}
}
.fadeIn {
	opacity: 0;
	transition: all 3.5s;
}
.fadeIn.visible {
	opacity: 1;
}
.fadeInUp {
	opacity: 0;
	transform: translate3d(0, 25px, 0);
	transition: all 1.5s 0.2s;
}
.fadeInUp.visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
@media all and (max-width: 374px) {
	.online {
		width: 90px;
	}
}
@media all and (max-width: 896px) and (max-height: 400px) {
	.online {
		width: 95px;
	}
}