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

@import url("common.css");
@import url("swf.css");


html, body {
	height: 100%;
	margin: 0px;
    padding: 0px;
    background-color: #F5F5F5;
	text-align:center;
	background-image: url(../img/back2.png);
    background-repeat: repeat-x;
    background-position:left top;

}

/****************** CONTENTS LEFT 設定****************/

#headMenu {
  float: left;
  width: 717px;
  margin: 15px 0px 0px 16px;
  padding: 0px;
  text-align: left;
  display: inline;
}

#headMenu ul {
  float: left;
  width: 717px;
  text-align: left;
}

#headMenu ul li {
  float: left;
  width: 153px;
  height:42px;
  font-size: 0;
}

#containerWorksHead {
  float: left;
  width: 717px;
  height: 31px;
  background: url(../works_apparel/img/works_back1.png) left top no-repeat;
  display: inline;
  font-size: 0.7em;
}


#containerWorks{
  float: left;
  width: 717px;
  margin: 0px 0px 0px 16px;
  padding: 0px;
  background: url(../works_apparel/img/works_back2.png) left top repeat-y;
  display: inline;
}

#containerWorksFoot {
  float: left;
  width: 717px;
  height: 34px;
  margin: 7px 0px 0px 0px;
  background: url(../works_apparel/img/works_back3.png) left top no-repeat;
  display: inline;
  font-size: 0;
}

.Section {
  float: left;
  width: 687px;
  margin: 24px 0px 0px 15px;
  padding: 0px 0px 10px 0px;
  background: url(../works_apparel/img/dot2.png) left bottom repeat-x;
  display: inline;
}

.SectionEnd {
  float: left;
  width: 687px;
  margin: 24px 0px 0px 15px;
  padding: 0px;
  display: inline;
}

.SectionRight {
  float: left;
  width: 328px;
  margin: 0px;
  padding: 0px 0px 0px 15px;
  display: inline;
}

.SectionRight dl {
  float: left;
  width: 328px;
}

.SectionRight dl dt {
  float: left;
  width: 328px;
}

.SectionRight dl dt strong {
  float: left;
  width: 328px;
  font-size: 0.9em;
  color:#333;
  display: inline;
  font-family:"メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
}

.SectionRight dl dt strong a {
  color:#333;
  text-decoration: none;
  font-family:"メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";

}

.SectionRight dl dt strong a:hover {
  color:#333;
  text-decoration: underline;
}

.SectionRight dl dt a {
  float: left;
  width: 328px;
  padding: 0px 0px 0px 0px;
  font-size: 0.8em;
  color:#036EB8;
  text-decoration: none;
  display: inline;
}

.SectionRight dl dt a:hover {
  color:#036EB8;
  text-decoration: underline;
}

.SectionRight dl dd {
  float: left;
  width: 328px;
  margin: 15px 0px 0px 0px;
  padding: 0px;
  display: inline;
  background: url(../works_apparel/img/comment2.png) left top repeat-y;
}

.SectionRight dl dd p.Comhead{
  float: left;
  width: 328px;
  height: 15px;
  display: inline;
  background: url(../works_apparel/img/comment1.png) left top no-repeat;
}

.SectionRight dl dd p.Comfoot{
  float: left;
  width: 328px;
  height: 15px;
  display: inline;
  background: url(../works_apparel/img/comment3.png) left bottom no-repeat;
}

.SectionRight dl dd p{
  float: left;
  width: 308px;
  padding: 0px 10px 0px 10px;
  font-size: 0.8em;
  color:#333;
  display: inline;
}

.SectionRight dl dd span{
  float: left;
  width: 308px;
  padding: 0px 10px 0px 10px;
  font-size: 0.6em;
  color:#333;
  display: inline;
}

.SectionRight dl dd span.dotLine{
  float: left;
  width: 308px;
  height: 1px;
  padding: 0px 0px 0px 0px;
  margin: 5px 10px 5px 10px;
  font-size: 0;
  display: inline;
  background: url(../works_apparel/img/dot1.png) left top repeat-x;
}

