@charset "utf-8";

/* *******************************

	style.css

********************************** */

/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;box-sizing:border-box;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}

/* clearfix
=================================== */
.clearfix {zoom:1;}
.clearfix:after{
    content: "";
    display: block;
    clear: both;}

/* base
==================================== */
body {
	height: 100%;
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 14px;
	line-height: 1.45em;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {display:block;}
img {border: 0;	vertical-align:top;}
ul,dl,ol{list-style: none;display: block;	text-indent:0;}
li{ list-style:none;}
div, h2, h3, h4, h5, p, li{word-break: break-all;	padding: 0 0 0px 0;}
p,ul,li{display:block;}

/* リンクカラー */
a		  { color: #000;text-decoration:none; }
a:hover   { color: #2486C8;text-decoration:none; }
#footer a:hover{color:#2486C8;text-decoration:none;}

/* 文字サイズ */
.small{font-size:12px;}

/* 文字カラー */
.pink{color:#da2777;}
.red{color:#d80808;}
a.green{color:#41a41e;}

/* 太字装飾 */
.bld      { font-weight:bold; }

a:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);  
	-ms-filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}
.lock {overflow:hidden;}

/* layout
---------------------------------*/
#wrapper {
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#header{
	width: 980px;
	margin: 0 auto;	
}
#header h1{
	padding: 4px 0;
	font-size:13px;
	line-height:1.4;
}

/*
	modal
--------------------------------- */

.modal-wrap {
    z-index:2;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}
.modal-content {
	margin: 0;
	padding: 30px 20px 0;
	background: #fff ;
	position:relative;
	display: none ;
	z-index: 2 ;
	text-align:center;
}
/*700X450*/	
.modal-content.img-vertical{
	width: 600px ;/*510*/
}
.modal-content.img-horizontal{
	width: 760px ;	
}
.modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;/*スマホ用*/
	background-color: rgba( 0,0,0, 0.75 ) ;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99000000,EndColorStr=#99000000);
}
.button-link {
	color: #444 ;
	display:block;
}
.button-link:hover {
	cursor: pointer ;
	color: #444 ;
}
#modal-close{
	background:url(../img/temp/close.png)  0 0;
	width: 100px;
	height:100px;
	text-indent: -9999px;
}
#modal-close:hover{
	background:url(../img/temp/close.png) 0 -110px;
}
.modal-content h3{
	display: block;
	font-weight:bold;
	text-align:left;
	padding:16px 10px 10px;
	font-size:22px;
}
.modal-content h3 span{
	padding-left:10px;
	font-weight:normal;
	font-size:14px;
}
.modal-content p{
	font-size: 20px;
	padding:0 10px 20px;
	text-align:left;
	line-height:1.5;
}

/* main
--------------------------------- */
#main { 
	width: 980px;
	margin:0 auto;
	padding-bottom: 30px;
	padding-top: 30px;
}
#main h2{
	padding-bottom:30px;
}
.workslist {
	width:950px;
}
.workslist:after{
  content: "";
  display: block;
  clear: both;
}

.workslist ul{
	width: 1000px;
}
.workslist:after{
  content: "";
  display: block;
  clear: both;
}
.workslist ul li{
	float:left;
	width: 245px;
	height: 360px;
}
.workslist ul li a{
	display:block;
	width:200px;
	margin:0 auto;
}
.workslist li a img{
	margin-bottom: 10px;
	box-sizing:border-box;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
}

