body {
	width: 80%;
	margin: 0 auto;
	display:fixed;
}
/*ヘッダー*/

header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 10000;
}
.head {
	width:80%;
	display:flex;
	flex-wrap:wrap;
    justify-content: column;
	align-items:center;
}


h1{	
	margin:0 60px;
	font-family: "Broadway";
	font-size: 60px;
	margin-right: 20px;
    border-bottom: 0px solid #000;
    background: linear-gradient(90deg, #58c6ff 0%, #076ad9 20%, #ff3bef 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    animation: rotation-x 2.5s linear infinite;
}
@keyframes rotation-x {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
h2 {
	margin:0 35px;
	font-family: "Nico Moji";
	font-size:40px;
	color: #000000;
}

.border {
	width:90%;
	margin-bottom:20px;
}
#wrap{
	display:flex;
}

#main {
	background-color:#000;
	position:relative;
	width: fit-content;
	height: 164px;
  	padding:0.15rem;
  	margin:0 auto;

}

.main {
	background-color:#fff;
    padding:0.1rem;
}
.main_2 {
	background-color:#000;
	padding: 0.2rem;
    border-radius: 0.3rem;
}
.main_3 {
	background-color:#000;
    border-radius: 0.3rem;
}
.level{
	color:#fff;
	font-weight:bold;
	font-size:22px;
	list-style:none;
	pointer-events: none;
	padding:1px;
}




#navi {
	background-color:#000;
	position:relative;
	width: fit-content;
	height: 164px;
  	padding:0.15rem;
  	margin:0 auto;
}
fieldset{  	
	background-color:#000;
	border:3px solid #fff;
    border-radius: 0.3rem;
	position:relative;
	top:-20px;
}
legend {
	font-family: "Silkscreen", sans-serif;
	font-weight:bold;
	color:#A9A9A9;
	font-size:30px;
}
.navi {
	background-color:#fff;
    padding:0.1rem;
}
.navi_2 {
	background-color:#000;
	padding: 0.2rem;
    border-radius: 0.3rem;
    column-count: 2;
}
.navi_3 {
	background-color:#000;
    border-radius: 0.3rem;
    line-height: 2;
    
}
li {
	font-family: "Silkscreen", sans-serif;
	font-weight:bold;
	color:#000;
	font-size:20px;
	list-style-type:"\025b6";
}

li:hover {
	list-style-type: "\025b6";
	color:#fff;
}
a{
 	text-decoration : none;
}
a,a:hover,a:visited{
    color: #fff;
}

/*--子メニュー--*/
.dropdown {
	position:relative;
	top:100px;
	left:-260px;
    visibility: hidden;
}
.dropdown.is-hidden {
   visibility: visible
}

.dropdown_list{
	width: fit-content;
}
ul li.dropdown_list:hover {
	list-style-type: "\025b6";
	color:#fff;
}
.dropdown {
	width: fit-content;
	height: fit-content;
	background-color:#000;
    padding:0.1rem;
    z-index: 1;
}
.navi_4 {
	background-color:#fff;
	padding: 0.2rem;
    border-radius: 0.3rem;
}
.navi_5 {
	padding-left:20px;
	padding-right:6px;
	background-color:#000;
    border-radius: 0.3rem;
    line-height: 2;
}




/*--コンテンツ--*/
#about {
	margin-top:30px;
	width:80%;
	height:450px;
	position:relative;
	left:125px;
}
.dq {
    background-color: #000000;
    padding: 0.15rem;
}
.dq_2 {
    background-color: #ffffff;
    padding: 0.2rem;
    border-radius: 0.3rem;
}
.dq_3 {
    color:#ffffff;
    background-color: #000000;
    font-family: "misaki_gothic_2nd";
    border-radius: 0.3rem;
    padding: 1.0rem 0.75rem;
    line-height: 2;
}
h3.name{
	color:#ffffff;
	font-size:33px;
	width:50%;
	margin:10px auto;
	text-align:center;
	animation: h3 1.5s;
	display: block;
}
@keyframes h3{
  0% {
    transform: translateY(-200px);
  }
  100% {
    transform: translateY(0);
  }
}
.line {
	width:50%;
	margin-bottom:20px;
	padding-top:0;
	display: block;
}

