jQuery/サークルtoggle

	
var z = 1;
$("#service1").click(function(){
	if($(this).hasClass("small")){
		$(this).animate({
			width: "500px",
			height: "500px",
			position: "absolute",
			left: "8%"
		}, 1000);
		$(this).addClass("big").removeClass("small");
		$(".aaa").fadeIn();
		$(this).css({
			lineHeight: "30px",
			zIndex: z++
		});
		$(this).html("br />br />" + 
			"p>Webサイト製作、更新、管理/p>" +
			"p>HTML,CSS,JavaScript,jQueryをbr />使ったコーディング/p>" +
			"p>パソコン、タブレット、スマホ対応のbr />レスポンシブデザイン/p>" +
			"p>ドメイン取得からアップロードまで/p>"　 + "br />" +
			"a href='web.html'>詳しくはこちら/a>"
		);
		
		$("#service2").animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			left: "70%"
		}, 1000);
		$("#service2").addClass("small").removeClass("big");
		$("#service2").text("パソコンサポート").css("lineHeight", "200px");
		
		$("#service3").animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			top: "160%",
			left: "43%"
		}, 1000);
		$("#service3").addClass("small").removeClass("big");
		$("#service3").text("緑地管理、景観維持").css("lineHeight", "200px");
	} else {
		$(this).animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			left: "14%"
		}, 1000);
		$(this).addClass("small").removeClass("big");
		$(this).text("Webサイト").css("lineHeight", "200px");
	}
});

$("#service2").click(function(){
	if($(this).hasClass("small")){
		$(this).animate({
			width: "500px",
			height: "500px",
			position: "absolute",
			left: "47%"
		}, 1000);
		$(this).addClass("big").removeClass("small");
		$(this).css({
			lineHeight: "30px",
			zIndex: z++
		});
		$(this).html("br />br />" + 
			"p>パソコンサポート/p>" +
			"p>インストールの手順がわからない/p>" +
			"p>アップデートはどうやるのといった/p>" +
			"p>パソコンのトラブルを解決します。/p>" + "br />" +
			"a href='suport.html'>詳しくはこちら/a>"
		);
		
		$("#service1").animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			left: "14%"
		}, 1000);
		$("#service1").addClass("small").removeClass("big");
		$("#service1").text("Webサイト製作").css("lineHeight", "200px");
		
		$("#service3").animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			top: "160%",
			left: "43%"
		}, 1000);
		$("#service3").addClass("small").removeClass("big");
		$("#service3").text("緑地管理、景観維持").css("lineHeight", "200px");
	} else {
		$(this).animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			left: "70%"
		}, 1000);
		$(this).addClass("small").removeClass("big");
		$(this).text("パソコンサポート").css("lineHeight", "200px");
	}
});

$("#service3").click(function(){
	if($(this).hasClass("small")){
		$(this).animate({
			width: "500px",
			height: "500px",
			position: "absolute",
			top: "130%",
			left: "30%"
		}, 1000);
		$(this).addClass("big").removeClass("small");
		$(this).css({
			lineHeight: "30px",
			zIndex: z++
		});
		$(this).html("br />br />" +
			"p>草刈り機、芝刈り機を使ってのbr />除草、芝刈り/p>" +
			"p>中低木剪定/p>" +
			"p>落ち葉や枯れ葉などの集草、集葉/p>" +
			"p>軽微な清掃まで行う環境整備/p>" + "br />" +
			"a href='kanri.html'>詳しくはこちら/a>"
		);
		
		$("#service1").animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			left: "14%"
		}, 1000);
		$("#service1").addClass("small").removeClass("big");
		$("#service1").text("Webサイト製作").css("lineHeight", "200px");
		
		$("#service2").animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			left: "70%"
		}, 1000);
		$("#service2").addClass("small").removeClass("big");
		$("#service2").text("パソコンサポート").css("lineHeight", "200px");
	} else {
		$(this).animate({
			width: "200px",
			height: "200px",
			position: "absolute",
			top: "160%",
			left: "43%"
		}, 1000);
		$(this).addClass("small").removeClass("big");
		$(this).text("領地管理、景観維持").css("lineHeight", "200px");
	}
});