@charset "euc-jp";

 /*-------------------------------------------------------------------
                             DEF CSS
-------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6,p {
font-size: 100%;
line-height: 16pt;
}
ol,ul {
list-style: none; 
}
address,caption,cite,code,dfn,em,th,var { 
font-style: normal; 
font-weight: normal; 
}
fieldset,img {
border: 0;
}
a:link     { color: #01A7B6; text-decoration: none; }
a:visited  { color: #01A7B6; text-decoration: none; }
a:hover    { color: #FE9500; text-decoration: underline; }
a:active   { color: #FE7E00; text-decoration: none; }

.clear {
margin:0px;
padding:0px;
clear:both;
}

* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
p,blockquote,th,td {  
margin: 0; 
padding: 0;
color: #161616;
font-family: "メイリオ",meiryo,"MS ゴシック","MS GOTHIC", Osaka, "ヒラギノ角ゴ Pro W3","Hiragi no kaku go", sans-serif;
font-size:12px;
}

.f_left {
float:left;
}
 /*-------------------------------------------------------------------
                             OTHER CSS
-------------------------------------------------------------------*/

.co_txt	a:link     { color: #000000; text-decoration: none; }
.co_txt a:visited  { color: #000000; text-decoration: none; }
.co_txt a:hover    { color: #000000; text-decoration: none; }
.co_txt a:active   { color: #000000; text-decoration: none; }



 /*-------------------------------------------------------------------
                             SP BOX CSS
-------------------------------------------------------------------*/

.line_gra	{
	padding: 10px; 
	background: -webkit-gradient(linear, left top, left bottom,
	from(#fff),
	to(#DCDCDC)
	);
	}	
			
.line_gra_border	{
	padding: 10px; 
	background: -webkit-gradient(linear, left top, left bottom,
	from(#fff),
	to(#DCDCDC)
	);
	border: 1px #d0d0d0 solid;
	}	

.line_gra_border2	{
	padding: 10px; 
	//background: -webkit-gradient(linear, left top, left bottom,
	//from(#B1B0B0),
	//to(#DCDCDC)
	//);
	border: 1px #d0d0d0 solid;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-shadow: 1px 1px 1px #999999;  
	filter: dropshadow(color=#999999, offx=1, offy=1); 
	overflow: hidden;
	display: block;
	}

.line_gra_border2 a:link     { color: #000000; text-decoration: none; }
.line_gra_border2 a:visited  { color: #000000; text-decoration: none; }
.line_gra_border2 a:hover    { color: #000000; text-decoration: underline; }
.line_gra_border2 a:active   { color: #000000; text-decoration: none; }

.line_border_gal	{
	//padding: 5px; 
	border: 1px #d0d0d0 solid;
	width:94px;
	height:163px;
	margin-bottom:3px;
	margin-right:3px;
	}	
		
.line_sha {  
    padding: 10px;  
    -webkit-box-shadow: 0px 0px 10px #000000;
    -moz-box-shadow: 0px 0px 10px #000000;
    box-shadow: 0px 0px 10px #000000;  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    } 
    
.line_sha2 {  
    padding: 10px;  
    -webkit-box-shadow: 0px 0px 10px #000000;
    -moz-box-shadow: 0px 0px 10px #000000;
    box-shadow: 0px 0px 10px #000000;  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    //background: -webkit-gradient(linear, left top, left bottom,
	//		from(#fff),
	//		to(#DCDCDC)
	//		);
    }

.line_black	{
	text-align:center;
	padding: 10px;
	//background: #696969;
	background-image:url(../img/bar_bg_sp.gif);
	background-repeat:repeat;
	border: 2px solid #000000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color:#FFFFFF;
	margin: 5px 0px 5px 0px;
	width:90%;
	}

.line1	{
	text-align:center;
	padding: 10px 0px 10px 0px;
	background: #DCDCDC;
	border: 1px solid #c0c0c0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-shadow: 1px 1px 1px #999999;  
	filter: dropshadow(color=#999999, offx=1, offy=1); 
	margin: 5px 0px 5px 0px;
	background-image:url(../img/bar_bg_sp2.gif);
	background-repeat:repeat;
	width:95%;
}

.line1 a:link     { color: #000000; text-decoration: none; }
.line1 a:visited  { color: #000000; text-decoration: none; }
.line1 a:hover    { color: #FE9500; text-decoration: underline; }
.line1 a:active   { color: #000000; text-decoration: none; }

.line2	{
	text-align:left;
	padding: 10px 0px 10px 10px;
	background: #DCDCDC;
	border: 1px solid #c0c0c0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-shadow: 1px 1px 1px #999999;  
	filter: dropshadow(color=#999999, offx=1, offy=1); 
	margin: 5px 0px 5px 0px;
	background-image:url(../img/bar_bg_sp2.gif);
	background-repeat:repeat;
	width:95%;
}

.line_red	{
	text-align:center;
	padding: 10px;
	//background: #696969;
	background-image:url(../images/bar_red.gif);
	background-repeat:repeat;
	border: 2px solid #E90000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color:#000000;
	margin: 5px 0px 5px 0px;
	width:90%;
	}

.line_w	{
	text-align:center;
	padding: 10px;
	//background: #696969;
	background-image:url(../images/bar_bg_sp2.gif);
	background-repeat:repeat;
	border: 1px solid #DCDCDC;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color:#000000;
	margin: 5px 0px 5px 0px;
	width:90%;
	}


.line_y	{
padding: 15px 0px 15px 0px;
//background: #696969;
background-image:url(../images/bar_bg_y_sp.gif);
background-repeat:repeat;
//border: 1px solid #DCDCDC;
//-webkit-border-radius: 10px;
//-moz-border-radius: 10px;
//border-radius: 10px;
color:#FFFFFF;
//width:95%;
text-shadow: 1px 1px 1px #999999;  
filter: dropshadow(color=#999999, offx=1, offy=1);
margin-bottom:10px;
border-bottom:5px solid #DCDCDC;
}

.a_b a:link     { color: #000000; text-decoration: none; }
.a_b a:visited  { color: #000000; text-decoration: none; }
.a_b a:hover    { color: #FE9500; text-decoration: underline; }
.a_b a:active   { color: #000000; text-decoration: none; }

.line_left	{
padding: 10px; 
border: 1px solid #B4B4B4;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
//border-radius: 10px;
text-shadow: 1px 1px 1px #999999;  
filter: dropshadow(color=#999999, offx=1, offy=1); 
overflow: hidden;
display: block;
}

.line_right	{
padding: 10px; 
border: 1px solid #B4B4B4;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
//border-radius: 10px;
text-shadow: 1px 1px 1px #999999;  
filter: dropshadow(color=#999999, offx=1, offy=1); 
overflow: hidden;
display: block;
}

.line_center	{
padding: 10px; 
border-top: 1px solid #B4B4B4;
border-bottom: 1px solid #B4B4B4;
text-shadow: 1px 1px 1px #999999;  
filter: dropshadow(color=#999999, offx=1, offy=1); 
overflow: hidden;
display: block;
}

.line_pink	{
	text-align:center;
	color:FFFFFF;
	padding: 10px 0px 10px 0px;
	background: #DCDCDC;
	border: 1px solid #c0c0c0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-shadow: 1px 1px 1px #999999;  
	filter: dropshadow(color=#999999, offx=1, offy=1); 
	margin: 5px 0px 5px 0px;
	background-image:url(../images/bar_bg_r_sp.gif);
	background-repeat:repeat;
	width:95%;
}
/*-------------------------------------------------------------------
                             ul
-------------------------------------------------------------------*/


ul {
	color: black;
	background: #fff;
	/*border: 1px solid #B4B4B4;*/
	font: bold 17px Helvetica;
	padding: 0;	   
	margin: 15px 10px 17px 5px;
	-webkit-border-radius: 8px;
	}


ul li {
		color: #666;
		/*border-top: 1px solid #B4B4B4;*/
		list-style-type: none;	
		padding: 10px 10px 10px 10px;
		}



/* when you have a first LI item on any list */

li:first-child {	
				border-top: 0;
				-webkit-border-top-left-radius: 8px;
				-webkit-border-top-right-radius: 8px;
				}

li:last-child {	
				-webkit-border-bottom-left-radius: 8px;
				-webkit-border-bottom-right-radius: 8px;
				}


/* universal arrows */

ul li.arrow {
			background-image: url(../images/chevron.png);
			background-position: right center;
			background-repeat: no-repeat;
			}


#plastic ul li.arrow, #metal ul li.arrow {
			background-image: url(../images/chevron_dg.png);
			background-position: right center;
			background-repeat: no-repeat;
			}


ul li.topics {
			background: -webkit-gradient(linear, left top, left bottom,
			from(#fff),
			to(#DCDCDC)
			);
			text-align:left;
			}


//#plastic ul li.topics, #metal ul li.topics {
			background: -webkit-gradient(linear, left top, left bottom,
			from(#fff),
			to(#DCDCDC)
			);
			}



/* universal links on list */

ul li a, li.img a + a {
			color: #000;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			display: block;
			padding: 12px 10px 12px 10px;
			margin: -10px;
			-webkit-tap-highlight-color:rgba(0,0,0,0);
			}

ul li.img a + a {
			margin: -10px 10px -20px -5px;
			font-size: 17px;
			font-weight: bold;
			}

ul li.img a + a + a {
			font-size: 14px;
			font-weight: normal;
			margin-left: -10px;
			margin-bottom: -10px;
			margin-top: 0;
			}


ul li.img a + small + a {
			margin-left: -5px;
			}


ul li.img a + small + a + a {
			margin-left: -10px;
			margin-top: -20px;
			margin-bottom: -10px;
			font-size: 14px;
			font-weight: normal;
			}

ul li.img a + small + a + a + a {
			margin-left: 0px !important;
			margin-bottom: 0;
			}


ul li a + a {
			color: #000;
			font: 14px Helvetica;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			display: block;
			margin: 0;
			padding: 0;
			}

ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
			color: #666;
			font: 13px Helvetica;
			margin: 0;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			display: block;
			padding: 0;
			}

/*-------------------------------------------------------------------
                             lightbox
-------------------------------------------------------------------*/
#lightbox {
	background-color: #eee;
	padding: 10px;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
}
#overlay {
	background-image: url(../js/lightbox/img/overlay.png);
}
#lightboxCaption {
	color: #333;
	background-color: #eee;
	font-size: 90%;
	text-align: center;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
}
#lightboxIndicator {
	border: 1px solid #fff;
}
#lightboxOverallView {
	background-image: url(../js/lightbox/img/overlay.png);
}
* html #lightboxOverallView,
* html #overlay {
	background-color: #000;
	background-image: url(../js/lightbox/img/blank.gif);
	filter: Alpha(opacity=50);
}


/*-------------------------------------------------------------------
                             スライド
-------------------------------------------------------------------*/
/*▼ここから */
img{
	border:0px;
}
#ViewArea{
	width:500px;
	height:100px;
	overflow:hidden;
	float:left;
	z-index:1;	
}
#ScrollArea{
	width:auto;
	position:relative;
	z-index:2;
}
#ScrollArea li{
	float:left;
	position:relative;	
	padding:10px 5px 2px 5px;
	text-align:center;
	list-style:none;
}
#ScrollArea p{
	font-size:12px;
	padding:2px 0px 0px 0px;
}
#Leftbtn{
	width:50px;
	height:100px;
	overflow:hidden;
	float:left;
	z-index:1;
	background-image:url(./images/btn_l.jpg);
	background-repeat:no-repeat;		
}
#Leftbtn:hover{
	background-image:url(./images/btn_l_over.jpg);
	background-repeat:no-repeat;		
}
#Rightbtn{
	width:50px;
	height:100px;
	overflow:hidden;
	float:left;
	z-index:1;
	background-image:url(../images/next.png);
	background-repeat:no-repeat;
}
#Rightbtn:hover{
	z-index:1;
	background-image:url(../images/next.png);
	background-repeat:no-repeat;					
}

/*▲ここまで */



/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft {
   /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
   min-width:75px;
   width:10%; height:100%;
   /* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
   background-image:url(lib/jquery/smoothdivscroll/images/big_transparent.gif);
   background-repeat:repeat;
   background-position:center center;
   position:absolute;
   z-index:200;
   left:0;
   /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
   cursor:url(lib/jquery/smoothdivscroll/images/move.cur), url(lib/jquery/smoothdivscroll/images/move.cur),w-resize;
   
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible {
   background-image:url(../images/arrow_left.gif);
   background-color:#fff;
   background-repeat:no-repeat;
   opacity:0.35; /* Standard CSS3 opacity setting */
   -moz-opacity:0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
   filter:alpha(opacity = 35); /* Opacity for Internet Explorer. */
   zoom:1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight {
   min-width:75px;
   width:10%;
   height:100%;
   background-image:url(lib/jquery/smoothdivscroll/images/big_transparent.gif);
   background-repeat:repeat;
   background-position:center center;
   position:absolute;
   z-index:200;
   right:0;
   cursor:url(lib/jquery/smoothdivscroll/images/move.cur), url(lib/jquery/smoothdivscroll/images/move.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible {
   background-image:url(../images/arrow_right.gif);
   background-color:#fff;
   background-repeat:no-repeat;
   opacity:0.35;
   filter:alpha(opacity = 35);
   -moz-opacity:0.35;
   zoom:1;
   z-index:1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper {
   position:relative;
   overflow:hidden;
   width:100%; height:100%;
}
div.scrollableArea {
   position:relative;
   width:auto; height:100%;
}
.makeme {
   width:100%;      /* ウィンドウサイズいっぱいに */
   height:160px;   /* 画像の高さ */
   position:relative;
}

.makeme * {
   position:relative;
   float:left;
   margin:0; padding:0;
}

/*-------------------------------------------------------------------
                             Accordionスライド
-------------------------------------------------------------------*/

#imageMenu {
  position: relative;
  width: 680px;
  height: 380px;
  overflow: hidden;
}

#imageMenu ul {
  list-style: none;
  margin: 0px;
  display: block;
  height: 380px;
  width: 1000px;
  }
#imageMenu ul li {
  float: left;
}
#imageMenu ul li a {
  text-indent: -1000px;
  background:#FFFFFF none repeat scroll 0%;
  border-right: 2px solid #fff;
  cursor:pointer;
  display:block;
  overflow:hidden;
  width:170px;
  height: 380px;
}
#imageMenu ul li.sample1 a {
background: url(../images/pop_image_2.png) repeat scroll 0%;
}
#imageMenu ul li.sample2 a {
 background: url(../images/pop_image_3.png) repeat scroll 0%;
}
#imageMenu ul li.sample3 a {
 background: url(../images/pop_image_4.png) repeat scroll 0%;
}
#imageMenu ul li.sample4 a {
background: url(../images/pop_image_1.png) repeat scroll 0%;
}

ul.imgmenu {margin: 0; padding: 0;}

/* ---------------------------------------------------- */
/* GLOBAL
/* ---------------------------------------------------- */
//html {
//font-size: 76%;}

//body {
//font-family: arial, helvetica, sans-serif;
//line-height: 1.4em;
//font-size: 1.2em;
//padding: 5%;}

/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
width: 95%;
//background-color: #eee;
//border: 1px solid #ddd;}

#slideshow ul {
margin: 0;
padding: 10;
list-style-type: none;
height: 1%; /* IE fix */}

#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}            

/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
overflow: hidden;
width: 100%;}

#slideshow .slides ul {
width: 100%;}

#slideshow .slides li {
width: 100%;
float: left;
padding: 10px 0px 50px 0px;}

#slideshow .slides h2 {
margin-top: 0;}

/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow .slides-nav {
background-color: #ddd;
border-top: 2px solid #ccc;}

#slideshow .slides-nav li {
float: left;}

#slideshow .slides-nav li a {
display: block;
padding: 15px 20px;
outline: none;}

.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a {
background-color: #eee;}

.js #slideshow .slides-nav li.on a {
position: relative;
top: -4px;}


/*-------------------------------------------------------------------
                             slideshow
-------------------------------------------------------------------*/
#slideshow { 
	position:relative; 
	//width:320px; 
	//height:150px;
	 }
#slideshow img { position:absolute; top:0; left:0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }

photo_max {width:300px;}
photo_max img. {max-width: 300px;}


/*-------------------------------------------------------------------
 矢印つきリスト 
 -------------------------------------------------------------------*/
.list2 ul{
 margin: 10px;
 }
 .list2 ul li{
 overflow: hidden;
 margin: 0;
 width: 100%;
 text-align: left;
 padding: 0;
 border: 1px #ccc solid;
 border-bottom: 0;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 display:block;
 -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1);
 box-shadow:0px 3px 3px rgba(000,000,000,0.1);
 }
 .list2 ul li:first-child{
 border-radius: 8px 8px 0 0;
 }
 .list2 ul li:last-child{
 border-radius: 0 0 8px 8px;
 border-bottom:1px #ccc solid;
 }
 .list2 ul li a{
 color: #333;
 display: block;
 height: 44px;
 margin: 0;
 padding: 0 0 0 10px;
 overflow: hidden;
 white-space: nowrap;
 line-height: 44px;
 text-overflow: ellipsis;
 text-decoration: none;
 font-weight:bold;
 }
 .list2 ul li a::after{
 //content: url(../img/arrow.png);
 float: right;
 }