@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/ 

#PAGE .SHEET .SIDE_WHITE ul li a.WORKS:link	{ background:#e4f4fb url(../../img/arrow_black.png) no-repeat 8% 50%; background-size:4px auto; color:#000;}
#PAGE .SHEET .SIDE_WHITE ul li a.WORKS:visited	{ background:#e4f4fb url(../../img/arrow_black.png) no-repeat 8% 50%; background-size:4px auto; color:#000;}

.CONTENTS .INSIDE ul	{ width:660px; float:left; margin:5px 0 10px 0; }
.CONTENTS .INSIDE ul li	{ width:90px; float:left; margin:0 0px 20px 0; display:list-item; list-style:none; line-height:1.8em; padding:0; }
.CONTENTS .INSIDE ul.thumbs	{ width:640px; float:left; margin:10px 0 10px 0; }

/*	事例*/ 
ul.JIREI { width:645px; float:left; clear:none; }
ul.JIREI li { width:210px; height:270px; float:left; clear:none; margin:0 4px 20px 0; background:#E3E0D9; text-align:center; }
ul.JIREI li a { width:208px; height:270px; float:left; clear:none; position:relative; border:2px solid #fff; overflow:hidden; }
ul.JIREI li a span.NEW { width:auto; padding:2px 10px; background:#ff9f00; color:#fff; text-align:center; font-size:10px; line-height:1.2em; position:absolute; top:0px; left:0px; margin:0; z-index:100; }
ul.JIREI li a img { width:auto; height:156px; float:none; clear:none; margin:0 auto; }
h3.H3_BORDER span {float:right; clear:none; font-size:10px; color:#999999; }
ul.JIREI li a span { width:190px; float:left; clear:none; line-height:1.7em; margin:10px 0 10px 10px; text-align:left; }
ul.JIREI li a .DIV_DETAIL { width:160px; border:2px solid #ccc;  margin:0 0 0 23px; background:#fff; line-height:2em; text-align:center; padding:4px 0;}
ul.JIREI li a .DIV_DETAIL p.INFO { margin:0; line-height:15px; }
ul.JIREI li a .DIV_DETAIL p.INFO img.ARROW_BLACK { width:8px; margin:0 0 0 10px; desplay:inline; }
ul.JIREI li a:hover { border:2px solid #1DA4E7; background:#ffffdf; }

#PAGE .INSIDE h3 { font-size:13px; font-weight:bold; margin-bottom:0px; }
span.SPAN_DATE { float:right; clear:none; color: #969696; font-size:10px; }


#PAGE .INSIDE .DATA { width:200px; float:left; clear:none; margin-right:40px; }
#PAGE .INSIDE .DATA ul { width:200px; float:left; clear:none; margin:0 0 20px 0; }
#PAGE .INSIDE .DATA ul  li { width:200px; height:30px; float:left; clear:none; margin:0; padding:10px 0; border-top:1px dotted #ccc; line-height:30px; }
#PAGE .INSIDE .DATA ul  li img { margin:8px 0 0 0; }
#PAGE .INSIDE .DATA ul  li.TOP { width:200px; float:left; clear:none; border-top:none; }
#PAGE .INSIDE .DATA ul  li.TOP strong { font-weight:bold; font-size13px; }
#PAGE .INSIDE .DATA ul  li.TOP strong img { width:15px; float:left; clear:none; margin-right:5px; }
#PAGE .INSIDE .DATA ul  li img.MARK { width:17px; clear:none; float:none; margin:0 10px 0 0; vertical-align:middle; }

#PAGE .INSIDE .DATA_RIGHT { width:380px; float:right; clear:none; }
#PAGE .INSIDE .DATA_RIGHT strong img { width:15px; clear:none; float:none; margin-right:10px; vertical-align:middle; }
#PAGE .INSIDE .DATA_RIGHT strong { width:380px; float:left; clear:none; margin:10px 0 5px 0; font-weight:bold; font-size:13px; }
#PAGE .INSIDE .DATA_RIGHT p { width:380px; float:left; padding-bottom:10px; border-bottom:1px dotted #ccc; }
#PAGE .INSIDE .DATA_RIGHT .BA_IMAGE { width:380px; float:left; padding-bottom:10px; border-bottom:1px dotted #ccc; }
#PAGE .INSIDE .DATA_RIGHT .BA_IMAGE img { width:380px; float:left; }


#PAGE .INSIDE .DATA .SEKOU { width:196px; border:2px solid #000; background:#ffffdf; }
#PAGE .INSIDE .DATA .SEKOU .SEKOKU_MIDASHI { width:196px; float:left; clear:none; margin:10px 0 0 0; border-bottom:1px dotted #ccc; }
#PAGE .INSIDE .DATA .SEKOU .SEKOKU_MIDASHI strong { width:120px; font-weight:bold; font-size:13px; }
#PAGE .INSIDE .DATA .SEKOU .SEKOKU_MIDASHI img.KOUGU { width:20px; float:left; clear:none; margin:0 10px 0 40px; }
#PAGE .INSIDE .DATA .SEKOU span { width:176px; float:left; clear:none; margin:10px 0 10px 10px; }

#PAGE .INSIDE .DATA .BEFORE { width:196px; float:left; clear:none; background:#ececec; text-align:center; margin:20px 0 0 0; font-weight:bold; line-height:30px; }
#PAGE .INSIDE .DATA .BEFORE img { width:100%; }


/*スライドショー*/
#PAGE .FLIP { display:none; }
#PAGE .SHEET .GALLERY   { width:640px; height:auto; float:left; margin:0px 0 0 0; position:relative; }
#PAGE .SHEET .GALLERY .ZUMEN    { width:280px; float:left; margin:10px 0 0 0; border:1px solid #ccc; }
div.content {   display:none; float:left; clear:none; width:640px; height:460px; overflow:visible; }
div.controls { width:100%; position:absolute; top:200px; left:0; margin-top:0; height:20px; z-index:50; overflow:visible; }
div.controls a {  }
div.caption-container	{ display:block; float:left; position:relative; overflow:visible; }
span.image-caption	{ position:absolute; bottom:0; left:0; }
div.ss-controls { display:none; }
div.nav-controls { width:100%; float:right; position:absolute; top:0; left:0; overflow:visible; }
div.nav-controls a.prev { width:30px; height:40px; float:left; margin-left:10px; background:url(../img/prev.png) no-repeat; text-indent:-999px; overflow:hidden; }
div.nav-controls a.next { width:30px; height:40px; float:right; margin-right:10px; background:url(../img/next.png) no-repeat; text-indent:-999px; overflow:hidden; }
div.slideshow-container { position:relative; clear:none; float:left; width:638px; height:420px; border:1px solid #ccc; }
div.loader {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('loader.gif');
    background-repeat: no-repeat;
    background-position: center;
    width: 640px;
    height: 480px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow { width:640px; height:480px; float:left; overflow:visible; display:block; }
div.slideshow span.image-wrapper { float:left; 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
div.slideshow a.advance-link { display:block; float:left; clear:; width:640px; height:480px; margin:0; padding:0; text-align: center; vertical-align:middle; }
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
    text-decoration: none;
}
div.slideshow img { width:auto; height:420px; float:none; margin:0 auto; top:0; vertical-align:middle; }
div.download {
    float: right;
}
div.caption-container { position:relative; clear:left; height:auto; }
span.image-caption {
    display: block;
    position: absolute;
    width: 560px;
    top: 0;
    left: 0;
}
div.caption {
    padding: 12px 0;
}
div.image-title {
    font-weight: bold;
    font-size: 1.4em;
}
div.image-desc {
    line-height: 1.3em;
    padding-top: 12px;
}
div.navigation {
    /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}

ul.thumbs { width:640px; float:left; clear: both; margin:10px 0 0 0; padding: 0; }
ul.thumbs li { width:80px; float:left; padding: 0; margin:0 0px 5px 5px; list-style:none; }
a.thumb { width:76px; height:57px; display:block; border:2px solid #ccc; overflow:hidden; }
ul.thumbs li.selected a.thumb { border:2px solid #000; }
a.thumb:focus {
	outline: none;
}
ul.thumbs img { width:76px; border:none; display: block; vertical-align:middle; }
ul.thumbs img { width:76px; border:none; display: block; vertical-align:middle; }
div.pagination { display:none; }
div.navigation div.top { display:none; }
div.navigation div.bottom {
    margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
    display: block;
    float: left;
    margin-right: 2px;
    padding: 4px 7px 2px 7px;
    border: 1px solid #ccc;
}
div.pagination a:hover {
    background-color: #eee;
    text-decoration: none;
}
div.pagination span.current {
    font-weight: bold;
    background-color: #000;
    border-color: #000;
    color: #fff;
}
div.pagination span.ellipsis {
    border: none;
    padding: 5px 0 3px 2px;
}



@media screen and (max-width: 740px){
/*	事例*/ 
.CONTENTS .INSIDE ul	{ width:100%; float:left; margin:5px 0 10px 0; }
.CONTENTS .INSIDE ul li	{ width:100%; float:left; margin:0 0px 20px 0; display:list-item; list-style:none; line-height:1.8em; }
#PAGE .INSIDE ul.JIREI { width:100%; float:left; clear:none; }
#PAGE .INSIDE ul.JIREI li { width:100%; height:auto; float:left; clear:none; margin:0 0px 20px 0; background:#E3E0D9; text-align:center; }
#PAGE .INSIDE ul.JIREI li a { width:99%; height:auto; float:left; clear:none; position:relative; border:2px solid #fff; }
ul.JIREI li a span { width:44%; float:right; clear:none; line-height:1.7em; margin:10px 2% 10px 0px; text-align:left; }
ul.JIREI li a img { width:50%; float:left; clear:none; margin-right:2%; }
ul.JIREI li a .DIV_DETAIL { width:44%; border:2px solid #ccc;  float:right; clear:none; margin:0 2% 0 0px; background:#fff; line-height:2em; text-align:center; padding:4px 0;}
ul.JIREI li a .DIV_DETAIL p.INFO img.ARROW_BLACK { width:8px; margin:3px 0 0 10px; desplay:inline; }

/*	事例詳細*/ 
#PAGE .INSIDE .DATA { width:100%; float:left; clear:none; margin-right:0px; }
#PAGE .INSIDE .DATA ul { width:100%; float:left; clear:none; margin:0 0 20px 0; }
#PAGE .INSIDE .DATA ul  li.TOP { width:100%; float:left; clear:none; border-top:none; }
#PAGE .INSIDE .DATA ul  li.TOP strong { font-weight:bold; font-size13px; }
#PAGE .INSIDE .DATA ul  li.TOP strong img { width:15px; float:left; clear:none; }
#PAGE .INSIDE .DATA ul  li img.MARK { width:17px; float:left; clear:none; margin-right:10px; }
#PAGE .INSIDE .DATA ul  li { width:100%; height:30px; float:left; clear:none; border-top:1px dotted #ccc; line-height:30px; }

#PAGE .INSIDE .DATA .SEKOU { width:95%; border:2px solid #000; background:#ffffdf; padding:2%; }
#PAGE .INSIDE .DATA .SEKOU .SEKOKU_MIDASHI { width:100%; float:left; clear:none; margin:10px 0 0 0; border-bottom:1px dotted #ccc; }
#PAGE .INSIDE .DATA .SEKOU .SEKOKU_MIDASHI strong { width:70%; float:left; clear:none; font-weight:bold; font-size:13px; }
#PAGE .INSIDE .DATA .SEKOU .SEKOKU_MIDASHI img.KOUGU { width:20px; float:left; clear:none; margin:0 10px 0 0px; }
#PAGE .INSIDE .DATA .SEKOU span { width:100%; float:left; clear:none; margin:10px 0 10px 0px; }

#PAGE .INSIDE .DATA_RIGHT { width:100%; float:left; clear:none; }
#PAGE .INSIDE .DATA_RIGHT strong img { width:20px; float:left; clear:none; margin-right:10px;  }
#PAGE .INSIDE .DATA_RIGHT strong { width:100%; float:left; clear:none; margin-bottom:20px; font-weight:bold; font-size:15px; font-weight:strong; }
#PAGE .INSIDE .DATA_RIGHT .BA_IMAGE { width:100%; }
#PAGE .INSIDE .DATA_RIGHT .BA_IMAGE img { width:100%; }

#PAGE .INSIDE .DATA .BEFORE { width:100%; float:left; clear:none; background:#E3E0D9; text-align:center; margin:20px 0 20px 0; font-weight:bold; padding:10px 0 0 0; }
#PAGE .INSIDE .DATA .BEFORE img { width:100%; float:left; clear:none; margin-top:10px; }

/*	スライドショー*/ 
#PAGE .SHEET .GALLERY   { width:100%; height:auto; float:left; margin:0px 0 0 0; position:relative; }
div.slideshow img { width:auto; height:420px; float:none; margin:0 auto; top:0; vertical-align:middle; }
div.content { width:100%; display:none; float:left; clear:none; height:420px; overflow:visible; }
div.slideshow a.advance-link { display:block; float:left; clear:; width:100%; height:480px; margin:0; padding:0; text-align: center; vertical-align:middle; }
ul.thumbs { display:none; }
div.slideshow-container { position:relative; clear:none; float:left; width:99%; height:420px; border:1px solid #ccc; }





}