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

	works
  
======================================================================== */
h3 {
	padding: 5px 0;
	color: #fff;
	text-align: left;
	font-size: 185%;
	background: #262626;
}

h3 span {
	display: block;
	margin: 0 auto;
	padding-left: 25px;
	line-height: 1.4;
	width: 960px;
	height: 30px;
	box-sizing: border-box;
	border-left: 5px solid #9e1515;
}

.navi {
	margin-bottom: 10px;
	border-bottom: 5px solid #262626;
}

section { padding-bottom: 50px; }

.worksBtn {
	margin: 0 auto 10px;
	width: 960px;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	justify-content: space-between;
}

.worksBtn li {
	width: 310px;
	border-radius: 10px;
}

.worksBtn li a {
	display: block;
	color: #fff;
	height: 100%;
	border-radius: 10px;
	text-decoration: none;
	transition: all .2s ease;
}

.worksBtn li:nth-child(1) { background: url(../../images/module/top/works01.jpg) center center / cover no-repeat; }
.worksBtn li:nth-child(2) { background: url(../../images/module/top/works02.jpg) center center / cover no-repeat; }
.worksBtn li:nth-child(3) { background: url(../../images/module/top/works03.jpg) center center / cover no-repeat; }

.worksBtn li:nth-child(1) a { background: rgb(108,81,58,0.7); }
.worksBtn li:nth-child(2) a { background: rgb(43,50,65,0.7); }
.worksBtn li:nth-child(3) a { background: rgb(21,21,29,0.7); }

.worksBtn li:nth-child(1) a:hover { background: rgb(186,152,124,0.7); }
.worksBtn li:nth-child(2) a:hover { background: rgb(84,92,111,0.7); }
.worksBtn li:nth-child(3) a:hover { background: rgb(53,53,63,0.7); }

