@charset "UTF-8";

/* ===================================================================

 file name  :  mediaqueries.css

=================================================================== */

/* --------------------------------------------------
 980px
--------------------------------------------------- */
@media screen and (max-width: 980px){
    #wrap{ box-sizing: border-box; padding: 0 20px; width: 100%;}
    
    /* content */
    .content{ margin: 30px 0 0; padding: 0;}
    .content .visual{ padding: 0 0 0 20px; height: auto;}
    .content .rec{ padding: 0 0 0 20px;}
    .content .rec .box1{ display: none;}
    .content .rec .box2{ display: block;}
    .content .bn{ width: 100%;}
    .content .bn section{ box-sizing: border-box; margin: 0; padding: 0 0 20px 20px; width: 25%;}
    
    /* link */
    .link{ margin: 0 0 0 -20px; padding: 10px 0 0;}
    .link ul li{ box-sizing: border-box; margin: 0; padding: 0 0 20px 20px; width: 25%;}
}

/* --------------------------------------------------
 870px
--------------------------------------------------- */
@media screen and (max-width: 870px){

    /* header */
    header{ padding: 20px 0 0;}
    header nav{ position: static; margin: 30px 0 0; width: 100%;}
    header nav ul li{ box-sizing: border-box; width: 25%;}
    header nav ul li a{ padding: 0; letter-spacing: 1px; font-size: 14px;}
    
    /* footer */
    footer .copy{ float: none; clear: left; padding: 20px 0 0; text-align: center;}
    
}


/* --------------------------------------------------
 640px
--------------------------------------------------- */
@media screen and (max-width: 640px){
    
    #wrap{ padding: 0 15px;}
    
    /* header */
    header nav ul li a{ font-size: 13px;}
    
    /* content */
    .content .visual{ padding: 0 0 0 15px;}
    .content .rec{ padding: 0 0 0 15px;}
    .content .rec h2{ font-size: 21px;}
    .content .rec h2 span{ display: block; padding: 10px 0 0; font-size: 17px;}
    .content .rec .box2{ display: none;}
    .content .rec .box3{ display: block;}
    .content .bn{ margin: 30px 0 0;}
    .content .bn section{ padding: 0 0 15px 15px; width: 33.3333%;}
    
    /* link */
    .link{ margin: 0 0 0 -15px; padding: 15px 0 0;}
    .link ul li{ padding: 0 0 15px 15px; width: 50%;}
    
    /* sns */
    .sns{ margin: 0; padding: 15px 0 0;}
    
    /* footer */
    footer .btn-dl{ display: none;}
    footer aside.pc{ display: none;}
    footer aside.sp{ display: block;}
    
}

/* --------------------------------------------------
 540px
--------------------------------------------------- */
@media screen and (max-width: 540px){
    
    /* footer */
    
}


/* --------------------------------------------------
 480px
--------------------------------------------------- */
@media screen and (max-width: 480px){
    
    body{ font-size: 13px; line-height: 1.6;}
    #wrap{ padding: 0 10px;}
    
    /* header */
    header h1{ width: 40%;}
    header h1 img{ width: 100%;}
    header nav{ display: none;}
    header aside{ display: none;}
    header #menu{ display: block;}
    
    /* content */
    .content{ margin: 25px 0 0;}
    .content .visual{ padding: 0 0 0 10px;}
    .content .rec{ padding: 0 0 0 10px;}
    .content .rec h2{ font-size: 19px;}
    .content .rec h2 span{ font-size: 15px;}
    .content .bn{ margin: 25px 0 0;}
    .content .bn section{ padding: 0 0 10px 10px; width: 50%;}
    
    /* link */
    .link{ margin: 0 0 0 -10px; padding: 15px 0 0;}
    .link ul li{ padding: 0 0 10px 10px; width: 50%;}
    
    /* sns */
    .sns{ padding: 15px 0 0;}
    
    /* footer */
    footer .btn{ font-size: 12px;}
    footer nav.pc{ display: none;}
    footer nav.sp{ display: block;}
    footer .copy{ font-size: 10px;}
    
}