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

/* PC and Tablet ////////////////////////*/
@media screen and (min-width: 600px){
	
#WORKS h2{ font-size:120%; font-weight:bold; }

/**/
#WORKS .read{ box-sizing:border-box; width:100%; padding:30px;   border-left:10px solid #FFF; border-right:10px solid #FFF; }
#WORKS .read div.textBox{ padding:0; }
#WORKS .read div.textBox ul{ margin-top:5px; }
#WORKS .read div.textBox li{ display:inline-block; margin-right:20px; margin-bottom:2px; text-indent:23px;/* font-size:95%;*/ background-image:url(/share/img/works_detail/nv_arrow.gif) ; background-repeat: no-repeat; background-position: left;}
#WORKS .read div.textBox li a{ color:#B06602; text-decoration:none; }
#WORKS .read div.textBox li a:hover{ color:#ECAB15; text-decoration: underline; }
#WORKS .refine{ width:96%; padding: 20px 2%; background:#FFF; }


/* thumnail */
#WORKS .WorksBox{ box-sizing:border-box; width:100%; padding: 0 30px 30px 30px; border-left:10px solid #FFF; border-right:10px solid #FFF; }
#WORKS .WorksBox:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }
#WORKS .WorksBox a{ display: block; float: left; width:24%; margin-right:1.3333%; margin-bottom:2%; text-decoration: none; background-image:url(/share/img/works_detail/thum_bdr.gif); background-repeat: repeat-y; background-position: right; background-color:#FFF; border-bottom: 2px solid #CCD5D7; }
#WORKS .WorksBox a:hover{ background-color:#DBE6EF; } 
#WORKS .WorksBox a:nth-child(4n) { margin-right:0 ; }
#WORKS .WorksBox a img{ width:100%; height:auto; }
#WORKS .WorksBox a div{ width: 92%; margin: 10px auto 27px; font-size:90%; color:#333; }
#WORKS .WorksBox a div h3{ color:#3578A4; }





#WORKS .WorksBox a {
	position:relative;
	height:100%;
	padding: 22% 0 0;
	}
	
#WORKS .WorksBox  a .works-thumbnail {
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

#WORKS .WorksBox a .new_mark_area {
	position:absolute;
	top:10px;
	left:10px;
	height:0 ;
	margin:0;
	padding:0;
	z-index:100;
	}

#WORKS .WorksBox a .new_mark_area .icon_new {
	width:48px;
	height:20px;
	}

#WORKS .WorksBox a .new_mark_area .icon_90,
#WORKS .WorksBox a .new_mark_area .icon_180,
#WORKS .WorksBox a .new_mark_area .icon_365 {display:none;}

#WORKS .WorksBox a .new90  {height:20px !important; margin-bottom:5px !important;}
#WORKS .WorksBox a .new180 {height:20px !important; margin-bottom:5px !important;}
#WORKS .WorksBox a .new365 {height:20px !important; margin-bottom:5px !important;}

#WORKS .WorksBox a .new90 .icon_90 {display:block !important;}
#WORKS .WorksBox a .new180 .icon_180 {display:block !important;}
#WORKS .WorksBox a .new365 .icon_365 {display:block !important;}



/*pager*/

/*#WORKS .Pager{ box-sizing:border-box; width:100%; padding-bottom:50px; border-left:10px solid #FFF; border-right:10px solid #FFF; border-bottom:10px solid #FFF;}
#WORKS .Pager:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }

#WORKS .Pager ul{ margin:0 auto; text-align:center; }
#WORKS .Pager li{ box-sizing: border-box; display: inline-block; width:36px; height:36px; margin-right: 5px; border:2px solid #5595BF; background:#5595BF; color:#FFF; text-align:center; font-weight:bold;}
#WORKS .Pager li span,.Pager li a{ box-sizing: border-box; display:block; width:100%; height:100%; padding-top:5px; font-size:107%;}
#WORKS .Pager li a{ background:#FFF; color:#5595BF; text-decoration:none;}
#WORKS .Pager li a:hover{ background:#DBE6EF; color:#5595BF; text-decoration:none;}*/





#WORKS .Pager{ box-sizing:border-box; width:100%; padding-bottom:50px; border-left:10px solid #FFF; border-right:10px solid #FFF; border-bottom:10px solid #FFF;}
#WORKS .Pager:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }

#WORKS .Pager .wp-pagenavi {text-align:center;}

#WORKS .Pager .wp-pagenavi span,.Pager .wp-pagenavi a {
    padding: 5px 10px;
	margin-right: 5px;
	border:2px solid #5595BF;
	background:#5595BF;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	 font-size:107%;
	 }
#WORKS .Pager a{ background:#FFF; color:#5595BF; text-decoration:none;}
#WORKS .Pager a:hover{ background:#DBE6EF; color:#5595BF; text-decoration:none;}





.sp { display:none;}

}

