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

/*
body {
	overflow-x: hidden;
}
.contents {
	overflow-x: hidden;
}
*/
.projects {
	width: 100%;
	overflow: hidden; 
}
.projects a.more {
	position: relative;	
}

.projectholder a img:last-child {
	display: none;
}

.projectslider {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 350px;
	margin-top: -15px;
	margin: 0 auto;
}

.projectslider ul {
	positive: relative;
	overflow: hidden;
	white-space: nowrap;
	
	/* full-width */
	/*
	max-width: 100%;
	max-width: 100%;\9; *//* IE8 and below - red border */
	
	/* fit to page */
	/*max-width: 950px;
	max-width: 950px;\9; /* IE8 and below - red border */
	/*left: 20px;*/
}
.projectslider ul li {
	display: inline-block;
	padding-bottom: 0px;
}
.pseudo_hide {
	/* background-color: #666; */
	/*
	background-image: url(common/images/proj_shadow.jpg);
	background-size: 240px 208px;
	background-repeat: no-repeat;
	*/
}
.pseudo_blur {
	opacity: 0.8;
}

.projectslider ul li div.pseudo_shadow {
	position: absolute;
	display: block;
	width: 232px; height: 212px;
	opacity: 0.8;
	z-index: 2;
	background-color: #0B0B0B;
	/* visibility: hidden; */
}

.projectslider ul{
	padding: 0;
	margin: 0;
	position:absolute;
	margin-top: 100px;
	overflow: hidden;
	width: 100%;
	/*
	max-width: 960px;
	max-width: 970px;\9; /* IE8 and below - red border */
	height: 240px;
}

.projectslider ul li{
	vertical-align:top;
	/* display: inline-block; */	/* inline-block causes unwanted spacing! */
	float: left;
	margin-right: 11px;
	margin-bottom: 10px;
	height: 240px;
	max-width: 231px;
}

.projectslider ul li img {
	max-width: 238px; /* !important */
	height: 160px; /* !important */
}

.projectslider ul li:last-child{
	margin-right: 0;
}
.projectslider dl{
	margin: 0;
	margin-top: 15px;
	background:url(/common/images/border_repeat.gif) repeat-y;
	padding: 0;
}
.bottom .projectslider dl{
	margin: 0;
	margin-top: 15px;
}

.projectslider ul li dt{
	background:none;
	margin-bottom: 0;
	padding-top: 0;
}
.projectslider ul{
	height: 250px;
}

.projectslider ul li{
	height: 250px;
	max-width: 240px;
}

.projectslider ul li a {
	padding: 0;
	max-height: 160px;
	overflow:hidden;
}

.projectslider dd{
	font-size: 11px;
	margin-top: 0;
	padding-left: 10px;
	line-height: 16px;
	padding-bottom: 0;
}

.projectslider ul li:last-child{
	margin-right: 0;
}

#projcontrol {
	padding: 15px 0px 0px 16px; /* (2014/7/15) 10→15 */
	margin: auto;
	width: 100%;
	max-width: 960px;
	height: 80px; /* !important */
	text-align: right;
	overflow: hidden;
}

#projcontrol li {
	height: 20px;
	width: 20px;
	line-height: 20px;
	margin: 25px 0px 20px 10px;
	z-index: 5;
	color: rgb(0, 0, 0);
/*	background:url(/common/images/round.png) no-repeat center; */
	border-radius: 25px;
	cursor: pointer;
	display: inline-block;
}
#projcontrol li span {
	display: block;
	margin: 5px auto auto;
	width: 10px;
	height: 10px;
	background-color: rgb(0, 0, 0);
	border-radius: 20px;
	cursor: pointer;
}

#projcontrol li.active{
	background:url(/common/images/round_on2.png) no-repeat center;
}
#projcontrol li.active span {
	background-color: rgb(255, 255, 255);
	z-index: 6;
}

#projcontrol li:last-child {
	margin-right: 75px;
}

@media (max-width: 960px) AND (min-width: 640px) {


	#projcontrol {
		/* max-width: 780px; */
		padding: 15px 0px 0px 0px;
	}
	#projcontrol li:last-child {
		margin-right: 75px;
	}
}
@media (max-width: 650px) {
	/*
	.projectslider {
		display: none;	
	}
	*/
	body {
		overflow: hidden;
		overflow-y: auto;
	}
	
	.projects {
		display: block;
		/*height: 440px;*/
		height: 400px;
	}
	
	.projectholder {
		/* background-image: none;	*/
		background: none; /* 文字に変換 */
		/* background: url('/common/images/projects_sp.png') no-repeat; */
		background-size: 120px auto;
		background-position: 10px 26px;
		overflow: visible;
	}
	
	.projectholder {
		display: block;
	}
	
	.projectholder a {
		margin-top: -45px;
		margin-right: 27px;
	}
	
	.projectholder a img:first-child {
		display: none;
	}
	
	.projectholder a img:last-child {
		display: block;
		width: 22px;
	}
	.projectholder .more {
		margin-right: 10px;
		background: url(/common/images/m_more_clear.gif) left 10px no-repeat !important;
		background-size: auto 50% !important;
	}
	/* タイトルをdl化するため */
	.projectholder dl.ttl {
		position: absolute;
		padding-top: 8px;
	}	
	
	.projectslider {
		/* position: relative; */
		overflow-y: auto;
		margin-top: 105px;
	}
	
	.projectslider ul {
		height: 270px;
		margin: 0;
	}
	
	.projectslider ul li img {
		max-width: 320px;
		/*width: 320px;*//*201602151210*/
		height: 220px;
	}

	.projectslider ul li{
		height: auto;
		width: 320px;
		max-width: 320px;
		/*margin-right: 13px;*/
		margin-right: 48px;
		overflow: hidden;
	}
	
	.projectslider ul li a {
		padding: 0;
		max-height: 220px;
		overflow: hidden;
	}
	
	.projectslider ul li div.pseudo_shadow {
		width: 320px;
		max-width: 320px;		
		height: 220px;
	}
	
	
	
	#projcontrol {
		/* top: 300px; */
		top: 370px;
		padding: 0;
		position: relative;
		overflow: hidden;
		text-align: center;
	}
	
	#projcontrol li {
		margin: 0;
		margin: 25px 18px 0 0;
		overflow: hidden;
	}
	#projcontrol li:last-child {
		margin-right: 0;
	}
}

@media (max-width: 375px) and (min-width: 375px) {
	
	.projectslider ul li{
		width: 375px;
		max-width: 375px;
		margin-left:-38px;
		margin-right: 50px;
	}
	
	.projectslider ul li img {
		/*max-width: 375px;*/
		width:375px;
		max-width: 375px;
	}
	
	.projectslider ul li div.pseudo_shadow {
		/*width: 375px;*/
		max-width: 375px;
		width: 375px;		
	}
			
@media (max-width: 640px) AND (min-width: 450px) {
	.projectslider ul {
		height: 270px;
		margin-top: 15px;
	}
}