@charset "utf-8";

/* ============================================================ column base */

#contentAll {
	position: relative;
	color: #333333;
}

#contentAll h1 {
	padding: 0;
}

#contentTitleSub a:link,
#contentTitleSub a:visited {
	display: block;
	width: 110px;
	height: 14px;
	background: url("../../img/btn_backnum.gif") left top no-repeat;
	text-indent: -9999px;
}

#contentTitleSub a:hover,
#contentTitleSub a:active {
	background: url("../../img/btn_backnum.gif") left -20px no-repeat;
}

#columnTitle {
	width: 720px;
	margin: 0 auto;
	background: url("../img/title_img.gif") right top no-repeat;
}

#columnNavi ul {
	width: 740px;
	height: 38px;
	background: url("../img/navi.gif") left -50px no-repeat;
}

#columnNavi ul li#navi01,
#columnNavi ul li#navi02,
#columnNavi ul li#navi03 {
	float: left;
	width: 187px;
	height: 38px;
	text-indent: -9999px;
}

#columnNavi ul li#navi04 {
	float: left;
	width: 179px;
	height: 38px;
	text-indent: -9999px;
}

#columnNavi ul li a {
	display: block;
	width: 179px;
	height: 38px;
	text-indent: -9999px;
}

#columnNavi ul li#navi01 a:link,
#columnNavi ul li#navi01 a:visited {
	background: url("../img/navi.gif") left top no-repeat;
}

#columnNavi ul li#navi01 a:hover,
#columnNavi ul li#navi01 a:active {
	background: url("../img/navi.gif") left -50px no-repeat;
}

#columnNavi ul li#navi02 a:link,
#columnNavi ul li#navi02 a:visited {
	background: url("../img/navi.gif") -187px top no-repeat;
}

#columnNavi ul li#navi02 a:hover,
#columnNavi ul li#navi02 a:active {
	background: url("../img/navi.gif") -187px -50px no-repeat;
}

#columnNavi ul li#navi03 a:link,
#columnNavi ul li#navi03 a:visited {
	background: url("../img/navi.gif") -374px top no-repeat;
}

#columnNavi ul li#navi03 a:hover,
#columnNavi ul li#navi03 a:active {
	background: url("../img/navi.gif") -374px -50px no-repeat;
}

#columnNavi ul li#navi04 a:link,
#columnNavi ul li#navi04 a:visited {
	background: url("../img/navi.gif") -561px top no-repeat;
}

#columnNavi ul li#navi04 a:hover,
#columnNavi ul li#navi04 a:active {
	background: url("../img/navi.gif") -561px -50px no-repeat;
}

.columnMain {
	width: 700px;
	padding: 19px;
	border: solid 1px #DFDFDF;
}



/* ============================================================ column all */

.productBox {
	clear: both;
}

.productTxt {
	float: left;
	width: 450px;
}

.productImg {
	float: right;
	width: 250px;
}

h4 {
	margin: 0 0 20px;
}

.productTxt p {
	margin: 0 0 1em;
}

.btnDetail a:link,
.btnDetail a:visited {
	float: left;
	display: block;
	width: 145px;
	height: 30px;
	margin: 0 3px 3px 0;
	background: url("../img/btn_detail.gif") left top no-repeat;
	text-indent: -9999px;
}

.btnDetail a:hover,
.btnDetail a:active {
	background: url("../img/btn_detail.gif") left -30px no-repeat;
}

.btnDetail2 a:link,
.btnDetail2 a:visited {
	display: block;
	width: 130px;
	height: 25px;
	margin: 0 0 30px;
	background: url("../img/btn_detail2.gif") left top no-repeat;
	text-indent: -9999px;
}

.btnDetail2 a:hover,
.btnDetail2 a:active {
	background: url("../img/btn_detail2.gif") left -30px no-repeat;
}

.btnDetail3 a:link,
.btnDetail3 a:visited {
	float: left;
	display: block;
	width: 145px;
	height: 30px;
	margin: 0 0 3px;
	background: url("../img/btn_detail3.gif") left top no-repeat;
	text-indent: -9999px;
}

.btnDetail3 a:hover,
.btnDetail3 a:active {
	background: url("../img/btn_detail3.gif") left -30px no-repeat;
}



/* ============================================================ column01 */

.c1Title {
	background: url("../img/divline.gif") left bottom no-repeat;
}

.c1Title h3 {
	margin: 0 0 10px;
}

.c1Img {
	float: right;
	margin: 15px 0 0;
}

.reasonBox {
	clear: both;
	margin: 0 0 10px;
	background: url("../img/c1_r_mdl.gif") left top repeat-y;
}

.reasonTxt {
	float: left;
	width: 450px;
	padding: 10px 0 10px 25px;
}

.reasonImg {
	float: right;
	width: 185px;
	padding: 10px 25px 0px 0;
}

.reasonTxt2 {
	float: left;
	width: 355px;
	padding: 10px 0 10px 25px;
}

.reasonImg2 {
	float: right;
	width: 280px;
	padding: 10px 25px 10px 0;
}

