@charset "utf-8"; 


/* 全体構造
---------------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, table, td, th, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin: 0px;
	padding: 0px;
}

body {
	text-align:center;
	font-size:12px;
	color:#666666;
	line-height:1.6;
	font-family:'メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS P Gothic',sans-serif,Arial, Helvetica, Verdana,;
}
a img,img{border:none; vertical-align:bottom; margin:0; padding:0;}
a {outline:none;}
hr{
	margin:0 0 0 0;
	border:none;
	padding:0;
	height:0;
	width:auto;
	visibility:hidden;
	clear:both;
	display: block;
}
fieldset{border:none;}

a:hover img{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}


/* リンク
---------------------------------------------------- */
a:link {
	color:#3ea1bc;
	text-decoration:none;
}
a:visited {
	color:#3ea1bc;
	text-decoration:none;
}
a:hover, a:active {
	color:#3ea1bc;
	text-decoration:underline;
}


/* 汎用スタイルシート
---------------------------------------------------- */
.red{ color:#FF0000;}
.none{display:none;}
.clear {clear:both;}
.clearfix:after{  
	content:".";  
	display:block;  
	visibility:hidden;  
	height: 0.1px;  
	font-size: 0.1em;  
	line-height:0;  
	clear: both;  
}
.clearfix{
	zoom:100%;
}
.kome{font-size:12px; color:#777;}

/* errer information
---------------------------------------------------- */
.success, .error{
    margin:10px 0px;
    padding:15px 10px 15px 30px;
}

.success{
    color: #4F8A10;
    background:url(../images/i-success.jpg) no-repeat #DFF2BF 10px center;
	border:1px solid #4f8a10;
}
.error{
    color: #9F6000;
    background:url(../images/i-error.jpg) no-repeat #f7dfcb 10px center;
	border:1px solid #a9644e;
}


/* 基本レイアウト
---------------------------------------------------- */
#wrapper{
	width:900px;
	margin:0 auto;
	text-align:left;
	padding-bottom:40px;
}
#content{
	width:800px;
	margin:0 auto;
	padding:30px 0;
	clear:both;
}


/* ヘッダー
---------------------------------------------------- */
#header{
	padding:20px 0;
}
#header h1{
	float:left;
}
#header p{
	float:right;
	margin-top:5px;
}


/* ナビゲーション
---------------------------------------------------- */
#navi{
	clear:both;
}
#navi li{
	list-style:none;
	float:left;
}
#navi li a{
	display:block;
	height:57px;
	text-indent:-9999px;
}

#navi1 a{background:url(../images/common/navi1.gif) no-repeat; width:128px;}
#navi2 a{background:url(../images/common/navi2.gif) no-repeat; width:128px;}
#navi3 a{background:url(../images/common/navi3.gif) no-repeat; width:128px;}
#navi4 a{background:url(../images/common/navi4.gif) no-repeat; width:128px;}
#navi5 a{background:url(../images/common/navi5.gif) no-repeat; width:128px;}
#navi6 a{background:url(../images/common/navi6.gif) no-repeat; width:128px;}
#navi7 a{background:url(../images/common/navi7.gif) no-repeat; width:132px;}

#navi1 a:hover{background:url(../images/common/navi1.gif) no-repeat 0 -57px; width:128px;}
#navi2 a:hover{background:url(../images/common/navi2.gif) no-repeat 0 -57px; width:128px;}
#navi3 a:hover{background:url(../images/common/navi3.gif) no-repeat 0 -57px; width:128px;}
#navi4 a:hover{background:url(../images/common/navi4.gif) no-repeat 0 -57px; width:128px;}
#navi5 a:hover{background:url(../images/common/navi5.gif) no-repeat 0 -57px; width:128px;}
#navi6 a:hover{background:url(../images/common/navi6.gif) no-repeat 0 -57px; width:128px;}
#navi7 a:hover{background:url(../images/common/navi7.gif) no-repeat 0 -57px; width:132px;}

#navi1-on a{background:url(../images/common/navi1.gif) no-repeat 0 -57px; width:128px;}
#navi2-on a{background:url(../images/common/navi2.gif) no-repeat 0 -57px; width:128px;}
#navi3-on a{background:url(../images/common/navi3.gif) no-repeat 0 -57px; width:128px;}
#navi4-on a{background:url(../images/common/navi4.gif) no-repeat 0 -57px; width:128px;}
#navi5-on a{background:url(../images/common/navi5.gif) no-repeat 0 -57px; width:128px;}
#navi6-on a{background:url(../images/common/navi6.gif) no-repeat 0 -57px; width:128px;}
#navi7-on a{background:url(../images/common/navi7.gif) no-repeat 0 -57px; width:132px;}


