@charset "utf-8";

body{
	background: #c1a787;
	background: url(../images/bg_craft.png);
	color: #6d422f;
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}

#all_wrapper{
	position: relative;
	overflow-x: hidden;
	background: #fef5ee;
	background: url(../images/bg_craft.png);
}

#canvas_wrapper{
	background: #fef5ee;
	background: url(../images/bg_canvas.png);
	position: relative;
	z-index: 1;
}

#top{
	height: 40px;
}

#canvas_wrapper:before{
	position: absolute;
	display: block;
	content: "";
	top: -40px;
	width: 120%;
	height: 70px;
	background: #fef5ee;
	background: url(../images/bg_canvas.png);
	z-index: 0;
	
	-webkit-transform: rotate(-2deg) translate3d(0, 0, 0);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	
	-webkit-box-shadow:0 -3px 4px 0 rgba(109, 66, 47, .3);
	box-shadow:0 -3px 4px 0 rgba(109, 66, 47, .3);
}

#canvas_wrapper:after{
	position: absolute;
	display: block;
	content: "";
	bottom: -28px;
	left: -20px;
	width: 120%;
	height: 80px;
	background: #fef5ee;
	background: url(../images/bg_canvas.png);
	z-index: 0;	

	-webkit-transform: rotate(-2deg) translate3d(0, 0, 0);
	-ms-transform: rotate(-2deg);	
	transform: rotate(-2deg);
	
	-webkit-box-shadow:0 3px 4px 0 rgba(109, 66, 47, .3);
	box-shadow:0 3px 4px 0 rgba(109, 66, 47, .3);
}
        
#contents_top{
	height: 16px;
	position: relative;
}

#contents_top a{
	-webkit-transition: all .5s;	
	transition: all .5s;
}

#contents_top a:hover{
	opacity: .6;
}

#contents_top a:active{
	opacity: .6;
}

#contents_top h1{
	padding-left: 10px;
	padding-top: 10px;
}


footer{
	height: 120px;
	position: relative;
}

#container{
	width: 960px;
	height:640px;
	margin: -4px auto 4px;
	position: relative;
}

#contents_list h1{
	position: absolute;
	top: 160px;
	left: 280px;
	background:url(../images/title_main_bg.png);
	z-index: 7;
}

#contents_list h1 a{
	-webkit-transition: all 1s;
	transition: all 1s;
}

#contents_list h1 a:hover{
	opacity: .5;	
}

#contents_list h1 a:active{
	opacity: .5;	
}

#contents_list ul a{
	-webkit-transition: all 1s;
	transition: all 1s;
}

#contents_list ul a:hover{
	opacity: 0;	
}

#contents_list ul a:active{
	opacity: 0;	
}

#topic01{
	position: absolute;
	top: 0;	
	left: 0;
	background: url(../images/list_b_01.png) no-repeat;
	z-index: 7;
}

#topic02{
	position: absolute;
	top: 0;	
	left: 280px;
	background: url(../images/list_b_02.png) no-repeat;
	z-index: 7;
}

#topic03{
	position: absolute;
	top: 0;	
	left: 680px;
	background: url(../images/list_b_03.png) no-repeat;
	z-index: 7;
}

#topic04{
	position: absolute;
	top: 160px;	
	left: 0;
	background: url(../images/list_b_04.png) no-repeat;
	z-index: 7;
}

#topic05{
	position: absolute;
	top: 320px;	
	left: 0;
	background: url(../images/list_b_05.png) no-repeat;
	z-index: 7;
}

#topic06{
	position: absolute;
	top: 160px;	
	left: 680px;
	background: url(../images/list_b_06.png) no-repeat;
	z-index: 7;
}

#topic07{
	position: absolute;
	top: 320px;	
	left: 680px;
	background: url(../images/list_b_07.png) no-repeat;
	z-index: 7;
}

#topic08{
	position: absolute;
	top: 480px;	
	left: 0;
	background: url(../images/list_b_08.png) no-repeat;
	z-index: 7;
}

#topic09{
	position: absolute;
	top: 480px;	
	left: 280px;
	background: url(../images/list_b_09.png) no-repeat;
	z-index: 7;
}

#topic10{
	position: absolute;
	top: 480px;	
	left: 680px;
	background: url(../images/list_b_10.png) no-repeat;
	z-index: 7;
}



#foot{
	float: right;
	margin-top: 30px;
	margin-bottom: 12px;
	font-size: 18px;
}

#foot_wrapper{
	margin: 0 auto;
	width: 960px;
	position: relative;
}

#foot ul{
	background: url(../images/bg_craft.png);
}

#foot ul li{
	display: inline;
}

nav a{
	text-decoration: none;
	color: #6d422f;
}

nav a:hover{
	opacity: .7;
}

nav a:active{
	opacity: .7;
}