h5 {
	margin: 0 0 10px;
}

.c1Arrow {
	width: 200px;
	margin: 30px auto 20px;
}

.c1Table {
	width: 700px;
	margin: 0 auto 30px;
}

.c1Table table {
	width: 100%;
	border: solid 1px #CCCCCC;
	border-collapse: collapse;
}

.c1Table table th,
.c1Table table td {
	padding: 0.5em 0.5em;
	border: 1px solid #CCCCCC;
}

.Cell1 {
	background-color: #FFFFFF;
}

.Cell2 {
	background-color: #55BDB4;
	color: #FFFFFF;
	font-weight: bold;
}

.Cell3 {
	background-color: #1D77BC;
	color: #FFFFFF;
	font-weight: bold;
}

.itemCell {
	background-color: #ECEDE7;
	font-weight: bold;
}

.dataCell {
	background-color: #F6FFF8;
}

.c1Graph {
	width: 700px;
	margin: 0 auto 20px;
}

.graphImg {
	float: left;
	margin: 0 20px 0 0;
}

.bannerBox {
	width: 700px;
	margin: 10px auto 30px;
	text-align: center;
}

.bannerBoxSky {
	position: absolute;
	top: 0px;
	left: 770px;
	width: 100px;
}



/* ============================================================ column02 */

.c2Title {
	background: url("../img/c2_img.gif") right bottom no-repeat;
}

.c2Title h3 {
	margin: 0 0 10px;
}

.c2Title p {
	width: 530px;
}



/* ============================================================ column03 */

.c3Title {
	background: url("../img/c2_img.gif") right bottom no-repeat;
}

.c3Title h3 {
	margin: 0 0 10px;
}

.c3Title p {
	width: 550px;
}

.c3SubTitle1 {
	margin: 25px 0 15px;
}

.c3SubTitle2 {
	margin: 50px 0 15px;
}

.brClear {
	clear: both;
	height: 0px;
	background: #FFFFFF;
}

.opBox1 {
	background: #FFFFDF;
}

.opBox1Left {
	float: left;
	width: 450px;
}

.opBox1Left p {
	margin: 0 0 0 20px;
}

.opBox1Right {
	float: left;
	width: 160px;
	padding: 20px 0 0 90px;
}

.opCopy {
	color: #FE5200;
	font-weight: bold;
}

.opBox2 {
	background: url("../img/c3_op2_mdl.gif") left top repeat-y;
}

.opBox2Left {
	float: left;
	width: 345px;
}

.opBox2Left p {
	margin: 0 20px;
}

.opBox2Right {
	float: right;
	width: 345px;
}

.opBox2Right p {
	margin: 0 20px;
}

.opBoxImg {
	float: right;
	width: 117px;
	margin: 0 0 10px 10px;
}



/* ============================================================ column04 */

.columnMain4 {
	width: 700px;
	padding: 19px;
	background: #FFFEF4;
	border: solid 1px #DFDFDF;
}

.c4Title {
	background: url("../img/c4_img.gif") right bottom no-repeat;
}

.c4Title h3 {
	margin: 0 0 10px;
}

.c4Title p {
	width: 450px;
}

.brClear {
	clear: both;
	margin: 0 0 10px;
}

.c4Box {
	margin: 0 0 20px;
}

.c4Box h4 {
	margin: 0 0 5px;
}

.c4Box p {
	margin: 0 0 1em;
}

.c4Img {
	float: right;
	margin: 0 0 10px 10px;
}

.c4Txt {
	color: #882627;
	font-weight: bold;
}

.opBox3 {
	background: #FFFFDF url("../img/c4_op_mdl.gif") left top repeat-y;
}

.opBox3Left {
	float: left;
	width: 340px;
}

.opBox3Left p {
	width: 300px;
	margin: 0 20px 10px;
}

.opBox3Right {
	float: right;
	width: 340px;
}

.opBox3Right p {
	width: 300px;
	margin: 0 20px 10px;
}

.opsBox {
	width: 320px;
	margin: 0 auto;
	padding: 0 0 15px;
	background: #FFF4F4 url("../img/c4_ops_btm.gif") left bottom no-repeat;
}

.opsBox p {
	width: 280px;
	margin: 0 auto;
}

.opBr {
	height: 10px;
	background: #FFFEF4;
}

.c4Copy {
	width: 700px;
	margin: 10px auto 30px;
	text-align: center;
}

.c4refImg {
	width: 700px;
	height: 430px;
}

.c4refImg img {
	float: left;
}

.recipeBox {
	width: 700px;
	margin: 0 0 30px;
	background: #FFFFDF url("../img/c4_p4_rmdl.gif") left top repeat-y;
}

.recipeBoxMain {
	width: 660px;
	margin: 0 auto;
}

.p4subTitle {
	clear: both;
	margin: 20px 0 10px;
}

.recipeBoxMain ul {
	margin: 0 0 20px;
}

.recipeBoxMain li {
	height: 30px;
}

.recipeBoxMain li img {
	vertical-align: middle;
}