@charset "UTF-8";
/* CSS Document */

body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	text-align:center;
	line-height: 20px;
	color: #333333;
	background-image:url(../images/bg.gif);
}
h2,h3,h4,h5{
	font-size: 1px;
	line-height: 1px;
	text-align:left;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	overflow: hidden;
	margin: 0px;
	padding:0px;
}
a,a:visited{ color:#996633; }
a:hover,a:active{ color:#CC0000; }

.btn a{
	font-size: 1px;
	line-height: 1px;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
.btn a:hover{
	background-position: left bottom;
}

#container{
	width:940px;
	margin:0 auto 40px auto;
	padding:25px 0;
}
#container h1,#container h2,#container h3,.btn a{
	font-size:1px;
	line-height:1px;
	text-indent:-1000em;
	background-repeat:no-repeat;
	background-position:left top;
	display:block;
	overflow:hidden;
}
#container #visual{
	text-align:left;
	background-image:url(../images/visual.jpg);
	background-repeat:no-repeat;
	height:540px;
	position:relative;
	margin-bottom:20px;
}
#container #visual h1{
	background-image:url(../images/body.png);
	width:400px;
	height:73px;
	position:absolute;
	left:40px;
	top:40px;
}
#container #visual h2{
	background-image:url(../images/text.png);
	width:400px;
	height:163px;
	position:absolute;
	left:40px;
	top:150px;
}
#container #visual h3{
	background-image:url(../images/catchcopy.png);
	width:401px;
	height:145px;
	position:absolute;
	left:40px;
	top:350px;
}
#container #flavor{
	text-align:left;
	margin-bottom:20px;
}
#container #flavor .line{
	margin-bottom:10px;
}
#container #flavor dl{
	width:300px;
	float:left;
	margin-left:20px;
	display:block;
}
#container #flavor dl:first-child{ margin-left:0px; }
#container #flavor dt{
	font-weight:bold;
	text-align:center;
	margin-bottom:15px;
}
#container #flavor dt.photo{
	line-height:1px;
}
#container #flavor dd{
	font-size:0.9em;
}
#container #flavor dd.data span{
	display:block;
	padding:10px;
	background-color:#e9e4df;
	border-radius:5px;
}
#container #flavor dd.data table{ width:100%; }
#container #flavor dd.data th{
	font-weight:bold;
	text-align:left;
	width:20%;
}
#container #flavor dd.list td{
	width:auto;
	padding-left:15px;
}
/* type */
#container #type{
	padding:40px 40px 60px 40px;
	margin-bottom:40px;
	background-color:#F8F8F8;
	background-image:url(../images/bg_type.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	position:relative;
}
#container #type .photo{
	width:150px;
	height:150px;
	right:-10px;
	bottom:-50px;
	position:absolute;
}
#container #type h3{
	text-align:left;
	background-image:url(../images/body_list.png);
	height:26px;
	margin-bottom:40px;
}
#container #type .list{
	width:600px;
}
#container #type .list table{
	width:100%;
	border-top:solid 1px #CCC;
}
#container #type .list th{
	text-align:left;
	font-weight:bold;
	vertical-align:middle;
	width:150px;
	padding:10px 0;
	border-bottom:solid 1px #CCC;
}
#container #type .list td{
	text-align:left;
	padding:10px 0;
	border-bottom:solid 1px #CCC;
}
#container #type .list td dl{ margin-bottom:10px; }
#container #type .list td dt{
	width:100px;
	margin-left:10px;
	padding-top:3px;
	float:left;
	display:block;
}
#container #type .list td dd.btn{
	width:105px;
	float:right;
	display:block;
}
#container #type .list td dd.btn a{
	background-image:url(../images/btn_combo.gif);
	background-position:left top;
	height:25px;
}
#container #type .list td dd.btn a:hover{
	background-position:left bottom;
}

/* howto */
#container #howto{ margin-bottom:40px; }
#container #howto h3{
	background-image:url(../images/visual_howto.png);
	background-position:center top;
	height:256px;
	margin-bottom:40px;
}
#container #howto .text{
	text-align:left;
	width:720px;
	margin:0 auto;
}
#container #howto .text h4{
	background-image:url(../images/title_howto_combo.png);
	height:35px;
	margin-bottom:20px;
}
#container #howto .text ul{
}
#container #howto .text li{
	display:block;
	padding:3px 0 0 25px;
	margin-bottom:10px;
	background-repeat:no-repeat;
	background-position:0px 3px;
}
#container #howto .text li.num1{ background-image:url(../images/num1.png); }
#container #howto .text li.num2{ background-image:url(../images/num2.png); }
#container #howto .text li.num3{ background-image:url(../images/num3.png); }
#container #howto .text li.num4{ background-image:url(../images/num4.png); }

#container #howto .text .text-left{
	width:350px;
	float:left;
}
#container #howto .text .text-left h4{
	background-position:left top;
}
#container #howto .text .text-right{
	width:350px;
	float:right;
}
#container #howto .text .text-right h4{ background-position:right top; }

/* foot */
#container #footer{
}
#container #footer h3{
	text-align:left;
	background-image:url(../images/body_foot.png);
	background-position:center top;
	height:185px;
	margin-bottom:20px;
}
#container #footer .btnset{
	width:740px;
	margin:0 auto;
}
#container #footer .btnset .btn{
	float:right;
	text-align:left;
	width:360px;
}
#container #footer .btnset .btn a{
	background-image:url(../images/btn_buy.gif);
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
	height:60px;
	display:block;
}
#container #footer .btnset .btn.btn-l{
	float:left;
}
#container #footer .btnset .btn.btn-l a{
	background-position:0px 0px;
}
#container #footer .btn.btn-l a:hover{
	background-position:0px -60px;
	box-shadow:0px 3px 7px 0px rgba(0,0,0,0.7);
}
#container #footer .btnset .btn.btn-r a{
	background-position:-360px 0px;
}
#container #footer .btn.btn-r a:hover{
	background-position:-360px -60px;
	box-shadow:0px 3px 7px 0px rgba(0,0,0,0.7);
}


/* credit */
#credit{
	background-color:#FFFFFF;
	padding:40px 0;
}
#credit p:first-child{ margin-bottom:10px; }











/* clearfix ------------------------------------------------------------------------------
----------------------------------------------------------------------------------------- */
.package:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.package {
	zoom: 100%;
}
.package {
	display: inline-table;
}
/* Hides from IE-mac ￥*/
* html .package {
	height: 1%;
}
.package {
	display: block;
}
/* End hide from IE-mac */



/* margin ------------------------------------------------------------------------------
----------------------------------------------------------------------------------------- */
.nm{
	margin:0px !important;
}
.mb0{
	margin-bottom:0px !important;
}
.mb5{
	margin-bottom:5px !important;
}
.mb10{
	margin-bottom:10px !important;
}
.mb15{
	margin-bottom:15px !important;
}
.ml20{
	margin-left:20px !important;
}
.ml30{
	margin-left:30px !important;
}