@charset "utf-8";


#mv{
width:100%;
height:350px;
/*background:url(../img/Cosmic_Production_5th_Anniversary_CG.png) no-repeat;*/
background:url(/img/work_top.jpg) no-repeat;
background-position: center;
background-size: cover;
margin-bottom:3em;

}



section .head{
	text-align:center;
}

section .head h2{
	font-size:300%;
font-family: 'Antic Didone', serif;
letter-spacing:0.1em;
}



.fbox{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}



#works{
	max-width:1200px;
	margin:1em auto;
	position:relative;
	margin:0 auto 4em;
}

#works .fitem_pic{
	margin:0.5em 0;
	position:relative;
}


#works .fitem_pic a{
	text-decoration:none;
}

#works .fitem_pic figure{
background-position: top;
background-size: 100%;
background-repeat:no-repeat;
}

#works .fitem_pic img{
	vertical-align:middle;
	width:100%;
	height:auto;
	opacity:1;
}


#works .fitem_pic figcaption{
}


@media only screen and (min-width: 769px) {
	
#works .fitem_pic{
	overflow:hidden;
}

#works .fitem_pic{
	margin:1%;
	flex:0 0 48%;
}


#works .fitem_pic figure{
background-position: center;
background-size: 100%;
}


#works .fitem_pic figure::after{
	content:"";
background:url(/works/img/waku.png) no-repeat;
background-position: center;
background-size: 100% 100%;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}


#works .fitem_pic figcaption{
	position:absolute;
	/*bottom:calc(100% - 30px);*/
	bottom:0em;
	left:0;
	color:#fff;
	height:60px;
	background:rgba(0,0,0,0.8);
	padding:15px;
	width:100%;
	text-align:center;
transition: .4s ease-out;
}

/*#works .fitem_pic#w09 figure:hover figcaption{
	background: rgba(233,107,97,0.8);
}*/

#works .fitem_pic figcaption span{
	display:block;
	padding-bottom:2em;
}

#works .fitem_pic figcaption span.fsmall{
	display:inline;
	padding-bottom:0;
	font-size:80%;
}



#works .fitem_pic figure:hover figcaption{
	position:absolute;
	bottom:0;
	left:0;
	height:100%;
	padding:18% 1em 1em;

}
@media (any-hover:hover) {
}


@media (any-hover:none) {/*hover使えないタブレット用*/
	
		
#works .fitem_pic{
	overflow:auto;
}

#works .fitem_pic figcaption{
	position:absolute;
	top:62%;
	background:rgba(0,0,0,0.7);
	color:#fff;
	padding:15px;
	width:100%;
	height:auto;
	text-align:center;
}

#works .fitem_pic figcaption span{
	display:block;
	padding-bottom:0;
}

}


#works .fitem_pic figcaption::before{
	content:"";
	position:absolute;
	top:-15px;
	left:calc(50% - 15px);
  width: 30px;
  height: 30px;
  border: 15px solid;
  border-color: rgba(0,0,0,0.8) rgba(0,0,0,0.8) transparent transparent;
  transform: rotate(-45deg);
	/*background:rgba(0,0,0,0.8);*/
}

#works .fitem_pic figure:hover figcaption::before{
	content:"";
	position:absolute;
	top:-14px;
	left:calc(50% - 15px);
  width: 30px;
  height: 30px;
  border: 15px solid;
  border-color: rgba(0,0,0,0.8) rgba(0,0,0,0.8) transparent transparent;
  transform: rotate(135deg);
	/*background:rgba(0,0,0,0.8);*/
}


#works .fitem_pic figcaption::after{
	content:"";
	position:absolute;
	top:-15px;
	left:calc(50% - 15px);
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(-45deg);
	/*background:rgba(0,0,0,0.8);*/
}

#works .fitem_pic figure:hover figcaption::after{
	content:"";
	position:absolute;
	top:-14px;
	left:calc(50% - 15px);
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(135deg);
	/*background:rgba(0,0,0,0.8);*/
}

}





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


#works .fitem_pic{
	margin-bottom:1em;
}

#works .fitem_pic figure::after{
	content:"";
background:url(/works/img/waku.png) no-repeat;
background-position: top;
background-size: 101% auto;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

#works .fitem_pic figcaption{
	position:relative;
	color:#fff;
background:rgba(0,0,0,0);
	padding:20px 10px 5px;
	width:100%;
	text-align:center;
}


#works .fitem_pic figcaption span{
	display:block;
	padding-bottom:1em;
}

#works .fitem_pic figcaption::before{
	content:"";
	position:absolute;
	top:-15px;
	left:calc(50% - 15px);
  width: 30px;
  height: 30px;
  border: 15px solid;
  border-color: rgba(0,0,0,0.7) rgba(0,0,0,0.7)  transparent transparent;
  transform: rotate(-45deg);
}


#works .fitem_pic figcaption::after{
	content:"";
	position:absolute;
	top:-15px;
	left:calc(50% - 15px);
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(-45deg);
}


}

/*

#works .fitem_data_l{
	flex:0 0 48%;
	margin:1%;
	margn:auto;
	
}

#category h2{
	position:absolute;
	top:8%;
	text-align:center;
	width:100%;
	color:#333;
	font-size:200%;
}

#category .fitem .pic{
	height:100%;
}


#category .fitem img{
	width:100%;
	height:auto;
	vertical-align: middle;
}


#category .fitem:nth-of-type(1){
	background:url(../img/cate1.png) no-repeat;
	background-size:cover;
}

*/