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


/* PC and Tablet ////////////////////////*/
@media screen and (min-width: 600px){

/* detailNav */	
#WORKS .detailNav{ color:#FFF; background-color:#3D78A0; position:relative; }
#WORKS .detailNav .backs{ width:100%; }
#WORKS .detailNav div.backs a{ display:inline-block; padding: 15px 30px; border-right:1px solid #749EBA; line-height:1.0em; color:inherit; text-decoration:none; }
#WORKS .detailNav div.backs a img{ width: 18px; margin-right:5px; }

#WORKS .detailNav div.Pager{ width: 70px; height:30px; position:absolute; bottom: 11px;  right:25px; }
#WORKS .detailNav div.Pager a{ display: block; width:30px; height:30px; float:left; margin-right:5px;}
#WORKS .detailNav div.Pager a img{ width:30px; } 

#WORKS h1{ box-sizing:border-box; background:#5689AC; padding: 15px 0 14px 30px; line-height:1.2em; color:#FFF; font-size: 142%; font-weight:bold; }

/* Detail */
#WORKS .Detail{ width:100%; padding:50px 0;background:#FFF; }
#WORKS .Detail:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }
#WORKS .Detail .detailInner{ width:90%; max-width:1080px; margin:auto;}

#WORKS img.img01{ float:left; width:50%; }
#WORKS dl{ width: 48%; float:right; }
#WORKS dt,dd{ box-sizing:border-box; display:block; float:left; background:url(/share/img/works_detail/common/line.gif) repeat-x bottom; padding:10px 5px;}
#WORKS dt:nth-last-of-type(1),dd:nth-last-of-type(1){ background: none;}
#WORKS dd+dt{ clear:left; }

#WORKS .Detail .detailInner table { width: 48%; float:right; }
#WORKS .Detail .detailInner table tr {background:url(/share/img/works_detail/common/line.gif) repeat-x bottom;}
#WORKS .Detail .detailInner table tr:nth-last-of-type(1){ background: none;}
#WORKS .Detail .detailInner table th,.Detail .detailInner table th {padding:10px 5px;}
#WORKS .Detail .detailInner table th {width: 19%; color:#3D78A0;}

#WORKS dt{ width: 19%; color:#3D78A0; }
#WORKS dd{ width:80%; }

/* thumnail */
#WORKS div.thum{ width:100%; min-width:1080px; padding-top:30px; clear:both; }
#WORKS div.thum:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }
#WORKS div.thum a{ display:block; float:left; width:255px; height:255px; margin-right:1.3333%; margin-bottom:1.3333%; background:#CCD5D7; position:relative; overflow:hidden; }
#WORKS div.thum a:nth-child(4n){ margin-right:0; }

#WORKS div.thum a .photos img{ width:130%; height:auto; z-index:0; position:absolute; left:50%; top:50%;-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); }

#WORKS div.thum a img.zoom{ width:30px; height:30px; position:absolute; left: 10px; bottom:8px; z-index: 10; }

} 


/* SmartPhone  ////////////////////////*/
@media screen and (max-width: 599px){

/* detailNav */	
#WORKS .detailNav{ margin-top:60px; color:#FFF; background-color:#3D78A0; position:relative; }
#WORKS #CONTENA .detailNav:nth-last-of-type(1){ margin-top:0; }
#WORKS .detailNav div.backs{ width:100%; }
#WORKS .detailNav div.backs a{ box-sizing:border-box; display:inline-block;width:50%;padding:10px 0 8px 0; text-align:center; border-right:1px solid #749EBA; font-size:80%; line-height:1.0em; color:inherit; text-decoration:none; }
#WORKS .detailNav div.backs a img{ width: 18px; vertical-align: middle; margin-top:-2px; margin-right:3px; }

#WORKS .detailNav div.Pager{ width: 56px; height:25px; position:absolute; bottom: 11px;  right:7px; }
#WORKS .detailNav div.Pager a{ display: block; width:25px; height:25px; float:left; margin-right:3px;}
#WORKS .detailNav div.Pager a img{ width:25px; } 

#WORKS h1{ box-sizing:border-box; background:#5689AC; padding: 12px 0 12px 10px; line-height:1.2em; color:#FFF; font-size: 120%; font-weight:bold; }
#WORKS h1 span{ display:inline-block; width: 78%; } 

/* Detail */
#WORKS .Detail{ width:100%; padding:30px 0;background:#FFF; }
#WORKS .Detail:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }
#WORKS .Detail .detailInner{ width:90%; margin:auto;}

#WORKS img.img01{ width:100%; }
#WORKS dl{ width: 100%; }
#WORKS dt,dd{ box-sizing:border-box; display:block; float:left; background:url(/share/img/works_detail/common/line.gif) repeat-x bottom; padding:10px 5px; font-size:95%;}
#WORKS dt:nth-last-of-type(1),dd:nth-last-of-type(1){ background: none;}
#WORKS dd+dt{ clear:left; }

#WORKS .Detail .detailInner table { width: 100%; }
#WORKS .Detail .detailInner table tr {background:url(/share/img/works_detail/common/line.gif) repeat-x bottom;}
#WORKS .Detail .detailInner table tr:nth-last-of-type(1){ background: none;}
#WORKS .Detail .detailInner table th,.Detail .detailInner table th {padding:10px 5px;}
#WORKS .Detail .detailInner table th {width: 23%; color:#3D78A0;}

#WORKS dt{ width: 23%; color:#3D78A0; }
#WORKS dd{ width:76%; }

/* thumnail */
#WORKS div.thum{ width:100%; padding-top:20px; }
#WORKS div.thum:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }
#WORKS div.thum a{ display:block; float:left; width:32%; height:auto !important; margin-right:2%; margin-bottom:2%; background:#CCD5D7; position:relative; overflow:hidden;}

#WORKS div.thum a img {width:100%; height:auto !important;}
#WORKS div.thum a:after{ padding-top:100%;display: block;
    content: ""; }
#WORKS div.thum a:nth-child(3n){ margin-right:0; }

#WORKS div.thum a .photos img{ width:130%; z-index:0; position:absolute; left:50%; top:50%;-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); }

#WORKS div.thum a img.zoom{ width:20px; height:20px; position:absolute; left: 5px; bottom:4px; z-index: 10; }

}