/* フッター
---------------------------------------------------- */
.pagetop{
	text-align:right;
	clear:both;
}
#footer{
	text-align:center;
	padding:10px 0 10px 0;
	margin-top:10px;
	font-size:10px;
	border-top:1px solid #e3e3e3;
}
#footer ul{
	margin-bottom:20px;
}
#footer li{
	display:inline;
	margin:0 5px 0 5px;
	border-right:1px solid #ccc;
	padding-right:15px;
}
#footer .nobd{
	border-right:none;
}

#footer .lbd{
	padding-left: 15px;
	border-left:1px solid #ccc;	
}


/* TOPページ
---------------------------------------------------- */
#main{
	margin-top:20px;
	clear:both;
}
#main li{
	width:300px;
	float:left;
	list-style:none;
}
#main a:hover img{
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}



#top-banner {
	margin-bottom:50px;
}
#top-banner li{
	list-style:none;
	float:left;
}

#top-flow{
	padding-bottom:30px;
}

#wn{
	width:860px;
	height:200px;
	border:1px solid #e3e3e3;
	padding:10px 19px;
	overflow:auto;
	margin-bottom:30px;
}

#wn dl dt{
	clear:left;
	float:left;
	width:10em;
	clear:both;
}
#wn dl dd{
	padding:0px 0.5em 20px 10em;
}


/*　商品ページ
---------------------------------------------------- */
#product{
	background:url(../images/product/bg.gif) repeat-y;
	width:900px;
	clear:both;
	margin:20px 0;
	font-size:14px;
}
#product p{
	margin-bottom:1em;
}
#product h2{
	margin-bottom:10px;
}
#product h3{
	margin-bottom:5px;
}
.line{
	clear:both;
	padding:0;
	background:url(../images/product/line.gif);
	width:900px;
	height:3px;
}
.line hr{
	display:none;
}


/*　写真切り替え
------------------------ */
.change-img{
	text-align:center;
	font-size:12px;
	padding-top:5px;
}
.change-img a{
	color:#CCC;
	padding:0 5px;
	text-decoration:none;
}
.try a strong{
	color:#89c089;
}
.change a strong{
	color:#f09285;
}
.premium a strong{
	color:#444;
}


/*　BOX
------------------------ */
.box1{
	float:left;
	width:285px;
	padding:15px 15px 0 0;
}
.box2{
	float:left;
	width:270px;
	padding:15px 15px 5px 15px;
}
.box3{
	float:left;
	width:285px;
	padding:15px 0 0 15px;
}
.box4{
	float:left;
	width:288px;
	padding:6px 6px 0 6px;
}
.box5{
	float:left;
	width:270px;
	padding:5px 15px 0 15px;
}
.box6{
	float:left;
	width:296px;
	padding:2px 0 2px 4px;
}


/*　購入セクション
------------------------ */
form label span{
	font-size:10px;
	margin-left:10px;
}
.option{
	font-size:12px;
	padding:15px 0;
}
.option label{
	margin-left:5px;
}
.buy{
	font-size:12px;
}
.buy input{
	vertical-align:middle;
}
.count{
	width:2em;
	padding:5px;
	margin:0 5px;
	border:1px solid #ccc;
	text-align:center;
	font-size:14px;
}
.btn-up{
	margin-right:20px;
	margin-bottom:3px;
}

.buy-pt{
	padding-top:0;
}
.product-data{
	font-size:12px;
	padding:0 0 20px 20px;
}



/*　インタビューページ
---------------------------------------------------- */
#iv{
	width:900px;
	clear:both;
	margin:20px 0;
	font-size:14px;
}
#iv-main{
	width:700px;
	float:left;
}
#iv-sub{
	width:180px;
	float:right;
}

#iv-main h3{
	padding-top:30px;
}
#iv-sub img{
	margin-bottom:15px;
}
#iv-main .btn{
	margin-top:50px;
}
#iv .left-txt{
	float:left;
	width:380px;
}
#iv .right-photo{
	float:right;
	width:300px;
}
#iv .right-txt{
	float:right;
	width:380px;
}
#iv .left-photo{
	float:left;
	width:300px;
}


.try .left-txt h4,
.try .right-txt h4{
	color:#56801c;
	margin-bottom:10px;
}

