*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
min-width: 777px;
background-color: #ffffff;
background-image: url("../img/bg.png");
background-repeat: repeat;
color: #333333;
font-family: "Stick", sans-serif;
}



#header, #menu {
max-width: 100%;
margin: 0 auto;
}

#header {
width: 100%;
height: 90px;
min-width: 1000px;
position: relative;
z-index: 10;
overflow: visible;
border-bottom: 1px solid rgba(0, 210, 165, 0.3);
}

#header-img {
position: absolute;
top: 0;
left: 0;
}

#header h1 {
font-size: 2rem;
color: #333;

}


#menu {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-wrap: nowrap;
gap: 4px;
padding: 0px;
width: max-content;
}

.menu-btn {
display: inline-block;
width: 177px;
height: 86px;
background-image: url("../img/button.png");
background-repeat: no-repeat;
background-color: transparent;
border: none;
text-decoration: none;
color: #333333;
font-size: 0.9rem;
font-family: "Science Gothic", sans-serif;
color: #7fffd4;
text-shadow: 0px 3px 7px rgba(0,0,0,1.0);
display: flex;
align-items: center;
justify-content: center;
}

.menu-btn:hover {
filter: brightness(1.5);
background-color: transparent;
}


#content {

max-width: 85%;
min-width: 1000px;
margin: 0 auto;
margin-top: -60px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);

}



.g-text {
background-image: linear-gradient(90deg, 
#7fffbf, #7fff7f, 
#bfff7f, #ffff7f, #ffbf7f);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: bold;
filter: drop-shadow(0px 2px 2px rgba(0,0,0,1));

}




#main-frame {
scrollbar-width: none;
}

#main-frame::-webkit-scrollbar {
display: none;
}

.inner-page {
background-color: transparent;
background-image: none;
}



.item {
display: flex;
justify-content: center;
overflow: hidden;
border: 1px solid rgba(85, 85, 85, 0.3);
gap: 10px;
padding: 10px;
}

.item > div {
text-align: left;
}

.item.reverse {
flex-direction: row-reverse;
}

.item img {
width: 150px;
min-width: 300px;
align-self: center;
justify-content: center;
height: 300px;
flex-shrink: 0;
filter: drop-shadow(0px 2px 3px rgba(0,0,0,1));
}




.box1 {
width: 777px;
background-color: rgba(210, 245, 210, 0.3);
padding: 1em 1.5em;
margin: 2em auto;
border: double 4px #7f7fff;
line-height: 1.0;
}
.box1 p {
margin: 0; 
padding: 0;
}

.box2 {
width: 600px;
background-color: rgba(210, 245, 210, 0.3);
padding: 1em 1.5em;
margin: 2em auto;
border: double 4px #7f7fff;
line-height: 1.0;
}


.box3 {
background-color: rgba(210, 245, 210, 0.3);
padding: 1em 1.0em;
margin: 0.5em auto;
border: double 4px #7f7fff;
line-height: 1.2;
}



hr {
height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent));
background-image: linear-gradient(to right, transparent, #ccc, transparent);
}

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