#share-buttons{
	position: absolute;
	right: 0;
	top: 76px;
	height: 40px;
	width: 148px;
	z-index: 5;
}

#share-buttons ul li{
	display: inline;
	margin-left: 2px;
}

#share-buttons a:hover{
	opacity: .7;
}

#share-buttons a:active{
	opacity: .7;
}

#copy{
	clear: both;
	overflow: hidden;
	text-align: center;
	height: 46px;
	line-height:46px;
	font-size:14px;
}

#wrapper{
	margin: 80px auto 10px;
	width: 800px;
	height: 4600px;
}

#main{
	width: 600px;
	margin-left: 100px;
	height: 4600px;
}

#main p{
	font-size: 24px;
	padding: 14px 70px 10px 70px;
}

.box{
	width: 600px;
	height: 420px;
	margin-bottom: 30px;
	-webkit-box-shadow:0 1px 4px rgba(109, 66, 47, 0.3), 0 0 20px rgba(109, 66, 47, 0.1) inset;
	box-shadow:0 1px 4px rgba(109, 66, 47, 0.3), 0 0 20px rgba(109, 66, 47, 0.1) inset;
}

.box a:hover{
	opacity: .7;	
}

.box a:active{
	opacity: .7;	
}

#main h2{
	padding-top: 10px;
	margin-left: 30px;
}

.arrow_box{
	float: right;
	margin-right: 50px;
	width: 110px;
}

.arrow_box_last{
	float: right;
	margin-right: 50px;
	width: 40px;
}

.arrow_down{
	float: right;
}

.arrow_up{
	float: left;
}

#sec01{
	position: relative;
}

#bg01{
	position: absolute;
	top: 130px;
	left: 620px;
	z-index: 2;
}

#sec02{
	position: relative;
}

#bg02{
	position: absolute;
	top: 70px;
	left: -330px;
	z-index: 2;
}

#sec03{
	position: relative;
}

#bg03{
	position: absolute;
	top: -170px;
	left: 570px;
	z-index: 2;
}

#sec04{
	position: relative;
}

#bg04{
	position: absolute;
	top: -190px;
	left: -360px;
	z-index: 2;
}

#bg04_2{
	position: absolute;
	top: -10px;
	left: -650px;
	z-index: 2;
}

#sec05{
	position: relative;
}

#bg05{
	position: absolute;
	top: -170px;
	left: 630px;
	z-index: 2;
}

#sec06{
	position: relative;
}

#bg06{
	position: absolute;
	top: -160px;
	left: -320px;
	z-index: 2;
}

#sec07{
	position: relative;
}

#bg07{
	position: absolute;
	top: -100px;
	left: 670px;
	z-index: 2;
}

#sec08{
	position: relative;
}

#bg08{
	position: absolute;
	top: 180px;
	left: -290px;
	z-index: 2;
}

#bg08_2{
	position: absolute;
	top: 450px;
	left: -690px;
	z-index: 2;
}

#sec09{
	position: relative;
}

#bg09{
	position: absolute;
	top: 300px;
	left: 660px;
	z-index: 2;
}

#sec10{
	position: relative;
}

#bg10{
	position: absolute;
	top: 40px;
	left: -430px;
	z-index: 2;
}

#top_box{
	position: fixed;
	bottom: 10px;
	left: 0;
	height: 120px;
	width: 100px;
	background: #c1a787;
	background: url(../images/bg_craft.png);
	z-index: 3;

	-webkit-box-shadow:0 2px 2px rgba(109, 66, 47, 0.3);
	box-shadow:0 2px 2px rgba(109, 66, 47, 0.3);
}
#top_box p{
	height: 80px;
}

#sns_box{
	position: fixed;
	height: 40px;
	left: 15px;
	bottom: 7px;
	z-index: 4;
}

#sns_box ul li{
	display: inline;
	margin-right: 4px;
}


#link_box{
	position: fixed;
	top: 50px;
	right: 36px;
	height: 584px;
	width: 64px;
	background: rgba(255,255,255,.5);
	z-index: 3;
	text-indent: -9999px;

	-webkit-box-shadow:0 2px 2px rgba(109, 66, 47, 0.3);
	box-shadow:0 2px 2px rgba(109, 66, 47, 0.3);
}

#l01 p{
	position: absolute;
	top: 8px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(154,205,50,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l01 p:hover{
	background: rgba(154,205,50,.4);
}

#l01 p:active{
	background: rgba(154,205,50,.4);
}

#l02 p{
	position: absolute;
	top: 66px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(0,0,255,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l02 p:hover{
	background: rgba(0,0,255,.4);
}

#l02 p:active{
	background: rgba(0,0,255,.4);
}

#l03 p{
	position: absolute;
	top: 122px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(255,0,0,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l03 p:hover{
	background: rgba(255,0,0,.4);
}

#l03 p:active{
	background: rgba(255,0,0,.4);
}