/****************** SCROLL ***************/

#scrollable {
  float: left;
  margin: 0px;
  padding: 0px;
  width:340px;
  height: 262px;
  display: inline;
}

#controller{
  padding: 0px 0px 0px 100px;
  margin: 10px 0px 0px 0px;
  float: left;
}

.controller{
  padding: 0px 0px 0px 100px;
  margin: 10px 0px 0px 0px;
  float: left;
  width:340px;
}

div.items {
  width:340px !important;
  height:225px;	
  margin: 0px;
  padding: 0px;
  float:left;
  border: solid #D7D2C6 1px;
}



/* single item */
div.itemsBox {
	display:block;
	float:left;
	width:340px;
	height:225px;
	text-align: left;
	overflow: hidden;
}


/* next / prev buttons */
a.prev, a.next {
	display:block;
	width:50px;
	height:20px;
	float:left;
	background-repeat:no-repeat;	
	margin:0px 0 0 0;
}

a.prev {
	background:url(../img/sliderb1.png) left top no-repeat;
	display:block;
	width:50px;
	height:20px;
	float:left;	
	margin: 0px;
	padding: 0px;
	cursor:pointer;
}

a.next {
	background:url(../img/sliderb2.png) left top no-repeat;
	display:block;
	width:50px;
	height:20px;
	float:left;	
	margin: 0px;
	padding: 0px;
	cursor:pointer;
}

a.prev:hover {
	background-image: url(../img/slider1bove.png);
}

a.next:hover {
	background-image: url(../img/slider2bove.png);
}


/* navigator */
div.navi {
	float: left;
	height:20px;
	display: inline;
}


/* items inside navigator */

div.navi span {
  width: 10px;
  height:20px;
  float:left;
  margin:0px;
  background: url(../img/slider_sq2.png) left top no-repeat;   
  cursor:pointer;
}

div.navi span:hover {
  background: url(../img/slider_sq1.png) left top no-repeat;      
}

div.navi span.active {
  background: url(../img/slider_sq1.png) left top no-repeat;      
}

.naviSpace {
  width: 5px;
  height: 20px;
  float: left;
  background: url(../img/slider3.png) left top repeat-x;
}


/***** SCROLL OPTION *****/

#scrollable2, #scrollable3, #scrollable4, #scrollable5, #scrollable6, #scrollable7, 
#scrollable8, #scrollable9, #scrollable10, #scrollable11, #scrollable12, #scrollable13 , 
#scrollable14, #scrollable15, #scrollable16{
  float: left;
  margin: 0;
  padding: 0;
  width:340px;
  height: 262px;
  display: inline;
}

/****************** SCROLL END ***************/



/****************** PG ***************/


.pagination {
  float: right;
  margin: 6px 20px 0px 0px;
  padding: 0px;
  font-size: 0.8em;
  background: url(../img/pn2.png) left top repeat-x;
}
        
.pagination a {
    text-decoration: none;
	color:#FFF;

}

.pagination a, .pagination span {
    display: block;
    float: left;
	height: 17px;
	width: 13px;
	padding: 3px 0px 0px 4px;	

}

.pagination .current {
    color:#4F4946;
	height: 17px;
	width: 13px;
	padding: 3px 0px 0px 4px;
	background: url(../img/pn4.png) left top repeat-x;
}

.current.prev2{
	float: left;
	height: 20px;
	width: 13px;
	padding: 0px 0px 0px 4px;
	background: url(../img/pn1.png) left top no-repeat;
}

.current.next2{
	float: left;
	height: 20px;
	width: 13px;
	padding: 0px 0px 0px 4px;
	background: url(../img/pn3.png) left top no-repeat;
}

.prev2{
	float: left;
	height: 20px;
	width: 17px;
	color:#261B18;
	background: url(../img/pn1.png) left top no-repeat;
	text-indent:9999px;
}

.next2{
	float: left;
	height: 20px;
	width: 17px;
	color:#261B18;
	background: url(../img/pn3.png) left top no-repeat;
	text-indent:9999px;
}

/****************** PG END ***************/