.box100 {
    height: 350px;
    background:#ffffff;
}
.box200 {
    height: 100px;
    //height: 200px;
    background:#71AAD7;
}
.box300 {
    height: 300px;
    //height: 300px;
    background:#EBB056;
}

.alignleft { float: left; }



article {
    width:100%;
    margin:0 auto;
    //background:#000000;
}

section {
    width: 300px;
    margin: 5px;
    overflow: hidden;
}
footer {
    width:150px;
    text-align:center;
    margin:0 auto;
}

/*画像のサイズを可変にする*/
img {
  max-width: 100%;
  height: auto;
}

p.resizeimage img { width: 100%; }

/* animation
article,section {
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}
article {
    top:30px;
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}
section {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}
*/

/*        <!--[if lte IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<!--[if lte IE 9]>
			<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
		<![endif]-->
*/
  			article, aside, dialog, figure, footer, header,
  			hgroup, menu, nav, section { display: block; }

div#contentsArea{	height: 100%;	overflow: auto;z-index:2;}
.grid {
   margin: 0 auto;
}

.grid-item {
		//margin: 100px;
	    width: 300px;
}

.box350 {
    width: 200px;
    //height: 300px;
    //background:#EBB056;
}