html,body{
   padding: 0;        /* 余白の削除 */
   text-align : center ;
} 
* html body{  
    margin-top: 100px;
    overflow: hidden;  
}   


div#headerArea {  
    position: fixed; 
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100px;  
    background-color: #4E9ABE;  
    color: #fff;  
    z-index: 100;

}  

div#headerArea1 {  
    position: fixed; 
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100px;  
    background-color: white;  
    color: #fff;  
    z-index: 100;

}  

div#footerArea {  
    position: fixed !important;  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    height: 50px;  
    background-color: #4E9ABE;  
    color: #fff;  
}  
div#contentsArea{ 
    margin-top: 100px;
    position: absolute; 
    height: 100%;
    width: 100%;
  
    overflow: auto;  
    top: 100px;
} 

.z1{
	position: fixed;
 	top: 100px;
 	height : 100% ;
 	width: auto;
 	cursor: pointer;
 	z-index: 10;
}

.z2{
 	position: absolute; z-index: 20;text-align : center ;width: 350px;margin-top: 5px;
}

.z3{
 	position: absolute; z-index: 30;text-align : center ;width: 200px;margin-top: 150px;vertical-align: bottom;
}

input[type='submit'][value='顔検索'] { color:red; }
input[type='submit'][value='顔で検索'] { color:blue; }


figure   {display:inline-block; border: 1px solid #CCC; padding: 20px; margin:1em 0 2em;width:350px;height:350px;vertical-align: top;}
figure-a {display:inline-block; border: 1px solid #CCC; padding: 20px; margin:1em 0 2em;width:350px;height:400px;vertical-align: top;}
figure-c {display:inline-block; border: 1px solid #CCC; padding: 20px; margin:0.5em 0 0.5em;width:200px;height:200px;vertical-align: top;}

figcaption {display:block; font-weight: bold;z-index: 20;margin: 10px auto;text-align : center ;width: 350px;}
figcaption-c {display:block; font-weight: bold;z-index: 20;margin: 0px auto;text-align : center ;width: 200px;}