@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}
body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}


/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/


/* 印刷時に画面と変更するスタイルを定義 */

/* モバイルレイアウト : 640 px およびそれ以下. */

@media only screen and (max-width:640px) {
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#nav{
	width:100%;
	display:block;
	clear:both;
	margin-bottom:10px;
}

#main {
	clear: both;
	width: 100%;
	display: block;
}	
.info {
	clear: both;
	width: 100%;
	display: block;
	margin-bottom:10px;
}
.info h1{
	position:relative;
	margin-right:5px;
	padding:5px 5px 5px 15px;
	font:bold 15px/1.2 Arial, Helvetica, sans-serif;
	color:#666;
	background:#ccc;
	border-top:#ccc solid 1px;
	border-right:#999 solid 1px;
	border-bottom:#999 solid 1px;
	border-left:#ccc solid 1px;
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.5) inset;
    background-image: -webkit-gradient(linear, left top, left bottom,
			from(			 rgba(220, 220, 220, 1.0)), 
			color-stop(0.25, rgba(240, 240, 240, 1.0)),
			color-stop(0.30, rgba(235, 235, 235, 1.0)),
			color-stop(0.36, rgba(240, 240, 240, 1.0)),
			color-stop(0.50, rgba(235, 235, 235, 1.0)),
			color-stop(0.80, rgba(215, 215, 215, 1.0)),
			to(				 rgba(210, 210, 210, 1.0))
			);
	background-image: -webkit-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -moz-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -o-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: linear-gradient(to bottom,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);		
}
.info h1:before{
	content:" ";
	position:absolute;
	top:0;
	left:10px;
	width:0;
	height:100%;
	border-left:#ccc solid 1px;
}
.info h1:after{
	content:" ";
	position:absolute;
	top:0;
	left:9px;
	width:0;
	height:100%;
	border-right:#eee solid 1px;
}
#tom {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top:10px;
}
#news {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top:10px;		
}
#ovr{
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top:10px;
}

#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	border-top:#6CC solid 1px;
}
#footer ul{
	padding:0;
}
#footer ul li{
	display:block;
	list-style:none;
	padding-bottom:10px;
}
h4 {
  color: #FFF;
  background: #FAA8AE;
  font-size: 20px;
 border-left:10px solid #cc3366;
 padding:10px 0 10px 15px;
}

#product{
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  
.clear{
	clear:both;
}
.fontr{
	color:#F00;
	font-weight:bold;
}	
}


/* デスクトップレイアウト : 641 px ～最大 1232 px */
@media print, screen and (min-width: 641px){
.gridContainer {
	width: 88.2%;
	max-width: 1225px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
	background:#FFF;
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#nav{
	width:100%;
	float:left;
	display:block;
	margin-bottom:20px;
	font-weight:bold;
	}
.en{
	font-weight:normal;
}

#main {
	clear: both;
	width: 100%;
	display: block;
	position:relative;
}
.fontr{
	color:#F00;
	font-weight:bold;
}
.info {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
}
p.top{
	margin:0 10px 0 5px;
}
.info h1{
	position:relative;
	margin-right:5px;
	padding:10px 10px 10px 30px;
	font:bold 15px/1.2 Arial, Helvetica, sans-serif;
	color:#666;
	background:#ccc;
	border-top:#ccc solid 1px;
	border-right:#999 solid 1px;
	border-bottom:#999 solid 1px;
	border-left:#ccc solid 1px;
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.5) inset;
    background-image: -webkit-gradient(linear, left top, left bottom,
			from(			 rgba(220, 220, 220, 1.0)), 
			color-stop(0.25, rgba(240, 240, 240, 1.0)),
			color-stop(0.30, rgba(235, 235, 235, 1.0)),
			color-stop(0.36, rgba(240, 240, 240, 1.0)),
			color-stop(0.50, rgba(235, 235, 235, 1.0)),
			color-stop(0.80, rgba(215, 215, 215, 1.0)),
			to(				 rgba(210, 210, 210, 1.0))
			);
	background-image: -webkit-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -moz-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -o-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: linear-gradient(to bottom,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
}
	#info h1:before{
	content:" ";
	position:absolute;
	top:0;
	left:15px;
	width:0;
	height:100%;
	border-left:#ccc solid 1px;
}
.info h1:after{
	content:" ";
	position:absolute;
	top:0;
	left:16px;
	width:0;
	height:100%;
	border-right:#eee solid 1px;
}

#tom {
	float: left;
	width: 66.66%;
	display: block;
}


#ovr{
	width:33.33%;
	float:left;
	display:block;
}
#chin{
	width:85%;
	float:left;
}
#chinLo{
	width:15%;
	float:left;
	text-align:right;
}

#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	border-top:#6CC solid 1px;
	padding:10px 0;
}
#footer ul li{
	float:left;
	display:block;
	margin-right:2%;
	list-style:none;
}
h4 {
  color: #15159B;
  font-size: 20px;
 border-left:10px solid #cc3366;
 padding:10px 0 10px 10px;
}
img.right{
	float:right;
	margin-left:10px;
}
#product{ 
 clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}

.sasie{
	position:relative;
	top:50px;
	right:10px;
}
.clear{
	clear:both;
}
.sasie{
	position:absolute;
	top:0px;
	right:0px;
	}
}