
/* -------------- works ------------------- */


/* -- top -- */

.works_top{
 width:100%;
 height:270px;
 background-color:#f6921e;
 }

.works_top_box{
 width:1024px;
 height:270px;
 background-color:#f6921e;
 display:inline-block;
}

.works_top_inbox1{
 width:700px;
 height:270px;
 display:inline-block;  
 vertical-align: top;
}

.works_top_inbox2{
 width:300px;
 height:270px;
 display:inline-block;
 position: relative;

}

.works_inbox2_contents{
  position: absolute;
  top: 107px;
  left: 65px;
}

.works_hr{
 width:150px;
 height:0px;
 background-color:#fff;
 margin: auto; 

}





/* -- contentes -- */



.works_contents_box{
 width:1024px;
 margin:0px auto;
}

.works_contents_bottom{
 width:1024px;
 margin:0px auto;
 position: relative;
}


.works_img{
width:100%;
 display:inline-block;
}


.works_contents_hr{
 width:147px;
 height:0px;
 background-color:#fff;
 margin: auto; 
 
}









/* -- font -- */


.works_title1{
   font-weight:400;
   font-family: 'Playfair Display', serif;
   color:#fff;
   letter-spacing:6px;
   line-height:0.7;
   font-size:25px;
		}

.works_title2{
			font-weight:600;
   font-family: 'Noto Serif JP', serif;
   color:#fff;
   letter-spacing:6px;
   padding-top:7px;
   font-size:14px;
		}
  
  



.works_contents1{

   font-weight:600;
   font-family: 'Noto Serif JP', serif;
   color:#b70004;
   font-size:12px;
}

.works_contents2{
	margin-top:10px;
   }







/* -- mouseover -- */

.sampe1 img{

  width: 100%;}

.sample1 {
  margin: 12px;
 width:228px;
 height:228px;
 display:inline-block;
	overflow:		hidden;
	position:		relative;
  background: #000;

}

.sample1 .caption {
	text-align: 		center;
	padding-top:	40px;
 
 font-weight:400;
 font-family: 'Noto Sans JP', sans-serif;
 color:#fff;
 letter-spacing:0px;
 line-height:1.9;
 font-size:12px;
}


.sample1 .caption2{
	text-align: 		center;
	padding-top:	51px;
 
 font-weight:400;
 font-family: 'Noto Sans JP', sans-serif;
 color:#fff;
 letter-spacing:0px;
 line-height:1.9;
 font-size:12px;
}


.sample1 .mask {
	width:			166px;
	height:			166px;
	position:		absolute;
	top:			31px;
	left:			31px;
	opacity:		0;
	background-color:	rgba(255,136,0,0.5);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}

.sample1:hover .mask {
	opacity:		1;
 padding-top:		10px;
}

.sample1:hover img{
  transform: scale(1.1);
  opacity: 0.8;
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}

/* --tab --*/

.sampe1_t img{
width: 100%;}

.sample1_t {
  margin: 12px;
 width:228px;
 height:228px;
 display:inline-block;
	overflow:		hidden;
	position:		relative;
  background: #fff;

}



/* ----------------------- works page other ------------------ */



#works_page{
 display:none;
 z-index:9999;
 }
 
 .works_contentsAdd_box{
 width:1024px;
 margin:0px auto;
}


.works_contentAdd_bottom{
 width:1024px;
 margin:0px auto;
}


.works_contentsAdd1{

   font-weight:600;
   font-family: 'Noto Serif JP', serif;
   color:#b70004;
   font-size:12px;
}

.works_contentsAdd2{
	margin-bottom:10px;
   }



/* font */

.works_page_title1{
   font-weight:400;
   font-family: 'Playfair Display', serif;
   color:#b70004;
   letter-spacing:6px;
   line-height:0.7;
   font-size:25px;
		}

.works_page_title2{
			font-weight:600;
   font-family: 'Noto Serif JP', serif;
   color:#b70004;
   letter-spacing:6px;
   padding-top:7px;
   font-size:14px;
		}
  
.works_page_hr{
 width:150px;
 height:0px;
 background-color:#fff;
 margin: auto; 
}


/* ---- fadein add -- */

.fadeInUp_works_lightbox9 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox9.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox10 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox10.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox11 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox11.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox12 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox12.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox13 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox13.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox14 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox14.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox15 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox15.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox16 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox16.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox17 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox17.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox18 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox18.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox19 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox19.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox20 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox20.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox21 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox21.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox22 {
  display:inline-block;

  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox22.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox23 {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox23.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox24 {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox24.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox25 {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox25.in{
  opacity : 1;
  transform : translate(0, 0);
}




/*  fadein add mobile */


.fadeInUp_works_lightbox9_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox9_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox10_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox10_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox11_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox11_m.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox12_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox12_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox13_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox13_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox14_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox14_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox15_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox15_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox16_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox16_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox17_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox17_m.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox18_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox18_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox19_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox19_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox20_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox20_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

.fadeInUp_works_lightbox21_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox21_m.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox22_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox22_m.in{
  opacity : 1;
  transform : translate(0, 0);
}



.fadeInUp_works_lightbox23_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox23_m.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox24_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox24_m.in{
  opacity : 1;
  transform : translate(0, 0);
}


.fadeInUp_works_lightbox25_m {
  display:inline-block;
  
  opacity : 0;
  transform : translate(0, 20px);
  transition :  1s;
}
.fadeInUp_works_lightbox25_m.in{
  opacity : 1;
  transform : translate(0, 0);
}

