@charset "utf-8";
/* style reset */

html,body,div,h1,h2,h3,h4,h5,h6,
p,ul,ol,li,dl,dt,dd,address,hr,
pre,blockquote,del,form,table,caption,tr,th,td {
  padding: 0;
  margin: 0;
}
h1,h2,h3,h4,h5,h6 {
 font-size: 1em; font-weight:normal;
}
img, object {
  border: 0;
  vertical-align: bottom;
}
ul,dl,ol{text-indent:0;}
li{list-style:none;}

sub {
  line-height: 1;
  vertical-align: text-bottom;
}
table{border-collapse:collapse; border-spacing:0; font-size:inherit;}
th,td{
	text-align:left;
	vertical-align:top;
	margin: 0px;
	padding: 0px;
}


/*index
------------------------------*/
#wrapper_top {
	width:780px;
	height:507px;
	margin:0 auto 0px;
	background-image: url(../images/top_bg.jpg);
	background-repeat: no-repeat;
}
#con{
	width:735px;
	height:115px;
	margin:0 auto;
}
#con h2{
float:left;
width:157px;}
#con h3{
float:right;
width:578px;}
#con2 {
	width:735px;
	height:358px;
	margin: 0px 24px 0px 21px;
}
#con2  ul li {
	float: left;
}
#con3  {
	float: left;
	margin-left: 21px;
}
#con3  ul li {
	float: left;
	margin-bottom:0;
}
/*contents
------------------------------*/
#wrapper {
	width:780px;
	margin:0 auto 0px;
	background-image: url(../images/back_mid2.gif);
	background-repeat: repeat-y;
}
#wrapper sub {
font-size:0.6em;
}
#illust {
	position: relative;
}
#illust  p {
	position:absolute;
	top: 0px; left: 430px;
	background-image: url(../images/illust.png);
	background-repeat: no-repeat;
	width:276px;
	height:201px;
}
#back_bottom {
	background:url(../images/back_bottom.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	padding: 0px;
	width: 780px;
	height:129px;
	font-size:1px;
	clear: both;
	margin: 0px auto;
}
#detail {
	width: 580px;
	margin-right: auto;
	margin-left: auto;
}
#detail h1 {
	float: left;
}
#detail h2 {
	float: right;
}
#detail h3 {
	clear: both;
	margin-bottom: 15px;
}
#white {
	margin-right: auto;
	margin-left: auto;
	width: 660px;
}
#white_bottom{
	background:url(../images/white_round_bottom.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 21px;
	padding: 0px;
	width: 660px;
	margin: 0px auto;
	font-size:1px;
	clear: both;
	}
#topMain {
	clear: both;
	width: 780px;
	background-image: url(../images/back_mid.jpg);
	background-repeat: no-repeat;
	background-position: top;
}
#tubMenu  {
	background-image: url(../images/back_top.gif);
	background-repeat: no-repeat;
	background-position: top;
	margin:0px auto;
	width:780px;
	height: 103px;
z-index: 1;
}
#tubMenu h1 {
	border-style: none;
	float: left;
	margin-top: 13px;
	position: relative;
	left: 0px;
	top: 0px;
	margin-left: 60px;
	display:inline;
}
#tubMenu  ul  {
	float: right;
	width: 285px;
	height: 83px;
	margin-top: 13px;
	margin-right: 58px;
	display:inline;
}

#tubMenu ul li  {
	display:inline;
		width: 95px;
	height: 83px;
	display:block;
	overflow:hidden;
	float: left;
}
.mask {
    clear: both;
	position: relative;
}

.mask img { position: absolute; top: -13px; left: 0px; }


#tubMenu ul li a {
	width: 95px;
	height: 83px;
	display:block;
	overflow:hidden;
	float: left;
}

#area1 {
	width: 580px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
#area1 h2 {
	float: left;
}

#area1 table {
	margin: 0px auto 10px;
	padding: 0px;
	width: 550px;
	clear: both;
}
#area1  p {
	text-align:left;
	font-size:0.9em;
}
#material {
width:550px;
}
#area2 {
	width: 660px;
	margin-right: auto;
	margin-left: auto;
}
#area2  ul li {
	float: left;
	margin-top: 70px;
}
#attention{
	color:#333333;
	font-size:0.8em;
	margin-bottom: 10px;
}
#rinkbtn {
	width: 580px;
	clear: both;
}
#rinkbtn   .imgover  {
	float: right;
}

 .textspace  {    
 margin-left: 1em;  
text-indent: -1em;  
 } 

/*vitamin
------------------------------*/
#vitamin{
	background-color:#fceaea;
	padding:17px 15px 0px;
	margin: 0px;
	background-image: url(../images/round_top.gif);
	background-repeat: no-repeat;
	background-position: top;
	width: 550px;
}
#vitamin table td{
	background-repeat:repeat-x;
	background-image: url(../images/ten_v.gif);
	background-position: center;
	}
