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



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

base

------------------------------------------- */
:root {
	--red: #b6163a;
	--blu: #151b63;
	--brn: #824c00;
	--beige: #e0d9c9;
}
body {
	background: url(../img/top/texture.jpg) center top;
	background-size: 80rem auto;
	color: #000;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}
a {
	color: #000;
}



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

font-size

------------------------------------------- */
html {
    font-size: 0.833vw;
}
@media screen and (max-width: 768px) {
    html {
        font-size: 1.303vw;
    }	
}
@media screen and (max-width: 540px) {
    html {
        font-size: 1.851vw;
    }	
}
@media screen and (max-width: 414px) {
    html {
        font-size: 2.415vw;
    }	
}
@media screen and (min-width: 1401px) {
    html {
		font-size: 62.5%;
    }	
}



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

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);
	}
}
.delay-1 { animation-delay: 0.2s !important; }
.delay-2 { animation-delay: 0.35s !important; }
.delay-3 { animation-delay: 0.5s !important; }
.delay-4 { animation-delay: 0.65s !important; }
.delay-5 { animation-delay: 0.8s !important; }