@media screen and (min-width: 1025px) {

    header{ position: fixed; width: 90%; height: 4.5rem; min-width: 1025px; top: 0; z-index: 30; padding-top: 1.2rem; box-sizing: border-box; left: 0; right: 0; margin: 0 auto; }
    #menu{ display: block; width: 30%; height: 100%; font-size: 1.6rem; background-image: url(/images/common/icon_menu.png); background-repeat: no-repeat; background-size: 2.5rem; background-position: left top; padding-top: .5rem; padding-left: 3.5rem;  }

    /* popup */
    #popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100vh; display: none; background-color: rgba(0,0,0,0.8); z-index: 50; }
    #popup.on{ display: block; z-index: 50; }/* js */
    #popup .contents{ width: 30vw; min-width: 30vw; height: auto; min-height: 100vh; background-color: #fff; padding-top: 8vh; }
    #popup .menu_top{ display: table; width: 90%; height: 8rem; margin: auto; margin-bottom: 10vh; }
    #popup .menu_top h1{ display: table-cell; width: 80%; vertical-align: middle; }
    #popup .menu_top h1 img{ width: 90%; vertical-align: middle; margin-left: 5%; min-width: 10rem; max-width: 14rem;  }
    #close{ display: table-cell; width: 20%; vertical-align: middle; text-align: center;  }
    #close img{ width: 30%; max-width: 1.7rem; min-width: 1.5rem; vertical-align: middle;  }

    #popup .menu{ width: 80%; height: auto; padding-left: 4vw; }    
    #popup .mainMenu{ width: 100%; height: auto; }    
    #popup .mainMenu:hover > a{ color: #d3c89c; width: 40%; }
    #popup .mainMenu:hover > .subMenu{ display: block; }
        
    #popup .mainMenu > a{ display: block; float: left; width: 100%; height: auto; min-height: 6vh; font-size: 1.5rem;  }  
    #popup .mainMenu .subMenu{ float: left; display: none; width: 60%; height: auto;  }
    #popup .subMenu > li{ position: relative; width: 100%; height: 4vh;  }
    #popup .subMenu > li > a{ display: block; width: 70%; height: 100%; margin-left: 30%; text-align: center; font-size: 1rem; font-weight: 300; transition-duration: .3s; }
    #popup .subMenu > li:hover > a{ color: #d3c89c;  }
        
    
    
    
    footer{ width: 100%; height: 20vh; max-height: 200px; background-color: #999; min-width: 1025px; z-index: 38; }
    .fwrap{ display: table; width: 90%; height: 100%; margin: 0 auto; }
    .fwrap h1{ display: table-cell; width: 40%; height: 100%; vertical-align: middle; text-align: center; }
    .fwrap h1 > a{ display: block; width: 20vw; height: 30%; margin: 0 auto;  }
    .fwrap h1 a img{ width: 20vw; max-width: 18rem;  }
    .fwrap p{ display: table-cell; width: 60%; height: 100%; vertical-align: middle; color: #fff; line-height: 1.5rem; font-weight: 300; font-size: .9rem; text-align: center; }
    .fwrap p a{ color: #fff;  }

}


@media screen and (min-width: 768px) and (max-width: 1024px) { /* min-width: 768px */
    
    header{ position: fixed; width: 90%; height: 4.5rem; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 30; padding-top: 1.2rem; }
    #menu{ display: block; width: 30%; height: 100%; font-size: 1.6rem; background-image: url(/images/common/icon_menu.png); background-repeat: no-repeat; background-size: 2.5rem; background-position: left top; padding-top: .5rem; padding-left: 3.5rem;  }

        
    
    /* popup */
    #popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100vh; display: none; background-color: rgba(0,0,0,0.8); z-index: 50; }
    #popup.on{ display: block; z-index: 50; }/* js */
    #popup .contents{ width: 60vw; min-width: 60vw; height: auto; min-height: 100vh; background-color: #fff; padding-top: 8vh;  }
    #popup .menu_top{ display: table; width: 90%; height: 8rem; margin: auto; margin-bottom: 10vh; }
    #popup .menu_top h1{ display: table-cell; width: 80%; vertical-align: middle; }
    #popup .menu_top h1 img{ width: 100%; vertical-align: middle; min-width: 12rem; max-width: 16rem;  }
    #close{ display: table-cell; width: 20%; vertical-align: middle; text-align: center;  }
    #close img{ width: 30%; max-width: 1.8rem; min-width: 1.4rem; vertical-align: middle;  }

    #popup .menu{ width: 80%; height: auto; margin: 0 auto; }    
    #popup .mainMenu{ width: 100%; height: auto; }
    #popup .mainMenu.on > a{ color: #d3c89c; width: 40%; }
    #popup .mainMenu.on > .subMenu{ display: block; }    
    #popup .mainMenu > a{ display: block; float: left; width: 100%; height: auto; min-height: 6vh; font-size: 1.6rem;  }  
    #popup .mainMenu .subMenu{ float: left; display: none; width: 60%; height: auto;  }
    #popup .subMenu > li{ width: 100%; height: 4vh;  }
    #popup .subMenu > li > a{ display: block; width: 70%; height: 100%; margin-left: 20%; text-align: center; font-size: 1.2rem; font-weight: 300; transition-duration: .3s; }
    
    
    
    footer{ width: 100%; height: 20vh; max-height: 200px; background-color: #999; min-width: 768px; }
    .fwrap{ display: table; width: 90%; height: 90%; margin: 0 auto; }
    .fwrap h1{ display: table-cell; width: 40%; height: 100%; vertical-align: middle; text-align: center; }
    .fwrap h1 > a{ display: block; width: 20vw; height: 30%; margin: 0 auto;  }
    .fwrap h1 a img{ width: 20vw; max-width: 17rem;  }
    .fwrap p{ display: table-cell; width: 60%; height: 100%; vertical-align: middle; color: #fff; line-height: 1.5rem; font-weight: 300; font-size: .9rem; text-align: center; }
    .fwrap p a{ color: #fff;  }
    
}




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

    header{ position: fixed; width: 90%; min-width: 350px; height: 5rem; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 30; padding-top: 1.5rem;}
    #menu{ display: block; width: 30%; height: 100%; font-size: 1.4rem; background-image: url(/images/common/icon_menu.png); background-repeat: no-repeat; background-size: 2rem; background-position: left top; padding-top: .3rem; padding-left: 3rem;  }

        
    
    /* popup */
    #popup{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100vh; display: none; background-color: rgba(0,0,0,0.8); z-index: 50; }
    #popup.on{ display: block; z-index: 50; }/* js */
    #popup .contents{ width: 80vw; min-width: 80vw; height: auto; min-height: 100vh; background-color: #fff; padding-top: 5vh;  }
    #popup .menu_top{ display: table; width: 90%; height: 8rem; margin: auto; margin-bottom: 6vh; }
    #popup .menu_top h1{ display: table-cell; width: 80%; vertical-align: middle; }
    #popup .menu_top h1 img{ width: 100%; vertical-align: middle; min-width: 10rem; max-width: 14rem;  }
    #close{ display: table-cell; width: 20%; vertical-align: middle; text-align: center;  }
    #close img{ width: 30%; max-width: 1.6rem; min-width: 1.2rem; vertical-align: middle;  }

    #popup .menu{ width: 80%; height: auto; margin: 0 auto; }    
    #popup .mainMenu{ width: 100%; height: auto; }
    #popup .mainMenu.on > a{ color: #d3c89c; width: 40%; }
    #popup .mainMenu.on > .subMenu{ display: block; }    
    #popup .mainMenu > a{ display: block; float: left; width: 100%; height: auto; min-height: 6vh; font-size: 1.6rem;  }  
    #popup .mainMenu .subMenu{ float: left; display: none; width: 60%; height: auto;  }
    #popup .subMenu > li{ width: 100%; height: 4vh;  }
    #popup .subMenu > li > a{ display: block; width: 70%; height: 100%; margin-left: 20%; text-align: center; font-size: 1.2rem; font-weight: 300; transition-duration: .3s; }
    
    
    
    footer{ width: 100%; height: 20vh; min-width: 350px; max-height: 200px; background-color: #999; }
    .fwrap{ width: 90%; height: 100%; margin: 0 auto; }
    .fwrap h1{ width: 100%; height: 30%; text-align: center; padding-top: 1.5vh; }
    .fwrap h1 > a{ display: block; width: 40vw; height: 100%; margin: 0 auto; }
    .fwrap h1 > a img{ width: 35vw; }
    .fwrap p{ width: 100%; height: 70%; color: #fff; line-height: 1.3rem; font-weight: 300; font-size: .9rem; text-align: center; }
    .fwrap p a{ color: #fff;  }
    
    
    
}