@charset "UTF-8";

/* works */

#works{
	width:100%;
	background:url(../img/common/mainBg.png) repeat-x center 0px;
}
#works.noBg{background:none;margin:45px 0;}

#works h2{
	margin:0 0 30px 0;
	padding:0;
	text-align: center;
	color:#005ead;
	font-weight:400;
	font-size:22px;
}
#works h3{
	margin:0 0 20px 0;
	padding:0;
	text-align: center;
	color:#005ead;
	font-weight:400;
	font-size:22px;
}


/* main */
#works #main{
	width: 960px;
	margin: 0 auto 60px auto;
	text-align: left;
	clear:both;
}
#works #main p{
	text-align: center;
}


/* menus */
#works #menus{
	width: 960px;
	margin: 0 auto 100px auto;
	text-align: left;
	clear:both;
}

#works #menus #can_menus{
	width:686px;
	float:left;
	margin:0 0 30px 137px;	
	display:inline-block;
}

#works #menus #can_menus li{
	width:226px;
	height:226px;
	margin:0 4px 4px 0;
	padding:0;
	display:inline;
	float:left;
}
#works #menus #can_menus li:nth-child(3n){
	margin:0 0 4px 0;
}



/* archive（実績第2階層） */
#works #archive{
	width: 880px;
	margin:0 auto 20px auto;
	padding: 80px 0 70px 0;
	text-align: left;
	clear:both;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
}

#works #archive #archive_menu{
	float:left;
	margin: 0;
	display:inline-block;
}

#works #archive #archive_menu li{
	width:270px;
	margin:0 35px 70px 0;
	padding:0;
	display:inline;
	float:left;
	font-size:10px;
}
#works #archive #archive_menu li:nth-child(3n){
	margin:0 0 70px 0;
}
#works #archive #archive_menu li img{
	margin-bottom:10px;
}



/* comemnt */
#works #comemnt{
	width: 880px;
	margin:0 auto 100px auto;
	clear:both;
}
#works #comemnt p{
	text-align:center;
	font-size:10px;
}
#works #comemnt p a{
	color:#005ead;
}



/**/
#works #archiveInfo{
	width: 960px;
	margin:0 auto 20px auto;
	padding: 0;
	text-align: left;
	clear:both;
}
#works #archiveInfo h3{
	margin:0 0 20px 0;
	padding:0;
	text-align: center;
	color:#005ead;
	font-weight:400;
	font-size:22px;
}

a.nav {
  display: block;
  position: fixed;
  text-decoration: none;
  top: 45vh;
  padding: 10px;
  z-index: 99;
  text-indent:-9990px;
  width:25px;
  height:50px;
}

a.nav.next {
  right: 0;
  background:url(../img/common/nav_next.png) no-repeat 0px 0px;
}

a.nav.prev {
  left: 10px;
  background:url(../img/common/nav_prev.png) no-repeat 0px 0px;
}

#works #archiveInfo #outline{
	margin:10px 0 20px 0;
}
#works #archiveInfo #outline h4{
	margin:10px 0 5px 0;
	padding:0;
	text-align: left;
	color:#000;
	font-weight:400;
	font-size:16px;
	line-height:1.2;
}

#works #archiveInfo #outline h4 span,
#works #archiveInfo #outline p{
	font-size:10px;
}


@media screen and (max-width: 640px) {

/* index
--------------------------------------------------------------------------------------*/
#works{
	background-image:none !important;
}


#works h2{
	/*
	margin:0 0 20px 0;
	padding:0;
	text-align: center;
	
	*/
}

#works h2 img.img50{
	width:30% !important;
	margin:0 35% !important;
}
#works h3{
	margin:0 0 0 0;
	/*
	padding:0;
	text-align: center;
	color:#005ead;
	font-weight:400;
	font-size:22px;
	
	*/
}



/* main */
#works #main{
	width:90%;
	margin: 0 5% 10% 5%;
}


/**/
#works #menus{
	width: 90%;
	padding:10% 5% 10% 5%;	
	/*background:url(../img/index/can.png) repeat center top;*/
	margin: 0;
	clear:both;
	background-size:cover;
	text-align: center;
	color:#fff;
}

#works #menus #can_menus{
	width:100%;
	margin: 0;
	display:inline;
}

#works #menus #can_menus li,
#works #menus #can_menus li:nth-child(3n){
	width:49%;
	height:auto;
	margin:0 0.5% 1% 0.5%;
	padding:0;
	display:inline;
	float:left;
}


/* archive（実績第2階層） */
#works #archive{
	width:90%;
	margin: 0 5% 10% 5%;
}


#works #archive #archive_menu{
	width:100%;
	margin:0;	
	display:inline;
	float:left;
	/*
	margin: 0;
	display:inline-block;
	*/
}

#works #archive #archive_menu li,
#works #archive #archive_menu li:nth-child(3n){
	width:49%;
	height:auto;
	margin:0 0.5% 1% 0.5%;
	padding:0;
	display:inline;
	float:left;
}
/*
#works #archive #archive_menu li img{
	margin-bottom:10px;
}*/


/* comemnt */
#works #comemnt{
	width:90%;
	margin: 0 5% 10% 5%;
}


/* archiveInfo */
#works #archiveInfo{
	width:90%;
	margin: 0 5% 10% 5%;
}


a.nav {
	/*
  display: block;
  position: fixed;
  text-decoration: none;
  padding: 10px;
  z-index: 99;
  text-indent:-9990px;
  width:25px;
  height:50px;
	*/
  top: 25%;
}

}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}