.workslist li a h3{
	display:block;
	padding:8px;
	position:relative;
	font-weight:bold;
}
.workslist li a h3 span{
	position:absolute;
	right:10px;
	top: 10px;
	display:inline-block;
	font-size:12px;
	font-weight:normal;
}
.workslist li.li1 a h3 {
  background: #cde7f4;
}
.workslist li.li2 a h3 {
  background:#e7f4cd;
}
.workslist li.li3 a h3 {
  background: #f7dcf9;
}
.workslist li.li4 a h3 {
  background: #f5dab2;
}
.workslist li.li5 a h3 {
  background: #cde7f4;
}
.workslist li.li6 a h3 {
  background: #e7f4cd;
}
.workslist li.li7 a h3 {
  background: #f7dcf9;
}
.workslist li.li8 a h3 {
  background: #f5dab2;
}
.workslist li.li9 a h3 {
  background: #cde7f4;
}
.workslist li.li10 a h3 {
  background: #e7f4cd;
}
.workslist li.li11 a h3 {
  background: #f7dcf9;
}
.workslist li.li12 a h3 {
  background: #f5dab2;
}
.workslist li.li13 a h3 {
  background: #cde7f4;
}
.workslist li.li14 a h3 {
  background: #e7f4cd;
}
.workslist li.li15 a h3 {
  background: #f7dcf9;
}
.workslist li.li16 a h3 {
  background: #f5dab2;
}
.workslist li.li17 a h3 {
  background: #cde7f4;
}
.workslist li.li18 a h3 {
  background: #e7f4cd;
}
.workslist li.li19 a h3 {
  background: #f7dcf9;
}
.workslist li.li20 a h3 {
  background: #f5dab2;
}
.workslist li.li21 a h3 {
  background: #cde7f4;
}
.workslist li.li22 a h3 {
  background: #e7f4cd;
}
.workslist li.li23 a h3 {
  background: #f7dcf9;
}
.workslist li.li24 a h3 {
  background: #f5dab2;
}
.workslist li.li25 a h3 {
  background: #cde7f4;
}
.workslist li.li26 a h3 {
  background: #e7f4cd;
}
.workslist li.li27 a h3 {
  background: #f7dcf9;
}
.workslist li.li28 a h3 {
  background: #f5dab2;
}
.workslist li.li29 a h3 {
  background: #cde7f4;
}
.workslist li.li30 a h3 {
  background: #e7f4cd;
}
.workslist li.li31 a h3 {
  background: #f7dcf9;
}
.workslist li.li32 a h3 {
  background: #f5dab2;
}
.workslist li.li33 a h3 {
  background: #cde7f4;
}
.workslist li.li34 a h3 {
  background: #e7f4cd;
}


/*---------優秀賞---------*/
.workslist li.li32-1 a h3 {
  background: #e7f4cd;
}
.workslist li.li31-2 a h3 {
  background: #cde7f4;
}
.workslist li.li29-3 a h3 {
  background: #f5dab2;
}
.workslist li.li24-4 a h3 {
  background: #f7dcf9;
}
.workslist li.li20-5 a h3 {
  background: #e7f4cd;
}
.workslist li.li13-6 a h3 {
  background: #cde7f4;
}
.workslist li.li7-7 a h3 {
  background: #f5dab2;
  }
  .workslist li.li4-8 a h3 {
  background: #f7dcf9;
}
.workslist li.li3-9 a h3 {
  background:  #e7f4cd;
}
/*---------ここまで優秀賞---------*/


.workslist li a p{
	font-size:12px;
}
.workslist li a p.ads{
	color:#666;
	padding: 10px 0 4px;
}

.bnr{
	text-align:center;
	padding:10px 0;
}
.tel{
	text-align:center;
	padding:10px 0 20px;
	font-size:18px;
}

/*  pagetop 
---------------------------------*/

#pagetop a{
	width: 66px;
	height: 66px;
	right: 20px;
	position: fixed;
	bottom: -100px;
	z-index:0;
	display: block;
	background:url(../img/temp/pagetop.png) ;
}
#pagetop a span{
	display:none;
}

/* footer
--------------------------------- */
#footer {
	width: 100%;
	background: #00AEEB;
	color:#FFF;
	text-align:center;
	padding: 20px 0;
}
#footer h1{
	font-size:20px;
	padding-bottom:10px;
}
#footer p{
	font-size:16px;
}