html, body,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
	margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

body{
    background :#FFF url(../images/css/mainBG.gif) repeat-x 0 300px;
    font-size: 1em;
    font-family:
    	"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",'メイリオ',Meiryo,sans-serif;
    color: #555;
}

/* Links */
a,a:visited {
	color:#333333;
	text-decoration: none;
	-moz-transition: color 0.3s linear;
	-webkit-transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
}
	a:hover,a:active{
		color:#0099FF;
		text-decoration:none;
	}
	
a:active,a:focus {outline:0 none;}

/****************************************
2. Layout
*****************************************/
header{background:url(../images/css/header.gif) repeat-x; height:43px}
footer{background:url(../images/css/footer.gif) repeat-x; height:43px}
#headTitle,
#footTitle{max-width:790px; height:43px; margin:0 auto; clear:both}
#headLogo{float:left; padding:10px 0}
#footLogo{float:left; padding:12px 0}
#headText,
#footText{float:right; line-height:43px;}
#headText a h1,
#footText a h2{margin:0; padding:0; font-size:14px; text-shadow: 1px 1px 2px #FFF}

.maru{
	border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
}
/****************************************
3. Contents
*****************************************/
#root { max-width: 790px; margin: 0 auto; }
#topImg { width: 100%; float:left }
#gallery { width: 100%; background:#f1f1f1; padding:10px 0; float:left; margin-bottom:20px}
.imgBox { float: left; text-align:center; width:20% }
.imgBox img
{width:90%; max-width:120px; border:#CCCCCC 1px solid; margin-bottom:5px; padding:2%; background-color:#FFFFFF}

.prodTitle{clear:both}

#banner{margin-bottom:30px; clear:both}

#banner a.more{background:#0099FF; width:260px; height:45px; line-height:45px; padding:0 20px; display:block; font-size:16px; text-align:right; color:#FFFFFF; margin:0 10px; position:relative; margin:0 auto}
#banner a.more .camera{width:64px; height:64px; position:absolute; top:-12px; background:url(../images/css/camera.png)}

/****************************************
4. Responsive
*****************************************/

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
	#topImg { width: 100%; }
	#gallery { width: 100%; }
	.imgBox { width: 20%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
	#topImg { width: 100%; }
	#gallery { width: 100%; }
	.imgBox { width: 33.3%; }
	body { font-size:80%; background-position:0 230px }
	#headLogo{float:left; padding:10px 0 0 10px}
	#footLogo{float:left; padding:12px 0 0 10px}
	#headText{float:right; line-height:43px; padding-right:10px}
	#footText{float:right; line-height:43px; padding-right:10px}
	#headText a h1,
	#footText a h2{font-size:11px; text-shadow: 1px 1px 2px #FFF}
	.prodTitle h2,
	.prodTitle p{padding:0 10px}
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
	#topImg { width: 100%; }
	#gallery { width: 100%; }
	.imgBox { width: 33.3%; }
	body { font-size:80%; background-position:0 230px  }
	#headLogo{float:left; padding:10px 0 0 10px}
	#footLogo{float:left; padding:12px 0 0 10px}
	#headText{float:right; line-height:43px; padding-right:10px}
	#footText{float:right; line-height:43px; padding-right:10px}
	#headText a h1,
	#footText a h2{font-size:11px; text-shadow: 1px 1px 2px #FFF}
	.prodTitle h2,
	.prodTitle p{padding:0 10px}
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px){
	#topImg { width: 100%; }
	#gallery { width: 100%; }
	.imgBox { width: 50%; }
	body { font-size:70%; background-position:0 100px  }
	#headLogo,
	#footLogo{float:none; text-align:center}
	#headText,
	#footText{display:none}
	.prodTitle h2,
	.prodTitle p{padding:0 10px}
	
	#banner a.more{background:#0099FF; width:96%; height:35px; line-height:35px; padding:0; display:block; font-size:14px; color:#FFFFFF; margin:0 10px; position:relative; margin:0 auto; text-align:center}
	#banner a.more .camera{display:none}
	
}