@charset "UTF-8";
*{margin: 0;padding: 0;}


body{
	font-family:　Lato, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 16pt;
  margin: 0;
  padding: 0;
  background-color: #fff;
overflow-x: hidden;

}

header{
background-color: #ffffff;
width: 100dvw;
height: 80px;
top: 0;
left: 0;
margin: 0;
display: none;
}

.back{

position: relative;
background-color: #ffffff;
background-size: cover;
background-attachment: fixed;
width: 100dvw;
height: 30vh;
overflow-x: hidden;
}

.overlink{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 2;
}

.container {
  width: 100dvw;
 padding: 0px;
background-color: #ffffff;
}


.item {
text-align: center;
width: 100dvw;
height: auto;
margin-right: auto;
margin-left: auto;
margin-bottom: 5px;
}

.wave{

z-index: 30;
position: absolute;
display: flex;
text-align: center;
margin-top: 70px;
 left: 50%;
  transform: translate(-50%, -50%);


}


.wave img:hover{opacity: 0.5;}

.wave img{
width: 180px;
filter: drop-shadow(3px 3px 3px gray);
}

.mae{
width: 100px;	
height: 40px;
text-align: center;
background-color: #ffffff;
position: absolute;
margin-top: 150px;
  left: 30%;
  transform: translate(-50%, -50%);
z-index: 999;

}

.mae:hover{opacity: 0.5;}

.mae a{
font-family: "M PLUS 2", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10pt;
color: black;
margin: auto;
text-decoration: none;
}

.tugi{
width: 100px;	
height: 40px;
text-align: center;
background-color: #ffffff;
position: absolute;
margin-top: 150px;
  left: 70%;
  transform: translate(-50%, -50%);
z-index: 999;

}

.tugi:hover{opacity: 0.5;}

.tugi a{
font-family: "M PLUS 2", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10pt;
color: black;
margin: auto;
text-decoration: none;
}




.top{
width: 100px;	
height: 40px;
text-align: center;
background-color: #FFE000;
position: absolute;
margin-top: 150px;
 left: 50%;
  transform: translate(-50%, -50%);

z-index: 999;

}

.top:hover{opacity: 0.5;}

.top a{
font-family: "M PLUS 2", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10pt;
color: black;
margin: auto;
text-decoration: none;
}




footer{
text-align: center;
background-color: gray;
width: 100dvw;

}

footer p{

text-align: center;
font-family: "M PLUS 2", sans-serif;
font-style: normal;
font-size: 9pt;
font-weight: 300;
color: #ffffff;
padding: 10px;
}



/*スマホ用*/

@media screen and (max-width:480px){ 


header{
text-align: center;
background-color: black;
width: 100dvw;
height: 80px;
display: flex;
padding: 0px;
}


.back{
position: relative;
background-color: #ffffff;
overflow-x: hidden;
width: 100vw;
height: 33dvh;
} 


.container {

background-color: black;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 100dvw;
}


.item {

left: 0;
width: 100dvw;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}

.item img{
width: 100dvw;
}


.wave {
position: absolute;
z-index: 999;
margin-left: auto;     /* 左の余白 */
margin-right: auto;  
margin-top: 13dvh;

 left: 50%;
  transform: translate(-50%, -50%);
width: 300px;
height: auto;

}

.wave img{
width: 80%;
}

.mae{
width: 80px;	
height: 40px;

position: absolute;
margin-top: 30dvh;
  left: 15%;
  transform: translate(-50%, -50%);

background-color: #a5a5a5;

}


.mae a{
font-size: 10pt;
color: black;
text-decoration: none;
}

.tugi{
width: 80px;	
height: 40px;

position: absolute;
margin-top: 30dvh;
  left: 85%;
  transform: translate(-50%, -50%);

background-color: #a5a5a5;

}

.tugi a{
font-size: 10pt;
color: black;
text-decoration: none;
}





.top{
width: 100px;	
height: 40px;
background-color: #FFE000;
position: absolute;
margin-top: 30dvh;
  left: 50%;
  transform: translate(-50%, -50%);


}


.top a{
font-size: 10pt;
color: #000000;
text-decoration: none;
}


footer{
padding-bottom: 10px;
text-align: center;
background-color: #000000;
}









}