@charset "UTF-8";

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

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

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

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


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

@media screen and (max-width: 1280px) {   
   
    .area { width: 80%; }
    .name-3, .name-4 { font-size: 1.125em; } 
    .photo-3, .photo-4 { height: 250px; }
    .photo-3 img, .photo-4 img { max-height: 230px; }      
    
}


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

@media screen and (max-width: 1024px) {
    
    
    .title { width: 40%; }
    .tips { border-radius: 30px; }
    
    .photo-3, .photo-4 { height: 220px; }
    .photo-3 img, .photo-4 img { max-height: 210px; } 
    
}


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

@media screen and (max-width: 834px) {
    
    body {
        background-image: url(../images/bg-m.jpg);
        background-attachment: fixed;
        background-position: center center;
        background-size: 100% 100%;
    }
    .s1 { padding: 6% 0 4% 0; }
    .s2, .s3, .s4, .s5, .s6 { padding: 0 0 8% 0; }
    .s7 .area { width: 100%; }
    
    .name-3, .name-4 { font-size: 1.125em; padding: 0 10px; }
    .price-3, .price-4 { padding: 0 10px; } 
    .photo-3, .photo-4 { height: 250px; }
    .photo-3 img, .photo-4 img { max-height: 230px; } 
    
    .kv { width: 95%; padding: 0 0 29% 0; margin: 0 auto; }
    .kv img:nth-child(1) { display: none; }
    .kv img:nth-child(2) { display: block; }
    .kv-box ul { width: 90%; left: 5%; }
    .kv-box li { width: 47%; margin: 0 1.5% 1.5% 1.5%; }    
    
    .area { width: 95%; }
    .title { width: 85%; margin: 0 auto 2% auto; }
    
    .list-1 li { width: 100%; margin: 0 auto 5% auto; }
    .list-1 li a img:hover, .list-1 li a img:focus {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    .tips { width: 95%; padding: 4% 2% 3% 2%; margin: -4% auto 0 auto;}
    .tips img:nth-child(1) { display: none; }
    .tips img:nth-child(2) { display: block; }
    
    .list-3, .list-4, .list-4 ul, .list-5, .bn { width: 100%; }
    .list-3 li, .list-4 li, .list-5 li { width: 48%; margin: 0 1% 2% 1%; }
    .list-4 ul { background-color: transparent; border-radius: 0; padding: 0; margin: 0; }
    .list-4 li:nth-child(3) { display: none; }
    
    .bn li { float: none; width: 100%; margin: 0 auto 10px auto; }
    .bn li:hover, .bn li:focus {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    
    .rule {	width: 100%; padding: 4%; }    
    
}


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

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


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

@media screen and (max-width: 390px) {
    
    .name-3, .name-4 { font-size: 1em; } 
    .photo-3, .photo-4 { height: 220px; }
    .photo-3 img, .photo-4 img { max-height: 200px; } 
    
}


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

@media screen and (max-width: 320px) {
    
    .photo-3, .photo-4 { height: 190px; }
    .photo-3 img, .photo-4 img { max-height: 170px; } 
    
}