h4.name{
	color:#ffffff;
	font-size:33px;
	width:50%;
	margin:10px auto;
	text-align:center;
}
p {
	width:60%;
	margin:5px auto;
	text-align:left;
	font-family: "Silkscreen", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#ffffff;
    font-size:18px;
}
.sub {
	font-weight:bold;
	text-decoration:underline;
}
.silkscreen-regular {
    font-family: "Silkscreen", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#ffffff;
}

/*スライドイン*/
.slideConts {
	background-color:#000000;
	width: 100%;
	margin: 100px auto;
	padding:3px;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.slideContsL {
	background-color: ;
	transform: translate(-1800px, 0);
}
.slideContsR {
	background-color: ;
	transform: translate(1800px, 0);
}
.slideContsL.show {
	transform: translate(-150px, 0);
}
.slideContsR.show {
	transform: translate(150px, 0);
}

/*矢印*/
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
     border-color: #000000;
    }
}

/*ゴースト*/

.parallax_ghost img {
    position: absolute;
    z-index: 100;
    display: block;
    width: 350px;
}
.ghost {
    right: 150px;
    top: 440px;
    /* アニメーションの命令 */
    animation: ghostAnime ease-in-out;
    animation-timeline: view();
    animation-range: cover;
    transition: 0.9s;
}
.ghost:hover {
	opacity:0;
	transform: translateY(-80px);
}
@keyframes ghostAnime {
    0% {
        right: 0px;
    }
    30% {
        right: 10px;
    }
    60% {
        right: 200px;
    }
    90% {
        right: 500px;
    }
    100% {
        right: 1000px;
    }
}
/*-----
animation: ghost 3s infinite ease-in-out;
@keyframes ghost {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30px);
    }
}
-----*/

/*魔法使い*/
.parallax_majo img {
    position: absolute;
    z-index: 100;
    display: block;
    width: 350px;
}
.majo {
    left: 10px;
    top: 1150px;
    /* アニメーションの命令 */
    animation: majoAnime ease-in-out;
    animation-timeline: view();
    animation-range: cover;
    transition: 1.9s;
}
.majo:hover{
	transform:rotate(-360deg);
	transition:all 2s;
}
@keyframes majoAnime {
    0% {
        left: 0px;
    }
    30% {
        left: 400px;
    }
    60% {
        left: 800px;
    }
    90% {
        left: 1300px;
    }
    100% {
        left: 1800px;
    }
}

/*悟空*/
.parallax_goku img {
    position: absolute;
    z-index: 100;
    display: block;
    width: 350px;
}
.goku {
    left: 20px;
    top: 2300px;
    /* アニメーションの命令 */
    animation: gokuAnime linear forwards;
    animation-timeline: view();
    animation-range: cover;
    transition: 4.0s;
}

@keyframes gokuAnime {
    0% {
        top: 2000px;
    }

    25% {
        top: 1900px;
    }

    50% {
        top: 1800px;
    }

    75% {
        top: 1600px;
    }

    100% {
        top: 1500px;
    }
}



/*デビル*/
.parallax_devil img {
    position: absolute;
    z-index: 100;
    display: block;
    width: 330px;
}
.devil {
    right: 250px;
    top: 2100px;
    /* アニメーションの命令 */
    animation: devilAnime ease-in-out;
    animation-timeline: view();
    animation-range: cover;
    transition: 0.9s;
}

.devil:hover {
	transform: translateX(300px);
}

/*キョンシー*/
.parallax_kyon img {
    position: absolute;
    z-index: 100;
    display: block;
    width: 350px;
}
.kyon {
    right: -100px;
    top: 1600px;
	animation:elm 8s infinite;
}
@keyframes elm {
     	to {
			margin-right:100%;
		 	}
}

/*フッター*/

#footer {
	margin:20px auto;
	border-top: 2px solid #000000;
	padding-top:15px;
	text-align:center;
	color:#000000;
}