/* value */
 :root {
	 --border-radius: clamp(0.625rem, 1.25rem, 1.25rem);
	 --padding: clamp(1rem, 1.75rem, 1.75rem);
	 --header_h: calc(calc(var(--padding) * 2) + 1.6rem);
	 --vl-color1: #640000;
	 --vl-color2: #444;
	 --vl-color3: #ffffff66;
	 --vl-dark1: #1d1d1d;
	 --duration: 300ms;
	 --duration-1: 800ms;
	 --animate: ease-in-out;
	 --duration-fast: 100ms;
	 --delay: 400ms;
	 --delay-1: 800ms;
}
 html {
	 scroll-behavior: smooth;
	 transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0s;
	 background-color: #000;
}
 body {
	 font-size: 14px;
	 //font-family: monospace;
	 font-family:  chillax, "Zen Kaku Gothic New", yakuhanjp, -apple-system, blinkmacsystemfont, "Helvetica Neue", hiragino sans, "\30d2\30e9\30ae\30ce\89d2\30b4  ProN W3", hiragino kaku gothic pron, "Yu Gothic", yugothic, verdana, meiryo, "M+ 1p", sans-serif;
	 font-weight: 400;
	 font-variant: slashed-zero;
	 line-height: 1.4;
	 letter-spacing: 0.015em;
	 background-image: linear-gradient(0deg, #000000ad 0%, #000000ad 100%), url(../img/pattern.gif);
}
 button {
	 all: unset;
}
 section {
	 padding: 6rem 0;
}
 button {
	 text-decoration: none;
	 color: #fff;
	 transition: all var(--duration) var(--animate);
	/*cursor: crosshair;
	*/
}
 a {
	 text-decoration: none;
	 color: #ffffff;
	 transition: all var(--duration) var(--animate);
}
 a:hover {
	 color: #fff;
}
 .bg-dark {
	 background-color: #000 !important;
}
 .bg-white {
	 background-color: #fff !important;
}
 .bg-vl1 {
	 background: var(--vl-color1) !important;
}
 .bg-vl2 {
	 background: var(--vl-color2) !important;
}
 .text-vl1 {
	 color: var(--vl-color1);
}
 .text-vl2 {
	 color: var(--vl-color2);
}
 .text-vl3 {
	 color: var(--vl-color3);
}
 .text-shadow {
	 text-shadow: 0 0 6px #3b3b3b85;
}
 .btn-vl1 {
	 font-size: 1rem;
	 font-weight: 400;
	 color: #fff;
	 background-color: var(--vl-color1);
}
 .btn-vl2 {
	 font-size: 1rem;
	 font-weight: 400;
	 color: #fff;
	 background-color: var(--vl-color2);
}
 .btn-vl2:hover {
	 background-color: var(--vl-color1);
}
/* function class */
 .vl-rounded {
	 border-radius: var(--border-radius);
}
 .vl-padding {
	 padding: var(--padding);
}
 .vl-font-bold {
	 font-weight: 900;
}
 .vl-font-light {
	 font-weight: 200;
}
 .img-filter {
	 filter: grayscale(100%) contrast(40%);
	 transition: all var(--duration) var(--animate);
}
 .img-filter.active {
	 filter: none;
}
 .trans-n {
	 transform: none !important;
}
/* aniamtion class */
 @keyframes fade-out {
	 100% {
		 transform: scale(0);
		 opacity: 0;
		 display: none;
	}
}
 @keyframes fade-out-main {
	 100% {
		 transform: scale(1);
		 opacity: 0;
		 display: none;
	}
}
 @keyframes fade-in {
	 0% {
		 opacity: inherit;
		 transform: scale(0);
		 display: flex;
	}
	 100% {
		 transform: scale(1);
		 opacity: 1;
	}
}
 @keyframes fade-in-main {
	 100% {
		 opacity: 100;
	}
}