@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');



/* -------------------------------------------

base

------------------------------------------- */
:root {
	--pink: #e4007f;
}
html {
	position: relative;
}
html::before,
html::after {
	content: "";
	width: 100%;
	height: 6rem;
	pointer-events: none;
	position: fixed;
	left: 0;
}
html::before {
	background: url(../img/line-1.png) no-repeat left top;
	background-size: 100% auto;
	top: 0;
}
html::after {
	background: url(../img/line-1.png) no-repeat left bottom;
	background-size: 100% auto;
	bottom: 0;
	z-index: -1;
}
@media screen and (max-width: 768px) {
	html::before,
	html::after {
		display: none;
	}
}
body {
	color: #fff;
	font-family: "M PLUS 1", sans-serif;
	font-size: 1.6rem;
	letter-spacing: 0.06em;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	position: relative;
}
body::before {
	content: "";
	width: 100%;
	height: 100%;
	background: url(../img/body-bg.jpg) no-repeat center / cover;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -2;
}
@media screen and (max-width: 768px) {
	body {
		font-size: 1.5rem;
	}
}
a {
	color: #fff;
}



/* -------------------------------------------

display

------------------------------------------- */
@media screen and (min-width: 769px) {
	.sp {
		display: none !important;
	}
}
@media screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
}



/* -------------------------------------------

fade

------------------------------------------- */
.fade {
	opacity: 0;
	transform: translateY(2rem);
}
.fade.is-animation {
    animation: fade 0.5s ease;
    animation-fill-mode: both;
}
@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}