@charset "utf-8";

/* ==================================================================
	event.css
	
=================================================================== */

/* --------------------------------
   □ general
-------------------------------- */ 
.contents main .accentArea{
	background-image:url("../../images/works/accent.jpg");
}

/* ==================================================================
	list
=================================================================== */

/* --------------------------------
   □ categories
-------------------------------- */ 
	#worksList .contents .categories{
		margin-bottom: 60px;
	}

		#worksList .contents .categories > dl{
			display:table;
			width:100%;
		}

		#worksList .contents .categories > dl > *{
			display:table-cell;
		}

		#worksList .contents .categories > dl dt{
			vertical-align:middle;
			line-height:1.1;
			width:4.5em;
			font-size: 92%;
		}

		#worksList .contents .categories > dl dd{
			padding: 0px 0 0 10px;
		}
		#worksList .contents .categories > dl dd ul li{
			display: inline-block;
			float: left;
			margin-right: 8px;

		}
		#worksList .contents .categories > dl dd ul li a{
			display: block;
			line-height: 1.1;
			font-size: 92%;
			padding: 6px 18px;
			color: var(--text-color, #212529);
			background: #eeeeee;
			text-decoration: none;
			border-radius:6px;
			transition: 0.3s all;
		}
		#worksList .contents .categories > dl dd ul li a:hover{
			background: var(--bg-color-black, #212529);
			color: #fff;
		}
		#worksList .contents .categories > dl dd ul li.selected a{
			background: var(--bg-color-black, #212529);
			color: #fff;
			font-weight:500;
		}

/* --------------------------------
   □ lists
-------------------------------- */ 
	#worksList .contents .lists{

	}
	#worksList .contents .lists ul.list{
		overflow: hidden;
		margin-bottom: 40px;
	}
	#worksList .contents .lists ul.list > li{
		overflow: hidden;
		position: relative;
		width: 346px;
		height: 261px;
		background: #222;
		margin-bottom: 18px;
	}

	#worksList .contents .lists ul.list > li a {
		position:relative;
		display: table;
		width: 100%;
		height: 100%;
		background:50% 50% no-repeat;
		background-size: cover;
		transition: all 300ms 0s ease;
		text-decoration: none;
	}
	
	#worksList .contents .lists ul.list > li > a > div {
		background:rgba(0,0,0,0.2);
		background-size: cover;
		display: table-cell;
		vertical-align: bottom;
		padding: 22px;
		transition: all 300ms 0s ease;
	}

	#worksList .contents .lists ul.list > li a:hover {
		transform: scale(1.1);
		opacity: 0.8;
	}
	#worksList .contents .lists ul.list > li a:hover div{
		transform: scale(0.91);
	}

	#worksList .contents .lists ul.list > li ul.class {
		top: 0;
		right: 0;
		text-align: left;
	}

	#worksList .contents .lists ul.list > li ul.class li{
		display: inline-block;
		background: #000;
		margin-right: 6px;
		margin-bottom: 3px;
		padding: 2px 8px;
		color: #fff;
		border-radius: 0;
		font-weight:400;
		font-size: 87%;
	}
	#worksList .contents .lists ul.list > li ul.class li.voice{
		background: #d3b511;
	}



	#worksList .contents .lists ul.list > li a dl{
		margin-bottom: 16px;
		color: #fff;
		font-weight: 500;
		text-shadow: 0px 1px 8px rgba(0,0,0,0.7);
	}

	#worksList .contents .lists ul.list > li dl{
	}
	
	#worksList .contents .lists ul.list > li dl dt{
		font-size: 108%;
		font-weight: 700;
		line-height: 1.1;
		margin-bottom: 12px;
	}
	
	#worksList .contents .lists ul.list > li dl dd{
		font-size:120%;
		font-weight: bold;
	}
	
	#worksList .contents .lists ul.list > li.pickup{
		width: 715px;
		height: 540px;
	}

/* ==================================================================
	list
=================================================================== */

/* --------------------------------
   □ details
-------------------------------- */ 
#details {
	padding-top: 60px;
}

#details .image{
	text-align: center;
	margin-bottom: 61px;
}

#details .outline{
	float: left;
	width: 685px;
}

	#details .outline .no{
		font-size: 250%;
		line-height: 1.1;
		margin-bottom: 15px;
		font-weight: 600;
	}
	#details .outline h2{
		font-size:156%;
		margin-bottom:17px;
	}

	#details .outline ul.class {
		margin-bottom:23px;
	}

	#details .outline ul.class li{
		display: inline-block;
		background: #000;
		margin-bottom: 3px;
		padding: 2px 8px;
		color: #fff;
		border-radius: 4px;
		font-weight:400;
		font-size: 87%;
	}

	#details  .outline p.comment{
		line-height: 1.8;
	}

#details .data{
	float: right;
	width: 320px;
}

#details .data >dl dt{
	font-size: 156%;
	font-weight: 600;
	padding-bottom: 17px;
	margin-bottom: 33px;
	border-bottom: 2px solid #252525;
}

#details .data >dl dd table{
	margin-bottom: 26px;
}

#details .data >dl dd table th,
#details .data >dl dd table td{
	padding: 0 0 12px 0;
}

#details .data >dl dd table th{
	width: 5em;
	font-weight: 500;
}

#details .data .buttonStyle a{
	width: 100%;
}


/* ◇ images
-------------------------------- */ 
#details .images{
	clear: both;
	padding-top: 81px;
}
#details .images li{
	text-align: center;
	margin-bottom: 61px;
}
#details .images li:last-child{
	margin-bottom: 0;
}