.worksBtn li:nth-child(1) dt { background: #ba987c; }
.worksBtn li:nth-child(2) dt { background: #545c6f; }
.worksBtn li:nth-child(3) dt { background: #35353f; }

.worksBtn li a { background-size: 100%; }

.worksBtn dt {
	padding: 12px 0;
	text-align: center;
	font-size: 154%;
	font-weight: bold;
	border-radius: 10px 10px 0 0;
}

.worksBtn dd {
	padding: 10px 15px;
	text-align: left;
	line-height: 2.2;
	font-size: 115%;
	/* border-radius */
	border-radius:0px 0px 10px 10px ;
	-moz-border-radius:0px 0px 10px 10px ;
	-webkit-border-radius:0px 0px 10px 10px ;
}

.works {
	margin: 0 auto 20px;
	padding: 30px 30px;
	overflow: hidden;
	width: 910px;
	background: #fff;
	/* box-shadow */
	box-shadow:0px 0px 4px -1px #000000;
	-moz-box-shadow:0px 0px 4px -1px #000000;
	-webkit-box-shadow:0px 0px 4px -1px #000000;
}

.works ul.item {
	margin-bottom: 30px;
	width: 100%;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	justify-content: flex-start;
}

.works ul.item li {
	float: left;
	margin-right: 36px;
	margin-bottom: 20px;
	width: 200px;
}

.works ul.item li .soldout { color: #C40000; }

.works dt { margin-bottom: 10px; }
.works dt img { border: 1px solid #000; }

.works dd {
	margin-bottom: 3px;
	text-align: left;
}

.listBtn {
	overflow: hidden;
	width: 100%;
}

.listBtn li {
	float: right;
	width: 100px;
}

.listBtn li a {
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 35px;
	background: url(../../images/module/top/list_btn.gif) no-repeat 0 0;
}

.listBtn li a:hover { background-position: 0 -35px; }

/*--  page  --*/
.page {
	overflow: hidden;
	margin: 0 auto 15px !important;
	width: 100%;
}

.page dt {
	float: left;
	padding: 8px 5px;
	text-align: left;
	font-weight: bold;
	width: 28%;
	background: none !important;
}

.page dd {
	float: right;
	padding: 5px;
}

.page dd ul { overflow: hidden; }

.page dd li {
	float: left;
	padding: 0 3px;
	color: #fff;
}

.page dd a {
	padding: 4px 8px;
	display: block;
	text-decoration: none;
	color: #fff;
	text-align: center;
	background: #262626;
}

.page dd span,
.page dd a:hover {
	padding: 4px 8px;
	display: block;
	color: #fff;
	background: #6d1616;
}


/** detail **/
.detail {
	padding-bottom: 60px;
	width: 700px;
}

.detail h4 {
	margin-bottom: 30px;
	padding: 12px 15px;
	text-align: left;
	font-size: 123%;
	font-weight: bold;
	background: #F2F2F2;
}

.detail .price {
	margin-bottom: 10px;
	font-size: 108%;
}

.detail ul {
	overflow: hidden;
	margin-bottom: 30px;
	width: 100%;
}

.detail li {
	margin-right: 2%;
	margin-bottom: 15px;
	float: left;
	width: 16%;
}

.detail li img { width: 100%; }

.detail .contents {
	margin-bottom: 40px;
	line-height: 1.8;
	text-align: left;
}

.detail .soldout {
	margin-bottom: 10px;
	color: #C40000;
	font-size: 108%;
	/* display: block;
	margin: 10px auto 20px;
	padding: 8px 10px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	width: 40%;
	background: #C40000; */
}


.btn {
	margin: 0 auto;
	width: 200px !important;
}

.btn li {
	padding: 10px 0;
	color: #fff;
	cursor: pointer;
	color: #fff;
	font-size: 123%;
	font-weight: bold;
	width: 100% !important;
	background: #6d1616;
	border: none;
}

.btn li a {
	display: block;
	color: #fff;
	width: 100%;
	text-decoration: none;
}

.btn li:hover {
	background:#b44444;
}

/*----------------------------------------------------------------------------------------------------------------- SP ----*/
@media screen and (max-width: 768px) {
	
h3 {
	padding: 2px 0;
	font-size: 138%;
}

h3 span {
	padding: 2px 0 0 8px;
	width: 94%;
	height: auto;
}

.navi { margin-bottom: 0; }

/** worksBtn **/
.worksBtn {
	margin: 0 auto;
	width: 100%;
}

.worksBtn li {
	width: 33.33333%;
	border-radius: 0;
}
	
.worksBtn li:nth-child(1),
.worksBtn li:nth-child(2),
.worksBtn li:nth-child(3) { background: none; }

.worksBtn li a { border-radius: 0; }

.worksBtn dl { height: 100%; }
	
.worksBtn dt {
	padding: 30px 2%;
	line-height: 0;
	font-size: 100%;
	border-radius: 0;
}

.worksBtn dd { display: none; }

/** works **/
.works {
	margin: 0 auto;
	padding: 20px 4%;
	width: 92%;
	box-shadow:0px 0px 4px -1px #000000;
	-moz-box-shadow:0px 0px 4px -1px #000000;
	-webkit-box-shadow:0px 0px 4px -1px #000000;
}

.works ul.item {
	margin-bottom: 10px;
	padding: 0 4%;
	width: 92%;
	justify-content: space-between;
}

.works ul.item li {
	float: none;
	margin-right: 0;
	margin-bottom: 35px;
	width: 48%;
}

.works dt img { width: 100%; }

/** listBtn **/
.listBtn li {
	float: none;
	margin: 0 auto;
}
	
/*--  page  --*/
.page {
	margin: 0 auto;
	width: 96%;
}
	
.page dt {
	float: none;
	text-align: center;
	width: 100%;
}

.page dd { float: none; }

.page dd li { margin-bottom: 5px; }

/** detail **/
.detail {
	padding-bottom: 30px;
	width: 92%;
}

.detail h4 {
	margin-bottom: 20px;
	line-height: 1.5;
}

.detail img { max-width: 100%; }

.detail ul {
	margin-bottom: 20px;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	justify-content: flex-start;
}

.detail li {
	margin-right: 1%;
	margin-bottom: 10px;
	float: none;
	width: 24%;
}

.detail li:nth-child(4n) { margin-right: 0; }
	
}