@charset "UTF-8";

/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1680px) {
    
    .area { width: 55%; }
    
}

/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1440px) {
    
    .area { width: 60%; }    
    .btn-join1 a { font-size: 2.5em; padding: 15px 10px; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1366px) {
    
	.area { width: 65%; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

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

}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 1180px) {
    
    .area { width: 70%; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 834px) {
    
    .kv-pc { display: none; }
    .kv-m { display: block; }
    .area { width: 95%; }
    .btn-join1 a { top: 73%; left: 30%; width: 40%; font-size: 2.5em; padding: 15px 10px; }
    .btn-join2 { top: 68%; left: 15%; width: 50%; }    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 480px) {
    
    .area { width: 95%; }
    .s1 .area { padding: 10px 0% 0 0%; }
    .s2 .area { padding: 10px 3% 15px 3%; }
    .s3 .area, .s4 .area { padding: 0 3% 30px 3%; }
    .s5 .area { padding: 0 3% 20px 3%; }
    
    .btn-join1 a { font-size: 2em; padding: 10px; } 
    
    .list h2 { width: 80%; }
    .list li { width: 48%; margin: 0 1% 20px 1%; }    
      
    .bn li { float: none; width: 100%; margin: 0 auto 5px auto; }
    
    /*rule*/
    .rule-area { width: 100%; padding: 15px; margin: 0 auto 10px auto; }
    .gift { float: none; width: 95%; margin: 10px auto; }   
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 414px) {
    
    .name { font-size: 1em; }
    .btn-join1 a { top: 70%; left: 25%; width: 50%; font-size: 1.5em; padding: 10px; }
    
}


/*---------------------------------------------------------------
----------------------------------------------------------------*/

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


/*---------------------------------------------------------------
----------------------------------------------------------------*/

@media screen and (max-width: 320px) {
    
    .btn-join1 a { top: 70%; left: 25%; width: 50%; font-size: 1.5em; padding: 5px 10px; }
	
}