@charset "utf-8";

:root {
	--shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	--sec-cont: 1080px;
	--btn-cont: 720px;
	--cont-blank: 64px;
	--sp-menu-bg: #05A858;
}

/*sp*/
@media (max-width:767px) {
	:root {
		--sec-cont: 335px;
		--cont-blank: 64px;
	}
}

main {
	max-width: 1920px;
	margin: auto;
}

/*animation*/
.animation {
	opacity: 0;
	translate: var(--offsetX, 0) var(--offsetY, 0);
}

@media (max-width:767px) {
	.animation {
		translate: var(--spOffsetX, var(--offsetX, 0)) var(--spOffsetY, var(--offsetY, 0));
	}
}

.animation.active {
	animation: common-animation var(--duration, 0.5s) var(--delay, 0s) ease-in-out forwards;
}

@keyframes common-animation {
	to {
		translate: 0 0;
		opacity: 1.0;
	}
}

/* PC表示（1025px以上） */
@media screen and (min-width: 1025px) {
	.pc {
		display: block;
	}

	.nopc,
	.tb,
	.s_tb,
	.s_tb_sp,
	.sp {
		display: none;
	}
}

/* タブレット（768px〜1024px） */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.tb {
		display: block;
	}

	.pc,
	.s_tb,
	.s_tb_sp,
	.sp {
		display: none;
	}
}

/* 小型タブレット（600px〜767px） */
@media screen and (min-width: 600px) and (max-width: 767px) {
	.s_tb {
		display: block;
	}

	.pc,
	.tb,
	.s_tb_sp,
	.sp,
	.no_s_tb_sp {
		display: none;
	}
}

/* スマホ_小型タブレット（〜767px） */
@media screen and (max-width: 767px) {
	.s_tb_sp {
		display: block;
	}

	.pc,
	.tb,
	.s_tb,
	.sp,
	.no_s_tb_sp {
		display: none;
	}
}

/* スマホ（〜599px） */
@media screen and (max-width: 599px) {
	.sp {
		display: block;
	}

	.pc,
	.tb,
	.s_tb,
	.nosp,
	.no_s_tb_sp {
		display: none;
	}
}