.change .left-txt h4,
.change .right-txt h4{
	color:#d7786b;
	margin-bottom:10px;
}
.check{
	padding-top:30px;
}



/* 商品案内
---------------------------------------------------- */
#content .box,
#content .box-s{
	font-size:12px;
}
#content .box h2,
#content .box-s h2{
	margin-bottom:10px;
}
#content .box h3{
	margin-top:20px;
}


#content .box{
	width:778px;
	margin:0 auto;
	border:1px solid #e3e3e3;
	padding:10px;
	margin-bottom:50px;
}
#content .box .photo{
	width:300px;
	float:left;
}
#content .box .txt{
	float:right;
	width:458px;
}

#content .box-s{
	clear:both;
	width:678px;
	margin:0 auto;
	border:1px solid #e3e3e3;
	padding:10px;
	margin-bottom:10px;
}
#content .box-s .photo-right{
	float:right;
	width:200px;
}
#content .box-s .txt-left{
	float:left;
	width:458px;
}

#content .box-s .photo-left{
	float:left;
	width:200px;
}
#content .box-s .txt-right{
	float:right;
	width:458px;
}

.photo3{
	text-align:center;
	padding-top:10px;
}
.photo3 img{
	margin:0 10px;
}

#content .kome{
	padding-top:5px;
	font-size:10px;
}
.arrow{
	clear:both;
	text-align:center;
	margin-bottom:10px;
}
.book{
	padding:10px 0;
}
.book img{
	margin-right:35px;
}

/* 会社概要
---------------------------------------------------- */
#content table{
	border-collapse:collapse;
	width:100%;
	margin-bottom:30px;
}
#content table td,
#content table th{
	border:1px solid #ccc;
	padding:5px;
}
#content table th{
	width:200px;
	background:#f3f3f3;
	font-weight:normal;
}
#content h2{
	font-size:14px;
}



/* 会社概要
---------------------------------------------------- */
#cart {
	padding-top:30px;
	padding-bottom:30px;
}
#cart h2{
	font-size:16px;
	border-bottom:1px dotted #ccc;
	margin-bottom:10px;
}
#cart table{
	border-collapse:collapse;
	width:100%;
	margin-bottom:30px;
	margin-top:10px;
}
#cart table td,
#cart table th{
	border:1px solid #ccc;
	padding:5px;
}
#cart table th{
	background:#f3f3f3;
	font-weight:normal;
}

.tblareabtn p{
	padding-bottom:20px;
}
.tblareabtn img{
	vertical-align:top;
	margin-right:20px;
}

/* Form textfield textarea
---------------------------------------------------- */
.textfield-1,
.textfield-2,
.textfield-3,
.textfield-4,
.textfield-5,
.box380,
.box300,
.box260,
.box160,
.box120,
.box60{
	padding:4px 3px;
	border:1px solid #ddd;
	margin:2px 0;
}
.textfield-1{width:30px;}
.textfield-2{width:100px;}
.textfield-3{width:200px;}
.textfield-4{width:350px;}
.textfield-5{width:595px;}

.textarea-1,
.textarea-2,
.textarea-3{
	padding:4px 3px;
	margin-bottom:20px;
	border:1px solid #999;
}
.textarea-1{width:595px; height:100px;}
.textarea-2{width:595px; height:200px;}
.textarea-3{width:595px; height:350px;}
.textarea-4{width:425px; height:150px;}
.textarea-5{width:395px; height:200px;}


.submit-button{
	text-align:center;
	padding:20px 0 0 0;
}
.submit-button2{
	padding:20px 0 0 0;
}
.submit-button input,
.submit-button2 input{
	background:#372f26;
	border:#2b231b 1px solid;
	padding:5px 5px;
	color:#b2aaa1;
	text-align:center;
	cursor:pointer;
}
.submit-button input:hover,
.submit-button2 input:hover{
	background:#483f36;
	border:#2b231b 1px solid;
	padding:5px 5px;
	color:#b2aaa1;
	text-align:center;
	cursor:pointer;
}

.file{
	padding:4px 3px;
	width:300px;
}
.attention{
	color:#F00;
}

.flowarea{
	text-align:center;
	margin-bottom:30px;
}
.payarea02{
	margin-bottom:20px;
}


/* mypage
---------------------------------------------------- */
#mynavarea{
	width:170px;
	float:left;
}
#mynavarea li{
	list-style:none;
}
#mycontentsarea{
	width:700px;
	float:right;
}