@charset "UTF-8";

#wrapper{
	min-width:800px;
}

#content{
	width: 800px;
	margin: 0  auto;
	opacity:1;
}

#content .btn_close{
	position: fixed;
	width: 800px;
	left:50%;
	height: 80px;
	z-index: 1;
	margin-left: -400px;
	cursor:pointer;
}

#content .btn_close a{
	background-color:#f00;
	border:solid red 2px;
	position: absolute;
	right: 0;
	width:59px;
	height:80px;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}


#content .btn_close img{
	position: absolute;
	right: 0;
	display:block;
	opacity:0;
}


h1.works{
	font-family: 'Lato', sans-serif;
	position: inherit;
	text-align: left;
	font-size: 15px;
	letter-spacing: 0.16em;
		margin-top: 0;
	margin-bottom: 80px;
}

h1.works span{
	font-size: 12px;
	letter-spacing: 0.1em;
	display: block;
}

.works_text{
	margin-top: 0;
	margin-bottom: 80px;
	font-size: 14px;
	line-height: 37px;
	letter-spacing: 0.11em;
	text-align: justify; /* 両端揃え */
   text-justify: inter-ideograph; /* 両端揃えの種類 */
}

h1.works,
.works_text,
.works_img {
	/*visibility: hidden;*/
	opacity:0;
	-webkit-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}

h1.works.show,
.works_text.show,
.works_img.show{
	visibility: visible;
	opacity:1;

}

.works_img img{
	vertical-align: top;
}

.right{float: right;}
.left{float: left;}
.center{margin-left: 14px;}
.bottom{margin-bottom: 30px}

div[id^="block"] {
	margin-bottom: 200px
}
#block36_{
	padding-top: 140px;
}

#block8 .bottom{
	margin-bottom: 19px;
}

#block9 .bottom{
	margin-bottom: 19px;
}



.fadeIn {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 visibility: visible !important;
}
@-webkit-keyframes fadeIn {
 0% { -webkit-transform: translateY(50px); }
 100% { -webkit-transform: translateY(0); }
}
@keyframes fadeIn {
 0% { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


#block1_{height:3087px;}
#block2_{height:2451px;}
#block3_{height:1712px;}
#block4_{height:1914px;}
#block5_{height:2897px;}
#block6_{height:2140px;}
#block7_{height:2125px;}
#block8_{height:1638px;}
#block9_{height:1583px;}
#block10_{height:3061px;}
#block11_{height:2049px;}
#block12_{height:1393px;}
#block13_{height:2733px;}
#block14_{height:2468px;}
#block15_{height:5068px;}
#block16_{height:1803px;}
#block17_{height:1459px;}
#block18_{height:1853px;}
#block19_{height:1226px;}
#block20_{height:1925px;}
#block21_{height:1147px;}
#block22_{height:4619px;}
#block23_{height:2227px;}
#block24_{height:1647px;}

.mobile #content>[id^='block']{
	height:auto;
}


#content .btn_close .close_area{
	position: absolute;
	width:59px;
	height:80px;
	right: 0;
	display: block;
}

#content .btn_close .bar1{
	width:59px;
	height:80px;
	background-image:url(../img/works/bar1.svg);
	background-size: 59px 80px;
	position:absolute;
	right:0;
	-webkit-transition:-webkit-transform 0.4s ease-out;
	transition:transform 0.4s ease-out;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}

#content .btn_close .bar2{
	width:59px;
	height:80px;
	background-image:url(../img/works/bar2.svg);
	background-size: 59px 80px;
	position:absolute;
	right:0;
	-webkit-transition:-webkit-transform 0.4s ease-out;
	transition:transform 0.4s ease-out;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}

#content .close_area:hover .bar1{
	-webkit-transform: rotate(233deg);
	transform: rotate(233deg);
}

#content .close_area:hover .bar2{
	-webkit-transform:rotate(307deg);
	transform:rotate(307deg);
}



/* -----------------------------------
		clearFix
 ----------------------------------- */
.clear_fix{
	zoom:1;
}
.clear_fix:after{
	content:".";
	visibility:hidden;
	height:0;
	display:block;
	clear:both;
}





/**********************
mobile
************************/

.mobile #sceen_frame{
	/*width:668px !important;*/
	min-width:initial;
	min-height:initial;
}

.mobile #content .btn_close{
	width:480px;
	left:80px;
	margin-left:0;
}

.mobile .center{
	margin-left:0;
}

.mobile #content{
	width:480px;
}

.mobile .bottom{
	margin-bottom: 0;
}

.mobile .works_img img{
	width:100%;
	height:auto;
	margin-bottom: 30px;
}