*{padding: 0;margin: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{max-width: 100%;}

input:focus, button:focus, textarea:focus{outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
input,textarea,button,select,a,label {-webkit-tap-highlight-color: rgba(0,0,0,0);}

/* common */
html{font-size: 16px;}
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

#wrap{display:flex;align-items:center;flex-direction:column;justify-content:center;text-align: center;}
#wrap.vh100{height:100vh}

#header{width:420px;margin-bottom: auto;}
#header > div{display:none;position:relative;margin-top: 20px;}
#header > div.on{display:block}

#footer{width:420px;margin-top:auto}
#footer > div{display:none;margin-bottom: 20px;}
#footer > div.on{display:block}

/* page */
#intro-page,
#test-page,
#calc-page,
#result-page{display:none;text-align:center;width:420px}

#intro-page.on,
#test-page.on,
#calc-page.on,
#result-page.on{display:block}

#intro-page .page-wr,
#test-page .page-wr
#calc-page .page-wr,
#result-page .page-wr{padding:0 20px;box-sizing:border-box}


/* test */
#test-page .page-wr{display:none}
#test-page .page-wr.on{display:block}

#type{display: none;}

/* mobile  */
@media all and (max-width:420px){
    #intro-page,
    #test-page,
    #calc-page,
    #result-page,
    #header,
    #footer{width:100%}

    #wrap.vh100{height:auto}

    #form{width: 100%;}
}