@font-face {
	font-family: "NoteSerifJP";
	src: url(assets/NotoSerifJP-Black.otf);
}

@font-face {
	font-family: "NoteSansJP";
	src: url(assets/NotoSansJP-VariableFont_wght.ttf);
}

body {
	text-align: center;
}

.head-title img {
	width: 40%;
	height: auto;
}

#top {
	font: bold 5em "Georgia", serif;
	color: #797364;
	font-family: "NoteSerifJP", sans-serif;
	font-style: oblique;
}

#bottom {
	font: bold 5em "Georgia", serif;
	color: #797364;
	text-align: right;
	font-family: "NoteSerifJP", sans-serif;
	font-style: oblique;

}

#top .z-text {

	transform: translateX(-100px);
	transform: translateY(100px);
}

#bottom .z-text {
	transform: translateX(160px);
	transform: translateY(100px);
}

.z-layer {
	padding-right: 30px;
	margin-right: -30px;
}

#top .z-layer:first-child {
	background: linear-gradient(#e60000 0%, #8a0000 50%, #e40000 51%, #070000 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	-webkit-text-stroke: 1px #fff9e0;
	text-stroke: 1px #fff9e0;
}

#top .z-layer:nth-of-type(n+2):nth-of-type(-n+10) {
	background: linear-gradient(#ebe853 0%, #d3d7ba 30%, #f1cf2b 65%, #906019 70%, #dcbd52 75%, #dcbd52 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

#top .z-layer:nth-of-type(n+11):nth-of-type(-n+15) {
	background: #000101;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

#top .z-layer:not(:nth-of-type(n+1):nth-of-type(-n+15)) {
	background: linear-gradient(#000101 0%, #000101 20%, #d2d4d8 30%, #373a3b 40%, #a4a5a5 60%, #0b0a0e 70%, #d5d6d8 75%, #1f1f1f 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

#bottom .z-layer:first-child {
	background: linear-gradient(#f7f8f9 0%, #a0bec9 50%, #c0d4dc 51%, #fafbfc 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	-webkit-text-stroke: 2px #10193a;
	text-stroke: 2px #10193a;
}

#bottom .z-layer:nth-of-type(n+2):nth-of-type(-n+3) {
	background: #10193a;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

#bottom .z-layer:nth-of-type(n+4):nth-of-type(-n+5) {
	background: #8f929f;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

#bottom .z-layer:nth-of-type(n+6):nth-of-type(-n+15) {
	background: #10193a;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

#bottom .z-layer:not(:first-child, :nth-child(2), :nth-child(3), :nth-child(4)) {
	background: linear-gradient(#000101 0%, #000101 20%, #d2d4d8 30%, #373a3b 40%, #a4a5a5 60%, #0b0a0e 70%, #d5d6d8 75%, #1f1f1f 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}


h2 {
	font: bold 5em "Georgia", serif;
	color: #797364;
	font-size: 5rem;
}


h2 .z-layer:first-child {
	background: linear-gradient(#b78614 0%,
			#fff5ab 50%,
			#cc9a26 75%,
			#ca910a 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	-webkit-text-stroke: 3px #63513c;
	text-stroke: 2px #63513c;
}


h2 .z-layer:not(:first-child) {
	color: #0d1113;
}


.slider-container-top {
	width: 30%;
}

.slider-container-bottom {
	width: 30%;
}

.slider {
	width: 100%;
}

.flex {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0px 20px;
}

.bar-label,
.bar {
	color: #333;
}


.bar {
	padding: 8px 10px;
	border: 1px solid #d2d2d2;
	border-radius: 25px;
	background: #f7f7f7;
	font-size: 1em;
	line-height: 1.5;

}

.bar::placeholder {
	color: #999;
}

.item {
	background-color: #2589d0;
	color: #fff;
	border-radius: 10px;
}

.toggle {
	font-family: "NoteSansJP", sans-serif;
}

.discription {
	font-family: "NoteSansJP", sans-serif;
}

.headline {
	margin-bottom: 10%;
}

.toggle {
	position: fixed;
	bottom: 20px;
	left: 20px;
	text-align: center;
}

.toggle button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250px;
	margin: 0 auto;
	padding: 1em 2em;
	border: none;
	border-radius: 5px;
	background-color: #2589d0;
	color: #fff;
	font-weight: 600;
	font-size: 0.8em;
}

.toggle button::after {
	transform: rotate(45deg);
	width: 5px;
	height: 5px;
	margin-left: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: '';
}

.button-010 button:hover {
	background-color: #1579c0;
}

.under {
	margin-top: 10%;
	font-family: "NoteSansJP", sans-serif;
}

#target {
	width: auto;
	height: 800px;
	font-size: 2rem;
}

@media (max-width: 768px) {
	#target {
		width: 100%;
		font-size: 1rem;
	}
}

@media (max-width: 1280px) {
	#target {
		width: 100%;
		font-size: 1.5rem;
	}
}