@charset "utf-8";
header{position: fixed; min-width: 1300px; top: 0px; width: 100%; height: auto; background: #fff; z-index: 200; padding: 23px 24px 22px;display: flex; justify-content: space-between; align-items: center;}
header h1{display: inline-block;}
header nav{display: inline-block;}
header nav ul{display: flex; align-items: center; gap: 0 10px;}
header nav ul li{display: inline-block; width: 160px; }
header nav ul li a{display: block; width: 100%; height: auto; text-align: center; line-height: 140%; font-size: 14px; color: #fff !important; font-family: 'Noto-Sans-JP-Regular';padding: 8px 5px 7px; line-height: 164.3%;border-radius: 10px;}
header nav ul li.btn_1 a{background: linear-gradient(45deg, #cee930 ,#09b5b7 50%);}
header nav ul li.btn_2 a{background: linear-gradient(25deg,#f1ac17, #ff5488 60%);}
header nav ul li.btn_3 a{background: linear-gradient(45deg, #09b4bf,#5858ca 50%);}
header nav ul li.btn_4 a{background: #ffaa19; padding: 18px 5px 20px;}
.menu-btn {	display: none;}

body{min-width: 1300px;width: 100%;}
body.loading{position: fixed;}
footer{padding: 35px 0 37px;}
footer h3{text-align: center;}
footer h3 a{display: inline-block;}
footer p{padding: 35px 0 0; font-size: 12px; text-align: center;font-family: 'Noto-Sans-JP-Medium';}

.scroll{position: fixed; bottom: 5%; left: 3%; width: 30px; height: 120px;z-index: 100;}
.scroll .ball{display: block; width: 30px; height: 30px; border-radius: 1000px; background: #e3007d; transition: 0.5s;}


#splash {position: fixed; width: 100%; height: 100%; z-index: 999; text-align:center; color:#e3007f; top: 0px;font-family: 'Noto-Sans-JP-Regular';}

#splash_text {position: absolute;top: 50%;left: 50%; z-index: 999;transform: translate(-50%, -50%);color: #e3007f;width: 100%;font-family: 'Noto-Sans-JP-Regular';}
#logo_splash{position: absolute;top: 44%;left: 50%; z-index: 999;transform: translate(-50%, -44%);;}
.loader_cover { width: 100%; height: 50%; background-color: #fff; transition: all .2s cubic-bezier(.04, .435, .315, .9); transform: scaleY(1);}
.loader_cover-up { transform-origin: center top;}
.loader_cover-down { position: absolute; bottom: 0; transform-origin: center bottom;}
.coveranime { transform: scaleY(0);}
#progress_container {position: absolute;top: 55%;left: 50%;width: 100%;height: 10px;;overflow: hidden;transform: translate(-50%, -50%);z-index: 1; }
#progress_bar {width: 0%;height: 100%;background: #fff;transition: width 0.5s ease-out; background: linear-gradient(90deg, #d3dd04, #0362ac, #e5318c);}

#cursor{width: 40px; height: auto; transition-duration: 0.3s; transition-timing-function: ease-out; position: fixed; z-index: 300; pointer-events: none; opacity: 0.7;}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	header{min-width: 100%; text-align: center; padding: 15px 24px 14px; display: block;}
	header h1 {width: 171px; margin: 0 auto;}
	body.is-menu-open {overflow: hidden;}
	.menu-btn { display: flex; position: absolute; top: 50%; right: 20px; z-index: 1001; width: 40px; height: 40px; padding: 0; border: none; background: transparent; flex-direction: column; justify-content: center; align-items: center; gap: 7px; cursor: pointer; transform: translateY(-50%);}

	.menu-btn span { display: block; width: 30px; height: 2px; background: #000; transition: 0.3s; }
	 /* 閉じるボタン */ .menu-btn.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
	 .menu-btn.is-active span:nth-child(2) { opacity: 0; }
	 .menu-btn.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

	 header nav { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; width: 100%; height: 100vh; background: #fff; padding: 30px 5% 0;}
	 header nav.is-active { display: block;}
	header nav ul { display: block; margin: 0; padding: 0; list-style: none;}
	header nav ul li{width: 100%; }
	header nav ul li:not(:last-child){margin: 0 0 20px;}
	header nav ul li a{font-size: 14px; padding: 8px 5px 7px; line-height: 164.3%;}
	
	
	
	body{min-width: 100%;}
	footer{padding: 25px 0 13px;}
	footer p{padding: 25px 0 0; font-size: 10px; }
	
	footer h3{text-align: center; width: 75px;margin: 0 auto;}
	.scroll{ width: 20px; height: 90px;;z-index: 100;}
	.scroll .ball{width: 20px; height: 20px;}
	#cursor{width: 35px; display: none;}
	
	#logo_splash{top: 44%;transform: translate(-50%, -44%); width: 60%;}
	.loader_cover { height: 50%;}
	#progress_container {top: 55%;left: 50%;height: 10px;}
}