@charset "utf-8";
#page.works #main{
	background-image: url(../images/works/main.jpg);
}
	#page.works #main #pagetitle{
		width:500px;
	}
#page.works #contents{
	padding-bottom:90px;
}
  #page.works #contents .workscol .box{
    margin-bottom:90px;
  }

#page.works #contents h2{
	font-size:28px;
	font-weight:bold;
	margin-bottom:80px;
}


#page.works #works-navi{
	width:100%;
	background-color: #fff;
	border-bottom:1px solid #b8b8b8;
}
	#page.works #works-navi ul{
		margin:0 auto;
		max-width:1300px;
		height:140px;
		border-left:1px solid #b8b8b8;
	}
		#page.works #works-navi ul li{
			width:33.3%;
			height:100%;
			border-right:1px solid #b8b8b8;
			float:left;
		}
		#page.works #works-navi ul li:nth-child(1){
			width:33.4%;
		}
		#page.works #works-navi ul li a{
			max-width:100%;
			height:100%;
			display: flex;
    	-webkit-align-items: center;
    	align-items: center;
    	-webkit-flex-wrap: wrap;
    	flex-wrap: wrap;
    	-webkit-align-content: center;
    	align-content: center;
    	-webkit-justify-content: center;
    	justify-content: center;
			background-color: #fff;
		}
		#page.works #works-navi ul li a:hover{
			background-color: #e6e6e6;
		}
			#page.works #works-navi ul li a > div{
				text-align: center;
			}
			#page.works #works-navi ul li a > div > div:nth-child(1){
				font-size:12px;
			}
			#page.works #works-navi ul li a > div > div:nth-child(2){
				font-size:22px;
				font-weight: bold;
				line-height:1.4;
			}
@media (max-width: 768px) {
	#page.page #main #pagetitle{
		width:70vw;
	}
	#page.works #works-navi ul li a > div > div:nth-child(1){
		font-size:2.4vw;
	}
	#page.works #works-navi ul li a > div > div:nth-child(2){
		font-size:3.8vw;
	}
	#page.works #contents h2{
		font-size:5.2vw;
		font-weight:bold;
		margin-bottom:8vw;
	}
}





.works.article #contents .titlebox{
	position: relative;
	width:100%;
	padding-bottom:10px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	border-bottom:2px solid #000;
}
	.works.article #contents .titlebox > div{
		position: relative;
		z-index: 30;
	  display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-align-content: center;
		align-content: center;
		-webkit-justify-content: center;
		justify-content: center;
		width:80px;
	  height:27px;
	  line-height:1;
	  font-size:12px;
	  color:#fff;
		background-color:#000;
	}
	#page.works.article #contents .contents_header .titlebox h1{
		margin:0 0 0 15px;
		padding:0;
		font-size:28px;
		line-height:1.2;
	}
	.works.article #contents .contents_header .specbox{
		width:100%;
		margin:0;
		padding:10px 35px;
		border-bottom:2px solid #000;
		display:table;
	}
		.works.article #contents .contents_header .specbox dl{
			display:table;
			float:left;
			margin-right:20px;
		}
			.works.article #contents .contents_header .specbox dl dt{
				display:table-cell;
				vertical-align:middle;
				position: relative;
				line-height:1.4;
			}
				.works.article #contents .contents_header .specbox dl dt:after{
					content:"■";
					position: relative;
					float:left;
				}
			.works.article #contents .contents_header .specbox dl dd{
				display:table-cell;
				vertical-align:middle;
				position: relative;
				line-height:1.4;
			}
			.works.article #contents .contents_header .specbox dl dd:before{
				content:"：";
				position: relative;
				float:left;
			}
			.works.article #contents .contents_header .specbox .type{
				display:table;
				float:left;
				margin-right:20px;
				line-height: 1.4;
			}
			.works.article #contents .contents_header .specbox .type:after{
				content:"■";
				position: relative;
				float:left;
			}



	.works.article #contents .photobox .photoboxin{
		margin:90px auto 10px;
		overflow:hidden;
		width:800px;
		height:540px;
	}
	.works.article #contents .photobox img{
		width:100%;
		height:100%;
		object-fit: contain;
	}
	.works.article #contents .photobox .photolist{
		display:table;
		margin:0;
		width:100%;
	}
	.works.article #contents .photobox ul{
		display : flex;
	  flex-wrap : wrap;
	  justify-content:space-between;
	}
	.works.article #contents .photobox ul{
		display : flex;
	  flex-wrap : wrap;
	  justify-content:space-between;
	}
		.works.article #contents .photobox li{
			margin:0 10px 10px 0;
			position: relative;
    	overflow: hidden;
			width:70px;
			height:70px;
			float:left;
			background-color:#f0f0f0;
		}
			.works.article #contents .photobox li img{
				position: absolute;
			  top: 50%;
			  left: 50%;
			  -webkit-transform: translate(-50%, -50%);
			  -ms-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%);
			  width: 100%;
			  height: 70px;
		    transition: all 0.2s linear;
				object-fit: cover;
			}
			.works.article #contents .photobox li img:hover {
				opacity: 0.8;
			}
		.works.article #contents .photobox li:nth-child(10){
			margin:0;
		}

		.works.article #contents .commentbox{
			margin:70px 0 90px;
		}
			.works.article #contents .commentbox p{
				margin:0 0 1em;
			}
@media (max-width: 640px) {
	#page.works.article #contents{
		padding-bottom:18vw;
	}
	#page.works.article #contents .contents_header .titlebox{
		display:table;
	}
	#page.works.article #contents .contents_header .titlebox h1{
		font-size:6vw;
		padding: 2vw 0 2vw;
		float:none;
	}
	.works.article #contents .titlebox > div{
		min-width:auto;
		width:auto;
		height:auto;
		font-size:3.2vw;
		padding:1.5vw 3vw;
		float:none;
		display:table;
	}

	.works.article #contents .contents_header .specbox{
		padding:10px 20px;
	}

	.works.article #contents .photobox .photoboxin{
		width:100%;
		height:auto;
		margin: 50px 0 20px;
	}

	.works.article #contents .photobox li{
		margin:0 0 2vw 0;
		position: relative;
		overflow: hidden;
		width:16vw;
		height:16vw;
		float:left;
		background-color:#f0f0f0;
	}
		.works.article #contents .photobox li img{
			height:16vw;
		}
		.works.arvwticle #contents .commentbox{
			margin:50px 0 60pxvw;
		}
}