@charset "utf-8";

/*
============================================================
style.css
------------------------------------------------------------

■デフォルトリセット
■フォント
■メインイメージ
■コンテンツ共通

============================================================
*/


/* ---------------------------------------------------------
■デフォルトリセット
--------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0 none;
	border-collapse: collapse;
	color: inherit;
	/*font-size: 100%;*/
	font-style: inherit;
	font-weight: inherit;
	list-style-type: none;
	margin: 0;
	outline: medium none;
	padding: 0;
	table-layout: fixed;
	text-decoration: none;
	vertical-align: baseline; }



/* ---------------------------------------------------------
■フォント
--------------------------------------------------------- */
body { font-family: Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }







/* ---------------------------------------------------------
■全体共通
--------------------------------------------------------- */
/*
body {
	background-color: #B3B3B3; }
*/
	
#bg {
    background-color: #B3B3B3;
    font-size: 16px;
}
.contents {
	background-color: #FFF;
	margin: 0 0 5px 0; }

p { line-height: 1.6em; }





/* ---------------------------------------------------------
■コンテンツ共通
--------------------------------------------------------- */
#mainArea, #itemArea1, #itemArea2 {
	overflow: hidden;
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
	position: relative; }

 #itemArea2 p {
	font-size: 83%;}

p.contentsDesc {
	width: 80%;
	text-align: left; }

.contentsLeft, .contentsRight {
	width: 550px;
	height: 750px;
	position: absolute;
	top: 0; }

.contentsLeft { left: 0; }
.contentsRight { right: 0; }

.itemBox {
	width: 236px;
	text-align: center; }

.itemBox a {
	display: block;
	padding: 20px 10px;
	background-color: #FFF; }

.itemBox a:hover { background-color: #F7F7F7; }

.itemImage { margin: 0 0 10px 0; }

.itemColor {
	border-top: 1px dotted #CCC;
	border-bottom: 1px dotted #CCC;
	padding: 10px 0 8px 0; }

.itemInfo { padding: 5px 0; }

.itemInfo p.price {
	padding: 5px 0 10px 0;
	letter-spacing: 0.1em;
	color: gray;}




/* ---------------------------------------------------------
■コンテンツ別
--------------------------------------------------------- */
/*main Area*/
#mainArea { height: 590px; }

.logoArea, .mainImg, .imageItem { position: absolute; }

.logoArea {
	width: 550px;
	height: 370px;
	text-align: center;
	background-color: #fff;
	top: 0;
	right: 0; }

h1.mainLogo { margin: 34px 0 0 10px; }

.mainImg {
	width: 550px;
	height: 590px;
	top: 0;
	left: 0; }

.mainImg ul {
	overflow: hidden;
	width: 550px;
	height: 590px; }

.mainimg li {
	overflow: hidden;
	width: 550px;
	height: 590px; }

.imageItem {
	width: 550px;
	height: 220px;
	overflow: hidden;
	text-align: center;
	bottom: 0;
	right: 0;
	background: #eee; }

.imageItem li {
	width: 550px;
	height: 174px;
	padding: 40px 0 0 0;
	text-align: center; }

h3.imageItemTtl img { width: 280px; }
h3.imageItemTtl { margin: 0 0 20px 0; }
.imageItemImg img{width: 500px; }



/*lead Area*/
#leadArea { width: 100%; }
.contentsInner {
	width: 662px;
	height: 345px;
	margin: 0 auto;
	padding: 55px 0;}

h3.leadTtl {
	margin: 60px 0 40px 0;
	text-align: center; }

.lead_contents p{
	font-size: 83%;
	text-align: left;}

.lead_contents p span{
	color: #B3B3B3;
	font-size: 83%;
	text-align: center;
	letter-spacing: 0.1em;
}

.lead_contents p span br{
	display: none;
}

.imageArea {
	width: 1100px;
	height: 500px;
	position: relative; }

.contentsLeft2, .contentsRight2 {
	position: absolute;
	top: 0; }

.contentsLeft2 {
	width: 650px;
	height: 500px;
	left: 0; }

.contentsRight2 {
	width: 450px;
	height: 499px;
	border-bottom: 1px solid #CCC;
	right: 0; }

#itemArea2 h3 {
	text-align: center;
	margin: 150px 0 0 0; }

#itemArea2 p.contentsDesc { margin: 10px auto 60px auto; }

.itemArea { padding: 34px 0; }

.itemArea ul {
	overflow: hidden;
	text-align: center; }

.itemArea li {
	display: inline-block;
	margin: 0 17px; }

#itemArea2 .itemBox { margin: 0 auto; }

h4.itemArea2Desc {
	font-size: 83%;
	line-height: 1.6em;
	margin: 0 0 15px 0;
	text-align: center; }




/*Contents Footer*/
#contentsFooter {
	background-color: #B3B3B3;
	text-align: center;
	color: #FFF;
	padding: 50px 0 70px 0; }

#contentsFooter p { font-size: 75%; }









@media screen and (max-width: 767px) {

.contents {
	background-color: #FFF;
	margin: 0 0 1px 0;}



/* ---------------------------------------------------------
■コンテンツ共通
--------------------------------------------------------- */
#mainArea, #itemArea1, #itemArea2 {
	width: 320px;
	margin-left: auto;
	margin-right: auto;
	position: relative; }

#itemArea1 { height: 1070px; }

#readArea p, #itemArea1 p, #itemArea2 p {
	font-size: 83%; }