/* SmartPhone  ////////////////////////*/
@media screen and (max-width: 599px){
	
#WORKS h2{ text-align:center; margin-bottom:5px; font-size:105%; font-weight:bold; }

/**/
#WORKS .read{ box-sizing:border-box; width:100%; padding: 15px 0px; background:#fff; border-left:10px solid #FFF; border-right:10px solid #FFF; }
#WORKS .read div.textBox{ padding:0; }
#WORKS .read div.textBox ul{ margin-top:5px; }
#WORKS .read div.textBox li{ display:inline-block; margin-right:20px; /*margin-bottom:2px; text-indent:23px; font-size:95%; background-image:url(/share/img/works_detail/nv_arrow.gif) ; background-repeat: no-repeat; background-position: left;*/}
#WORKS .read div.textBox li a{ color:#B06602; text-decoration:none; }
#WORKS .read div.textBox li a:hover{ color:#ECAB15; text-decoration: underline; }
#WORKS .refine{ width:96%; padding: 10px 2%; background:#FFF; text-align:center; }

/* thumnail */
#WORKS .WorksBox{ box-sizing:border-box; width:100%; padding-bottom:15px; border-left:4px solid #FFF; border-right:4px solid #FFF; }
#WORKS .WorksBox:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }

#WORKS .WorksBox a{ box-sizing:border-box; display: block; float: left; width:33.33333%; height:140px; font-size:80%; line-height:1.3em;  text-decoration: none; border-bottom: 4px solid #FFF; position:relative; text-align:center; overflow:hidden; }
#WORKS .WorksBox a:nth-child(3n+1) { border-right:2px solid #FFF; }
#WORKS .WorksBox a:nth-child(3n+2) { border-left:2px solid #FFF;border-right:2px solid #FFF; }
#WORKS .WorksBox a:nth-child(3n) { border-left:2px solid #FFF; }
#WORKS .WorksBox a img{ height:140px; position: absolute; z-index: 5; left:50%;-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
transform: translate(-50%,0); }
#WORKS .WorksBox a div{ box-sizing:border-box; width: 100%; padding:15px 10px; /*font-size:85%;*/ color:#FFF; text-align:left; position:absolute; z-index:10;min-height:140px; background-color:rgba(0,0,0,0.5);}
#WORKS .WorksBox a div h3{ font-size:100%; margin-bottom:0px; color: inherit; font-weight: bold; }

#WORKS .WorksBox a div .new_mark_area {
	height:0 !important;
	margin:0 !important;
	padding:0 !important;
	}

#WORKS .WorksBox a div .new_mark_area:after {
	visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
}

#WORKS .WorksBox a div .new_mark_area .icon_new {
	width:40px !important;
	height:auto !important;
	margin:0 0 5px !important;
	padding:0 !important;
	text-align:left !important;
	}

#WORKS .WorksBox a div .new_mark_area .icon_new {
	position: inherit; z-index: 5; left:0px;
	-webkit-transform: translate(0%,50%);
    -moz-transform: translate(0%,50%);
    transform: translate(0%,50%); }


#WORKS .WorksBox a div .new_mark_area .icon_90,
#WORKS .WorksBox a div .new_mark_area .icon_180,
#WORKS .WorksBox a div .new_mark_area .icon_365 {display:none;}

#WORKS .WorksBox a div .new90  {height:20px !important; margin-bottom:10px !important;}
#WORKS .WorksBox a div .new180 {height:20px !important; margin-bottom:10px !important;}
#WORKS .WorksBox a div .new365 {height:20px !important; margin-bottom:10px !important;}

#WORKS .WorksBox a div .new90 .icon_90 {display:block !important;}
#WORKS .WorksBox a div .new180 .icon_180 {display:block !important;}
#WORKS .WorksBox a div .new365 .icon_365 {display:block !important;}


/*pager*/

/*#WORKS .Pager{ box-sizing:border-box; width:100%; padding-bottom:30px; border-left:4px solid #FFF; border-right:4px solid #FFF; border-bottom:4px solid #FFF;}
#WORKS .Pager:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }

#WORKS .Pager ul{ margin:0 auto; text-align:center; }
#WORKS .Pager li{ box-sizing: border-box; display: inline-block; width:25px; height:25px; margin-right: 1px; border:1px solid #5595BF; background:#5595BF; color:#FFF; text-align:center;}
/*#WORKS .Pager li span,.Pager li a{ box-sizing: border-box; display:block; width:100%; height:100%; padding-top:2px; font-size:98%;}
#WORKS .Pager li a{ background:#FFF; color:#5595BF; text-decoration:none;}
#WORKS .Pager li a:hover{ background:#DBE6EF; color:#5595BF; text-decoration:none;}*/


#WORKS .Pager{ box-sizing:border-box; width:100%; padding-bottom:50px; border-left:10px solid #FFF; border-right:10px solid #FFF; border-bottom:10px solid #FFF;}
#WORKS .Pager:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }

#WORKS .Pager .wp-pagenavi {text-align:center;}

#WORKS .Pager .wp-pagenavi span,.Pager .wp-pagenavi a {
    padding: 5px 10px;
	margin-right: 5px;
	border:2px solid #5595BF;
	background:#5595BF;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	 font-size:107%;
	 }
#WORKS .Pager a{ background:#FFF; color:#5595BF; text-decoration:none;}
#WORKS .Pager a:hover{ background:#DBE6EF; color:#5595BF; text-decoration:none;}


.pc { display:none;}

}