#l04 p{
	position: absolute;
	top: 180px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(255,255,0,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l04 p:hover{
	background: rgba(255,255,0,.4);
}

#l04 p:active{
	background: rgba(255,255,0,.4);
}

#l05 p{
	position: absolute;
	top: 238px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(255,165,0,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l05 p:hover{
	background: rgba(255,165,0,.4);
}

#l05 p:active{
	background: rgba(255,165,0,.4);
}

#l06 p{
	position: absolute;
	top: 296px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(128,0,128,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l06 p:hover{
	background: rgba(128,0,128,.4);
}

#l06 p:active{
	background: rgba(128,0,128,.4);
}

#l07 p{
	position: absolute;
	top: 354px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(255,182,193,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l07 p:hover{
	background: rgba(255,182,193,.4);
}

#l07 p:active{
	background: rgba(255,182,193,.4);
}

#l08 p{
	position: absolute;
	top: 412px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(0,128,0,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l08 p:hover{
	background: rgba(0,128,0,.4);
}

#l08 p:active{
	background: rgba(0,128,0,.4);
}

#l09 p{
	position: absolute;
	top: 470px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(255,105,180,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l09 p:hover{
	background: rgba(255,105,180,.4);
}

#l09 p:active{
	background: rgba(255,105,180,.4);
}

#l10 p{
	position: absolute;
	top: 528px;
	left: 8px;
	height: 48px;
	width: 48px;
	background: rgba(0,191,255,.5);
	z-index: 4;
	
	-webkit-border-radius: 100% 80% / 80% 85% 80% 90%;	
	border-radius: 100% 80% / 80% 85% 80% 90%;
}

#l10 p:hover{
	background: rgba(0,191,255,.4);
}

#l10 p:active{
	background: rgba(0,191,255,.4);
}

#card{
	width: 960px;
	height: 640px;
	margin: 80px auto 10px;
	position: relative;
}


#ps_bg01{
	position: absolute;
	top: 0;	
	left: 0;
	height: 160px;
	width: 280px;
	background: url(../images/list_a_01.png) no-repeat;
	z-index: 1;
}

#ps_bg02{
	position: absolute;
	top: 0;	
	left: 280px;
	height: 160px;
	width: 400px;
	background: url(../images/list_a_02.png) no-repeat;
	z-index: 1;
}

#ps_bg03{
	position: absolute;
	top: 0;	
	left: 680px;
	height: 160px;
	width: 280px;
	background: url(../images/list_a_03.png) no-repeat;
	z-index: 1;
}

#ps_bg04{
	position: absolute;
	top: 160px;	
	left: 0;
	height: 160px;
	width: 280px;
	background: url(../images/list_a_04.png) no-repeat;
	z-index: 1;
}

#ps_bg05{
	position: absolute;
	top: 320px;	
	left: 0;
	height: 160px;
	width: 280px;
	background: url(../images/list_a_05.png) no-repeat;
	z-index: 1;
}

#ps_bg06{
	position: absolute;
	top: 160px;	
	left: 680px;
	height: 160px;
	width: 280px;
	background: url(../images/list_a_06.png) no-repeat;
	z-index: 1;
}

#ps_bg07{
	position: absolute;
	top: 320px;	
	left: 680px;
	height: 160px;
	width: 280px;
	background: url(../images/list_a_07.png) no-repeat;
	z-index: 1;
}

#ps_bg08{
	position: absolute;
	top: 480px;	
	left: 0;
	height: 160px;
	width: 280px;
	background: url(../images/list_a_08.png) no-repeat;
	z-index: 1;
}

#ps_bg09{
	position: absolute;
	top: 480px;	
	left: 280px;
	height: 160px;
	width: 400px;
	background: url(../images/list_a_09.png) no-repeat;
	z-index: 1;
}

#ps_bg10{
	position: absolute;
	top: 480px;	
	left: 680px;
	height: 160px;
	width: 280px;
	background: url(../images/list_a_10.png) no-repeat;
	z-index: 1;
}

#card_box{
	background: rgba(255,253,252,.9);
	width: 820px;
	height: 560px;
	left:40px;
	padding: 30px;
	position: absolute;
	z-index: 6;

	-webkit-box-shadow:0 2px 2px rgba(109, 66, 47, 0.3);
	box-shadow:0 2px 2px rgba(109, 66, 47, 0.3);
}

#card_box h2{
	padding-bottom: 10px;
}

#card_box p{
	padding-top: 1.2em;
	text-indent: 1em;
	font-size: 15px;
	line-height: 1.5em;
}

#card_box .right{
	position: absolute;
	right: 40px;
	bottom: 20px;
}

#card_box a{
	color: #6d422f;
}

#card_box a:hover{
		opacity: .7;
}

#card_box a:active{
		opacity: .7;
}