$(function(){
		
		var i = ($(window).height());//ページ開いたときのページheight
		$(window).resize(function(){var i = ($(window).height());//リサイズしたときのページheight
							$('#works_container').css('height',540);
							});
		$('#works_container').css('height',540);//ここまで、#works_containerにbgをつける記述
		
		$('.work_view').css('opacity','0');
		$('.work').css('display','block');
	
		
		$('.box_2').click(function(){
			//最初の位置
			$('#work_1') .css('left','20px').css('top','0px').css('opacity','0');
			$('#work_2') .css('left','130px').css('top','0px').css('opacity','0');
			$('#work_3') .css('left','240px').css('top','0px').css('opacity','0');
			$('#work_4') .css('left','350px').css('top','0px').css('opacity','0');
			$('#work_5') .css('left','460px').css('top','0px').css('opacity','0');
			$('#work_6') .css('left','570px').css('top','0px').css('opacity','0');
			$('#work_7') .css('left','680px').css('top','0px').css('opacity','0');
			
			$('#work_8') .css('left','20px').css('top','110px').css('opacity','0');
			$('#work_9') .css('left','130px').css('top','110px').css('opacity','0');
			$('#work_10') .css('left','240px').css('top','110px').css('opacity','0');
			$('#work_11') .css('left','350px').css('top','110px').css('opacity','0');
			$('#work_12') .css('left','460px').css('top','110px').css('opacity','0');
			$('#work_13') .css('left','570px').css('top','110px').css('opacity','0');
			$('#work_14') .css('left','680px').css('top','110px').css('opacity','0');
			
			$('#work_15') .css('left','20px').css('top','220px').css('opacity','0');
			$('#work_16') .css('left','130px').css('top','220px').css('opacity','0');
			$('#work_17') .css('left','240px').css('top','220px').css('opacity','0');
			$('#work_18') .css('left','350px').css('top','220px').css('opacity','0');
			$('#work_19') .css('left','460px').css('top','220px').css('opacity','0');
			$('#work_20') .css('left','570px').css('top','220px').css('opacity','0');
			$('#work_21') .css('left','680px').css('top','220px').css('opacity','0');
			
			$('#work_22') .css('left','20px').css('top','330px').css('opacity','0');
			$('#work_23') .css('left','130px').css('top','330px').css('opacity','0');
			$('#work_24') .css('left','240px').css('top','330px').css('opacity','0');
			$('#work_25') .css('left','350px').css('top','330px').css('opacity','0');
			$('#work_26') .css('left','460px').css('top','330px').css('opacity','0');
			$('#work_27') .css('left','570px').css('top','330px').css('opacity','0');
			$('#work_28') .css('left','680px').css('top','330px').css('opacity','0');
			
				//フェード後の位置
				$('#work_1').animate({left:'20px',top:'0px',opacity: 1},200//ふたつのアニメを同時に
				,function(){$('#work_2').animate({left:'130px',top:'0px',opacity: 1},100//順番にアニメする
				,function(){$('#work_3').animate({left:'240px',top:'0px',opacity: 1},100
				,function(){$('#work_4').animate({left:'350px',top:'0px',opacity: 1},100
				,function(){$('#work_5').animate({left:'460px',top:'0px',opacity: 1},100
				,function(){$('#work_6').animate({left:'570px',top:'0px',opacity: 1},100
				,function(){$('#work_7').animate({left:'680px',top:'0px',opacity: 1},100
												 
				,function(){$('#work_8').animate({left:'20px',top:'110px',opacity: 1},100
				,function(){$('#work_9').animate({left:'130px',top:'110px',opacity: 1},100
				,function(){$('#work_10').animate({left:'240px',top:'110px',opacity: 1},100
				,function(){$('#work_11').animate({left:'350px',top:'110px',opacity: 1},100
				,function(){$('#work_12').animate({left:'460px',top:'110px',opacity: 1},100
				,function(){$('#work_13').animate({left:'570px',top:'110px',opacity: 1},100
				,function(){$('#work_14').animate({left:'680px',top:'110px',opacity: 1},100
												  
				,function(){$('#work_15').animate({left:'20px',top:'220px',opacity: 1},100
				,function(){$('#work_16').animate({left:'130px',top:'220px',opacity: 1},100
				,function(){$('#work_17').animate({left:'240px',top:'220px',opacity: 1},100
				,function(){$('#work_18').animate({left:'350px',top:'220px',opacity: 1},100
				,function(){$('#work_19').animate({left:'460px',top:'220px',opacity: 1},100
				,function(){$('#work_20').animate({left:'570px',top:'220px',opacity: 1},100
				,function(){$('#work_21').animate({left:'680px',top:'220px',opacity: 1},100
												  
				,function(){$('#work_22').animate({left:'20px',top:'330px',opacity: 1},100
				,function(){$('#work_23').animate({left:'130px',top:'330px',opacity: 1},100
				,function(){$('#work_24').animate({left:'240px',top:'330px',opacity: 1},100
				,function(){$('#work_25').animate({left:'350px',top:'330px',opacity: 1},100
				,function(){$('#work_26').animate({left:'460px',top:'330px',opacity: 1},100
				,function(){$('#work_27').animate({left:'570px',top:'330px',opacity: 1},100
				,function(){$('#work_28').animate({left:'680px',top:'330px',opacity: 1},100
				)}
				)}
				)}//追加するときは、これも１個づつ足していく
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
				)}
															);
			
										}
						     		)
				})
		
		
		$('#work_1').click(function(){
									$(".work_view").load("works_file.html #works_1")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_2').click(function(){
									$(".work_view").load("works_file.html #works_2")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_3').click(function(){
									$(".work_view").load("works_file.html #works_3")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_4').click(function(){
									$(".work_view").load("works_file.html #works_4")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_5').click(function(){
									$(".work_view").load("works_file.html #works_5")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_6').click(function(){
									$(".work_view").load("works_file.html #works_6")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_7').click(function(){
									$(".work_view").load("works_file.html #works_7")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_8').click(function(){
									$(".work_view").load("works_file.html #works_8")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_9').click(function(){
									$(".work_view").load("works_file.html #works_9")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_10').click(function(){
									$(".work_view").load("works_file.html #works_10")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_11').click(function(){
									$(".work_view").load("works_file.html #works_11")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_12').click(function(){
									$(".work_view").load("works_file.html #works_12")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_13').click(function(){
									$(".work_view").load("works_file.html #works_13")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_14').click(function(){
									$(".work_view").load("works_file.html #works_14")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_15').click(function(){
									$(".work_view").load("works_file.html #works_15")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_16').click(function(){
									$(".work_view").load("works_file.html #works_16")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_17').click(function(){
									$(".work_view").load("works_file.html #works_17")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_18').click(function(){
									$(".work_view").load("works_file.html #works_18")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_19').click(function(){
									$(".work_view").load("works_file.html #works_19")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_20').click(function(){
									$(".work_view").load("works_file.html #works_20")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_21').click(function(){
									$(".work_view").load("works_file.html #works_21")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_22').click(function(){
									$(".work_view").load("works_file.html #works_22")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_23').click(function(){
									$(".work_view").load("works_file.html #works_23")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_24').click(function(){
									$(".work_view").load("works_file.html #works_24")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_25').click(function(){
									$(".work_view").load("works_file.html #works_25")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_26').click(function(){
									$(".work_view").load("works_file.html #works_26")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_27').click(function(){
									$(".work_view").load("works_file.html #works_27")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('#work_28').click(function(){
									$(".work_view").load("works_file.html #works_28")//#work_viewの中に読み込む
		   							,function(){$(this).appendTo('.work_view')}
									$(".work_view").css("top",-200);//#work_viewを上に移動させて
									$(".work_view").css('display','block');//#work_viewを表示
									$(".work_view").animate({"opacity" : 1,top:'0px'},600,"easeOutExpo")//#work_viewをフェードインしながら上移動
									})
		
		$('.work_view').click(function(){
									$(".work_view").animate({"opacity" : 0,"top": 200},600,"easeOutExpo"//#work_viewをフェードアウト
									,function(){$('.work_view').css('display','none');});//#work_viewを非表示
									})
})