@charset "utf-8";

div#works-area { margin: 32px auto 40px; width: 100%; height: 100%; }
div.works-slider { padding-top: 50px; width: 100%; height: 690px; background: #ffffff; overflow: hidden; }

/* *** bxslider *** */

.bx-wrapper .bx-viewport {
    box-shadow: none;
    border:none;
    left: 0px;
    background-color:transparent;
}

/* 設定 */
.slide_all { width: 650px; margin: 0 auto; height: 640px; position: relative; }
.slide_wrap { width: 3250px; min-width: 100%; position: absolute; left: 50%; margin-left: -1470px; }
.slide_body { width: 100%; }
.slide { width: 640px; background: #fff; }
.slide img { width: 100%; vertical-align: bottom; }

/* 装飾 */
.bx-controls-direction,.bx-pager { text-align: center; height: 25px; }
.bx-controls-direction a,.bx-pager-item { display: inline-block; }
.bx-pager-item a{ display: block; height: 10px; width: 10px; text-indent: -9999px; background: #fff; border-radius: 10px; margin: 10px 2px 0 2px; }
.bx-pager-item a.active { opacity: 0.3;}
.bx-controls { position: absolute; top: 284px; left: 82px; z-index: 100; width: 100%; }
.bx-controls-direction a {
	margin-top: 0;
	width: 30px;
	height: 30px;
	z-index: 9999;
	color: #f0f0f0;
	text-decoration: none;
	font-size: 50px;
	font-weight: bold;
	text-shadow: 1px 1px 2px #333333;
}
.bx-prev { margin-left: -184px; }
.bx-next { margin-left: 564px; }
.result {
    position: absolute; top: 710px; left: 50%;
	width: 300px; height: 120px;
	padding: 0px;
	margin: 0px 0px 0px -470px;
	border: 0px solid #F0F0F0;
    text-align: left;
	font-size: 14px;
}
.result span { display: block; margin-bottom: 0.5em; font-size: 12px; color: #333333; }
.result p {
	margin-bottom: 1em; color: #333333;
	font-weight: bold;
	font-size: 16px;
}
.result .slide{ width: 300px !important; position: static !important; float: none !important; }

/* 追加 */
.slide { transition:all .3s; opacity: 0.1; }
.slide.active { opacity: 1; }

/* *** bxslider *** */

.works-link {
    position: absolute; top: 305px; left: 50%;
	width: 205px; height: 210px;
	padding: 0px;
	margin: 0px 0px 0px -470px;
	border: 0px solid #F0F0F0;
    text-align: left;
}
.works-link span { display: block; margin: auto; }

/* WORKS Page-Link-Button CSS */
.works-link #bt01 a#natural, .works-link #bt01 a#natural_o, .works-link #bt02 a#feminine, .works-link #bt02 a#feminine_o, .works-link #bt03 a#stylish, .works-link #bt03 a#stylish_o {
	position: relative;  overflow: hidden;
	display: block;
	height: 38px;	width: 200px;
    text-decoration: none; border-bottom: 0px dotted;
}