/* ◇ modelhouse
-------------------------------- */ 
#modelhouse{
	background: #f1f1f1;
	padding: 53px 0;
	margin-bottom: 64px;
}
#modelhouse .link{
	overflow:hidden;
	box-sizing:border-box;
	width:100%;
	height:330px;
	margin: 0;
}
#modelhouse .link p{
	display: table;
	width: 100%;
	height: 100%;
	color:#fff;
	transition: all 500ms 0s ease;
	text-decoration:none;
	background:50% 50% url("../../images/works/modelhouse.jpg") no-repeat;
	background-size:cover;
}
	#modelhouse .link p > a{
		position:relative;
		display: table-cell;
		vertical-align:middle;
		position:relative;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.2);
		transition: all 500ms 0s ease;
		text-shadow: 0px 1px 8px rgba(0,0,0,0.7);
		color:#fff;
		text-decoration: none;
		
		text-align:center;
		letter-spacing:0.05em;
		font-size:125%;
		line-height:1.1;
		font-weight:600;
	}
	
	#modelhouse .link p:hover{
		transform: scale(1.1);
	}
	#modelhouse .link:hover a{
		background:rgba(0,0,0,0.4);
		transform: scale(0.91);
	}

	#modelhouse .link a em{
		display:block;
		text-align:center;
		font-size:265%;
		line-height:1;
		margin-bottom:13px;
		font-weight:500;
		letter-spacing: 0.1em;
	}

	#modelhouse .link a .head{
		display:inline-block;
		margin-bottom: 16px;
	}

	#modelhouse .link a .foot{
		padding-right: 28px;
		background: url("../../images/common/icon/arrow/white-right.png") 100% 50% no-repeat;
	}


@media only screen and
(max-width : 767px) {
	
.contents main .accentArea {
    background-position: 70% 50%;
}
    
/* --------------------------------
   □ categories
-------------------------------- */ 
	#worksList .contents .categories{
		margin-bottom: 6%;
	}

		#worksList .contents .categories > dl{
			display:block;
			width:auto;
		}

		#worksList .contents .categories > dl > *{
			display:block;
		}

		#worksList .contents .categories > dl dt{
			width:auto;
			margin-bottom: 8px;
		}

		#worksList .contents .categories > dl dd{
			padding: 0px 0 0 0;
		}
		#worksList .contents .categories > dl dd ul li{
			margin-right: 8px;
			margin-bottom: 8px;
		}
/* --------------------------------
   □ lists
-------------------------------- */ 
	#worksList .contents .lists{

	}
	#worksList .contents .lists ul.list{
		margin-bottom: 6%;
	}
	#worksList .contents .lists ul.list > li{
		width: auto;
		height: 230px;
		margin-bottom: 4%;
	}

	#worksList .contents .lists ul.list > li.left,
	#worksList .contents .lists ul.list > li.right{
		float: none;
	}

	#worksList .contents .lists ul.list > li > a > div {
		padding: 4%;
	}

	#worksList .contents .lists ul.list > li a:hover {
		transform: scale(1);
	}
	#worksList .contents .lists ul.list > li a:hover div{
		transform: scale(1);
	}

	#worksList .contents .lists ul.list > li a dl{
		margin-bottom: 3%;
	}

	#worksList .contents .lists ul.list > li dl{
	}
	
	#worksList .contents .lists ul.list > li dl dt{
		font-size: 150%;
		margin-bottom: 1%;
	}
	
	#worksList .contents .lists ul.list > li dl dd{
		font-size:125%;
	}
	
	#worksList .contents .lists ul.list > li.pickup{
		width: auto;
		height: 230px;
	}

/* ==================================================================
	details
=================================================================== */

/* --------------------------------
   □ details
-------------------------------- */ 
#details {
	padding-top: 6%;
}

#details .image{
	text-align: center;
	margin-bottom: 6%;
    margin-left: -4%;
    width: 108%;
}

#details .outline{
	float: none;
	width: auto;
	margin-bottom: 10%;
}

	#details .outline .no{
		font-size: 150%;
		margin-bottom: 2%;
	}
	#details .outline h2{
		font-size:126%;
		margin-bottom:3%;
	}

	#details .outline ul.class {
		margin-bottom:4%;
	}

	#details  .outline p.comment{
		line-height: 1.8;

	}

#details .data{
	float: none;
	width: auto;
}

#details .data >dl dt{
	font-size: 126%;
	padding-bottom: 2%;
	margin-bottom: 4%;
}

#details .data >dl dd table{
	margin-bottom: 4%;
}

/* ◇ images
-------------------------------- */ 
#details .images{
	clear: both;
	margin: 0 4%;
	padding-top: 8%;
}
#details .images li{
	margin-bottom: 4%;
}
#details .images li:last-child{
	margin-bottom: 0;
}


/* ◇ modelhouse
-------------------------------- */ 
#modelhouse{
	padding: 6% 0;
	margin-bottom: 6%;
}
#modelhouse .link{
	height:200px;
}
	
	#modelhouse .link p > a{
		font-size:100%;
	}
	
	#modelhouse .link p:hover{
		transform: scale(1);
	}
	#modelhouse .link:hover a{
		transform: scale(1);
	}

	#modelhouse .link a em{
		font-size:165%;
		line-height:1;
		margin-bottom:4%;
	}
	#modelhouse .link a img{
		max-width: 80%;
	}

	#modelhouse .link a .head{
		margin-bottom: 2%;
	}

	#modelhouse .link a .foot{
		padding-right: 22px;
	}



}