@charset "utf-8";
/* CSS Document */

#mainimage{
 position: relative;
} 

#mainimage img{
 width: 100%;
 height: auto;
}

#spimage img{
 width: 100%;
 height: auto;
}

.main_l{
 width: 100%;
 height: auto;
 position: absolute;
 bottom: 0;
 z-index: 10;
 }


.h_g_logo{
 width: 50%;
 position: absolute;
 top: 5px;
 left: 10px;
 margin: 0 auto;
}

.g_guide{
 width: 100%;
 height: auto;
 padding-left: 0;
 text-align: center;
} 

.g_guide li{
 display:inline-block; 
 margin: 10px 10px;
}

.g_guide li img{
 width: 46vw;
 heght: auto;
}

.update{
 max-height: 630px;
 background-color: #000;
 border-radius: 10px;
 border: 5px solid #fff;
 margin: 20px 10px;
 padding: 10px;
 color: #fff;
 font-size: 3vw; 
}

.update a{
 color: #f0e68c;
}

.update p{
 width: 100%;
 height: auto;
 font-size: 8vw;
 color: #fff;
 text-align: center;
 margin: 5px 0px;
}

.update_main{
 max-height: 450px;
 overflow: auto;
}

dt{
 margin-left: 15px;
}

dd{
 margin-top: 5px;
 margin-bottom: 10px;
}

.mainbutton_wrap{
 max-width: 100%;
 margin: 0;
}

.mainbutton_wrap img{
 width: 51.3%;
 height:auto;
 margin: -10px -10px -5px -10px;
}


@media screen and (orientation:landscape){

.h_g_logo{
 width: 35%;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 10px;
}

 }