p.contentsDesc { text-align: center; }

.contentsLeft {
	width: 300px;
	height: 436px;
	position: absolute; }

.contentsRight {
	width: 320px;
	height: 436px;
	position: absolute; }

.contentsRight img {
	width: 320px;
	height: 436px; }

.contentsLeft { left: 10px; top: 436px; }
.contentsRight { right: 0; top: 0; }

.itemBox {
	width: 236px;
	text-align: center;}

.itemBox a {
	display: block;
	padding: 10px 10px 0px 10px;
	background-color: #FFF;
	margin-bottom: 20px; }

.itemBox a:hover { background-color: #F7F7F7; }

.itemImage { margin: 0 0 10px 0; }

.itemColor {
	border-top: 1px dotted #CCC;
	border-bottom: 1px dotted #CCC;
	padding: 10px 0 8px 0; }

.itemInfo { padding: 15px 0; }
.itemInfo p {
	padding: 5px 0;
	text-align: left; }
.itemInfo p.price {
	margin-bottom: 10px;
	text-align: center;}


/* ---------------------------------------------------------
■コンテンツ別
--------------------------------------------------------- */
/*main Area*/
#mainArea { height: 780px; }

.logoArea, .mainImg, .imageItem { position: absolute; }

.logoArea {
	width: 320px;
	height: 260px;
	text-align: center;
	top: 0;
	right: 0; }

.logoArea img {
	width: 240px; }

h1.mainLogo { margin: 20px 0 0 0; }

.mainImg {
	width: 320px;
	height: 343px;
	top: 260px;
	left: 0; }

.mainImg img {
	width: 320px; }

.mainImg ul {
	overflow: hidden;
	width: 320px;
	height: 343px; }

.mainimg li {
	overflow: hidden;
	width: 320px;
	height: 343px; }

.imageItem {
	width: 320px;
	text-align: center;
	top: 603px;
	right: 0; }

.imageItem li {
	width: 320px;
	height: 140px;
	padding: 40px 0 0 0;
	text-align: center; }

h3.imageItemTtl { margin: 10px 0 5px 0; }
h3.imageItemTtl img { width: 280px; }
.imageItemImg img{width: 300px; }



/*leadArea*/
#leadArea { width: 100%; }

.contentsInner{
	width: 320px;
	height: auto;
	padding: 30px 0;
}
.lead_contents {
	margin: 0 auto;}

h3.leadTtl {
	margin: 20px 0;
}

h3.leadTtl img {
	width: 320px;
	margin: 0 auto;
}
.lead_contents p span {
	line-height: 1.5em;
	display: block;
	padding: 10px 0 0 0;}
.lead_contents p span br{
	display: block;
}

/*itemArea2*/
.imageArea {
	width: 320px;
	height: 430px;
	position: relative; }

.contentsLeft2, .contentsRight2 {
	position: absolute; }

.contentsLeft2 {
	width: 320px;
	height: 246px;
	top: 0;
	left: 0; }

.contentsLeft2 img {
	width: 320px; }

.contentsRight2 {
	width: 300px;
	height: 250px;
	border-bottom: none;
	top: 246px;
	right: 10px; }

.contentsRight2 img {
	width: 280px; }

#itemArea2 h3 {
	text-align: center;
	margin: 20px 0 0 0; }

#itemArea2 p.contentsDesc {
	width:80%;
	height: auto;
	text-align: left;}

.itemArea { padding: 34px 0; }

.itemArea ul {
	overflow: hidden;
	text-align: center;
	margin: 130px 0 0 0;}

.itemArea li {
	width: 280px;
	display: inline-block;
	margin: 0 17px; }

#itemArea2 .itemBox { margin: 0 auto; }

h4.itemArea2Desc {
	width: 280px;
	font-size: 85%;
	line-height: 1.6em;
	margin: 50px auto 15px auto;
	text-align: center; }


/*Contents Footer*/
#contentsFooter {
	background-color: #000;
	text-align: center;
	color: #FFF;
	padding: 20px 0 40px 0; }

#contentsFooter img {
	width: 280px; }

#contentsFooter p { font-size: 75%; }

}












/* ---------------------------------------------------------
■ 汎用
--------------------------------------------------------- */
.clearFix:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	font-size:0;
	visibility:hidden; }

.lh0 {
	line-height: 0; }