#vitamin  p {
	text-align:left;
	font-size:0.9em;
	color:#db4a4a;
	font-size: 0.8em;
	line-height: 1.2em;
	background-color: #fceaea;
}
#vitamin_bottom{
	background:url(../images/round_bottom.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 15px;
	padding: 0px;
	width: 580px;
	margin: 0px 0px 10px;
	font-size:1px;
	}
#attention_v{
color:#d41118;
font-weight:bold;
font-size:0.9em;
}
.box_v{
width:550px; 
font-size:1px;
border-bottom: 2px solid #f5adae;
height:7px;
margin-bottom:7px;
clear: both;
}
.box2_v{
width:580px; 
font-size:1px;
border-bottom: 2px solid #f5adae;
height:7px;
margin-bottom:7px;
clear: both;
}
.name_v  {
	float: left;
	padding: 2px;
	background-color: #fceaea;
 }
.name2_v {
	padding: 2px 2px 2px 30px;
	float: left;
	background-color: #fceaea;
}
.gram_v  {
	float: right;
	padding: 2px;
	background-color: #fceaea;
 }
.gram2_v {
	float: right;
	padding: 2px;
	margin-left: 25px;
	background-color: #fceaea;
}
.position_v { position: relative; width:100%;}
.position_v img { 
position: absolute;  top: -83px; left: 437px; }


/*collagen
------------------------------*/
#collagen{
	background-color:#e8f3e2;
	padding:17px 15px 0px;
	margin: 0px;
	background-image: url(../images/round_top_c.gif);
	background-repeat: no-repeat;
	background-position: top;
	width: 550px;
}
#collagen p {
	color:#57911d;
	font-size: 0.8em;
	line-height: 1.2em;
	background-color: #e8f3e2;
}
#collagen_bottom{
	background:url(../images/round_bottom_c.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 15px;
	padding: 0px;
	width: 580px;
	margin: 0px 0px 10px;
	font-size:1px;
	}
	#collagen table td{
	background-repeat:repeat-x;
	background-image: url(../images/ten_c.gif);
	background-position: center;
	}
#attention_c{
color:#00920b;
font-weight:bold;
font-size:0.9em;
}
.box_c{ 
width:550px;
font-size:1px;
border-bottom: 2px solid #aedba4;
height:7px;
margin-bottom:7px;
clear: both;}
.box2_c{
width:580px; 
font-size:1px;
border-bottom: 2px solid #aedba4;
height:7px;
margin-bottom:7px;
clear: both;
}
.name_c  {
	float: left;
	padding: 2px;
	background-color: #e8f3e2;
 }
.name2_c {
	padding: 2px 2px 2px 30px;
	float: left;
	background-color: #e8f3e2;
}
.gram_c  {
	float: right;
	padding: 2px;
	background-color: #e8f3e2;
 }
.gram2_c {
	float: right;
	padding: 2px;
	margin-left: 25px;
	background-color: #e8f3e2;
}
.position_c { position: relative;  width:100%;}
.position_c img { position: absolute;  top: -83px; left: 532px; }

/*L-carnitine
------------------------------*/
#carnitine{
	background-color:#fee6f4;
	padding:17px 15px 0px;
	margin: 0px;
	background-image: url(../images/round_top_l.gif);
	background-repeat: no-repeat;
	background-position: top;
	width: 550px;
}
#carnitine p {
	color:#de3174;
	font-size: 0.8em;
	line-height: 1.2em;
	background-color: #fee6f4;
}
#carnitine_bottom{
	background:url(../images/round_bottom_l.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 15px;
	padding: 0px;
	width: 580px;
	margin: 0px 0px 10px;
	font-size:1px;
	}
#carnitine table td{
	background-repeat:repeat-x;
	background-image: url(../images/ten_l.gif);
	background-position: center;
	}	
#attention_l{
color:#e21c67;
font-weight:bold;
font-size:0.9em;
}
.box_l{ 
width:550px;
font-size:1px;
border-bottom: 2px solid #f8b1cf;
height:7px;
margin-bottom:7px;
clear: both;}
.box2_l{
width:580px; 
font-size:1px;
border-bottom: 2px solid #f8b1cf;
height:7px;
margin-bottom:7px;
clear: both;
}
.name_l  {
	float: left;
	padding: 2px;
	background-color: #fee6f4;
 }
.name2_l {
	padding: 2px 2px 2px 30px;
	float: left;
	background-color: #fee6f4;
}
.gram_l  {
	float: right;
	padding: 2px;
	background-color: #fee6f4;
 }
.gram2_l {
	float: right;
	padding: 2px;
	margin-left: 25px;
	background-color: #fee6f4;
}
.position_l { position: relative;  width:100%;}
.position_l img { position: absolute;  top: -83px; left: 627px; }