/*メモ　マージン・パッディング　上　右　下　左*/

/* 全体の設定 */
body{margin:0; text-align:center; background:#ffffff; padding:0;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;, Verdana, Geneva, Arial, Osaka, Helvetica, sans-serif;}
img{border:none; margin:0;padding:0; line-height:0; display:block;}
a{color:#0587cc; text-decoration:none; outline: none;}
a:hover{color:#0587cc; text-decoration:underline; }
h1,h2,h3{margin:0;padding:0;}

h1{color:#483c3c;margin:10px 0 0 0;
	line-height:1.6;font-size:150%;padding:10px 0 10px 0;font-weight:normal;
	text-align:left;}
h2{color:#483c3c;border-top:solid 1px #e6e6e8;margin:40px 0 0 0;
	line-height:1.6;font-size:150%;padding:15px 0 5px 0;font-weight:normal;}
p {padding:0; margin:5px 0 25px 0;line-height:1.6;}

.clear {clear:both;}  
.clear hr {display:none;}



/* 上部・中部ブロック要素 */

#gb {background:#66beff;margin:0;padding:0;
position:static; overflow: hidden; clear:both;}
#gnavi {clear:both; padding:0; margin: 0 auto;
	min-width: 320px; max-width: 960px;
	background:#66beff; text-align:left; position:relative; overflow: hidden;}
/* 
* html  gnavi { 
	width : 960px; height : 1%;
	width : expression(  (document.documentElement.clientWidth > 960)? "940px" :(document.documentElement.clientWidth < 320)? "300px" :  "auto");}
 */

.sitename{color:#ffffff;font-weight:bold;
font-size:25px; float:left;height:56px;line-height:56px;margin:0 0 0 10px;}
#gnavi a{text-decoration:none; color:#ffffff;}

#gnavi img{margin:0; height:16px;width:16px; line-height:0;
padding:19px 0 21px 0; vertical-align:middle;}
#gnavi ul {float:right; padding:0px; margin:0; position:relative;}
#gnavi li {float:left;  padding:0; margin:0; line-height:56px;  font-size:16px;
	list-style-type:none; white-space:nowrap; position:relative; text-align:center;}
#gnavi li a {color:#ffffff; padding:0 12px 0 12px; display: block; text-decoration:none;}
#gnavi li a:hover { color:#ffffff; background: #85cdff;}


#sb{background:#f8f8f8; text-align:center;padding:10px;margin:0;
border-top:solid 1px #e6e6e8;}
#snavi {clear:both; padding:0; margin: 0 auto;
	min-width: 300px; max-width: 960px;
	 text-align:left; position:relative; overflow: hidden;}
/* 
* html  snavi { 
	width : 960px; height : 1%;
	width : expression(  (document.documentElement.clientWidth > 960)? "940px" :(document.documentElement.clientWidth < 300)? "280px" :  "auto");}
 */
#snavi ul {float:right; padding:0px; margin:0; position:relative;}
#snavi li {float:left;  padding:0; margin:0 0 0 10px;
	width:130px;height:30px;list-style-type:none; white-space:nowrap; position:relative; text-align:center;}



.container { clear:both; position:static; text-align:center;
	padding:10px; min-width: 300px; max-width: 940px; margin: 0 auto;
	background:#ffffff; font-size:100%;}
.container2 { clear:both; position:static; text-align:center;
	margin: 0 auto;
	background:#f6f6f6; font-size:100%;}
.main {clear:both; padding:0; margin:0 0 10px 0;
	color:#333333; text-align:left;}
.main2 { clear:both; position:static; text-align:left;
	padding:30px 10px 50px 10px; min-width: 300px; max-width: 940px; margin: 0 auto;
	font-size:100%;color:#333333; }

.sub {clear:both; padding:20px 0 10px 0; margin: 0 auto;
	min-width: 300px; max-width: 940px;  text-align:center;
	position:relative; overflow: hidden;margin: 0 0 10px 0;}
.sub ul {float:left; padding:0px; margin:0; position:relative; left:50%;}
.sub li {float:left; white-space:nowrap; position:relative; right:50%;
	padding:0 10px 0 10px; margin:0; text-align:center; list-style-type:none;}
.sub li a {padding:0 10px 0 10px;
	display: block; text-decoration:none;}

.sub2 {clear:both; padding:30px 0 10px 0; margin: 0 auto;border-top:solid 1px #e6e6e8;
	min-width: 300px; max-width: 940px;  text-align:center;
	position:relative; overflow: hidden;margin: 50px 0 10px 0;}
.sub2 ul {float:left; padding:0px; margin:0; position:relative; left:50%;}
.sub2 li {float:left; white-space:nowrap; position:relative; right:50%;
	padding:0 10px 0 10px; margin:0; text-align:center; list-style-type:none;}
.sub2 li a {padding:0 10px 0 10px;
	display: block; text-decoration:none;}


.sub3 {clear:both; padding:0 0 10px 0; margin: 0 auto;border-bottom:solid 1px #e6e6e8;
	min-width: 300px; max-width: 940px;  text-align:center;
	position:relative; overflow: hidden;margin: 10px 0 10px 0;
	}
.sub3 ul {float:left; padding:0px; margin:0; position:relative; left:50%;}
.sub3 li {float:left; white-space:nowrap; position:relative; right:50%;
	padding:0 10px 0 10px; margin:0; text-align:center; list-style-type:none;}
.sub3 li a {padding:0 10px 0 10px; margin:0;
	display: block; text-decoration:none;}
.sub3 ins {margin:0;padding:0;}

.imgc2{float:left;width:96px;height:96px; 
margin:17px;padding:10px;background:#ffffff;border-radius: 5px;
box-shadow: 1px 2px 5px #dadada;-webkit-box-shadow: 1px 2px 5px #dadada;
}

.iconsampletitile{color:#483c3c;margin:0;
	line-height:1.6;font-size:150%;padding:0 0 5px 0;font-weight:normal;}

.imm1{float:left;width:256px;
margin:17px;padding:10px;background:#ffffff;border-radius: 5px;
box-shadow: 1px 2px 5px #dadada;-webkit-box-shadow: 1px 2px 5px #dadada;
}
.imm1 img{width: 256px; height:256px; margin:0 0 10px 0;padding:0;}

.bannerdl{
	margin:0;padding:0;

}
.bannerdl dl{
	margin:20px 0 20px 0;padding:0;

}
.bannerdl dt{
	background:#f8f8f8;
	margin:30px 0 10px 0;padding:10px;
}
.bannerdl dd{
	margin:10px 0 10px 0;padding:0;
}

.bannerdl img{
	padding:10px;
	margin:0 0 15px 0;
	border:solid 1px #ececec;
	background:#ffffff;
}
.bannerdl img:hover{
	background:#ececec;
}


.newsul{margin:0;padding:0;}
.newsul ul{margin:0;padding:0;list-style:none;}
.newsul li{list-style:none;margin:10px 0 10px 0;padding:0;}




/* キャンバスのスタイル border-radius: 10px;*/
.morl{ margin:0;padding:0;line-height:1.6;}
.cr{display:block;float:left;margin:0 0px 10px 20px;padding:0;
background:#ffffff;width:300px;}
.splink{font-size:80%; color:#919191;line-height:1.6;margin:5px 0 5px 0;padding:0;}

#cb{background:#ffffff; text-align:center;padding:0;margin:0;}
#canvasstart { clear:both;margin:10px 0 10px 0; padding:30px 0 30px 0;
position:static; text-align:center; 
	 min-width: 320px; max-width: 960px; margin: 0 auto;
	font-size:100%;
	 overflow: hidden;}
#canvasstart hr{border:none; border-bottom:solid 2px #ececec; max-width:960px;
	margin:0 0 30px 0;padding:0;
	clear:both;
}
#fmall{float:left; margin:0; padding:0; }
#canvasarea{float:left;margin:0 20px 10px 20px; padding:0;width:280px;
	}
#fmc{float:left;margin:0; padding:12px;
	position:relative; width:256px; height:256px; 
	background:#ffffff;border-radius: 5px;
	box-shadow: 1px 2px 10px #e2e2e2;-webkit-box-shadow: 1px 2px 10px #e2e2e2;
	color:#2b2b2b; }
#mixed,#bg,#bh,#sk,#ch,#ey,#mo,#ba,#cl,#ms,#te{
 position: absolute; left: 12px; top: 12px;}
#mixed{visibility: hidden;}

/*#ba {transform: rotateY(180deg);}*/

#drmenu {float:left;margin:0 0 10px 0;padding:0;height:66px;
width:280px;}
#drmenu input{ margin;0;padding:0;height:46px;
	float:left;display:block;cursor:pointer;
	text-align:center; border:none; font-size:20px;
	font-weight:bold;border-radius: 5px;
	box-shadow: 1px 2px 10px #e2e2e2;-webkit-box-shadow: 1px 2px 10px #e2e2e2;
	}
.download{background:#ffffff;color:#919191; width:190px;position: relative; left:0; top:20px;}
.random{background:#ffffff;color:#919191; width:80px;position: relative; left:10px; top:20px;}

#drmenu input:hover{background:#66beff;color:#ffffff;}
#drmenu form{margin:0; padding:0;}

#fmm{
float:left; width:300px;background:#f6f6f6;margin:0 10px 20px 10px;padding:0;
}
#tabs {float:left;margin:0;padding:0;width:300px;height:100%;background: #ffff00;} 
#tabs ul {margin:0;padding:0;} 
#tabs li {float: left; margin:0; padding:7px 10px 7px 10px;width:80px;
	color: #919191; background:#ffffff; list-style: none;
	cursor:pointer; text-align:left;}
#tabs li:hover{color:#2b2b2b;}
#tabs li.selected{ color: #2b2b2b; background:#f6f6f6;
	cursor:default; text-align:left;}

#textarea{float:left; margin:0;background:#f6f6f6; padding:0;width:300px; color:#2b2b2b;
	 text-align:left;}

#textarea span{margin:0;padding:0;}
#text_1,#text_2,#text_3,#text_4,#text_5,
#text_6,#text_7,#text_8,#text_9,#text_10,
#text_11,#text_12,#text_13{margin:0; padding:10px;overflow: hidden;}

.pmenu {margin:0 0 3px 0;padding:2px 0 2px 0; float:left; }


.pcb {float:left; margin:5px 0 0 0; width:180px;padding:0; 
}
.pcb img{display:block; float:left; height:26px; width:26px;
	margin:2px 2px 2px 2px;padding:0;cursor:pointer;
	}

	
.tebo{border-top:solid 1px #e1e1e3;}
.spt {line-height:30px;font-size:90%;
	float:left;height:30px;margin: 0; padding:5px 0 0 0; width:100px;
	position: relative; text-align:left;}
.pnd {line-height:34px;
	float:left;margin:0; padding: 2px 0 2px 0; width:180px;
	position: relative; text-align:center;}
	
.pni{cursor:pointer;
	display:block;width:34px; height:34px; background:#ffffff; border:none;
	margin:0; padding:0; color:#2b2b2b;border-radius: 5px;
	box-shadow: 1px 2px 5px #dadada;-webkit-box-shadow: 1px 2px 5px #dadada;}	
	
.pb{position: absolute; left:0; top:2px;background:url(../img/makerbutton.png) ;background-position: 0 0;}
.nb{position: absolute; right:0; top:2px;background:url(../img/makerbutton.png) ;background-position: -34px 0;}
.pb:hover{background-position: 0 -35px;}
.nb:hover{background-position: -34px -35px;}


.spt2 {line-height:30px;font-size:90%;
	float:left;height:30px;margin: 0; padding:5px 0 0 0; width:180px;
	position: relative; text-align:left;}
.pnd2 {height:35px;
	float:left;margin:0; padding: 0; width:100px;
	position: relative; text-align:center;}
.textal{ position:absolute; left:0; top:6px;font-size:20px;}
.tfposition{ position:absolute; right:0; top:6px;width:67px;height:18px;
border:solid 1px #e1e1e3;border-radius: 3px;
font-size:15px;margin:0; padding:4px;ime-mode:disabled;}
.tfposition2{ position:absolute; right:0; top:6px;width:47px;height:18px;
border:solid 1px #e1e1e3;border-radius: 3px;
font-size:15px;margin:0; padding:4px;ime-mode:disabled;}
.pcb2 {float:left; margin:0 0 0 0; width:277px;padding:3px 0px 3px 3px;}
.pcb2 img{display:block; float:left; height:22px; width:22px;
	margin:2px 2px 2px 2px;padding:0;cursor:pointer;border-radius: 24px;}

.spt3 {line-height:30px;font-size:90%;
	float:left;height:30px;margin: 0; padding:5px 0 0 0; width:190px;
	position: relative; text-align:left;}
.pnd3 {
	float:left;margin:0; padding: 3px 0 0 0; width:90px;
	position: relative; text-align:center;}
.pnd3 img{display:block; float:left; height:26px; width:26px;
	margin:2px 2px 2px 2px;padding:0;cursor:pointer;
	border-radius: 5px;
	box-shadow: 1px 2px 5px #dadada;-webkit-box-shadow: 1px 2px 5px #dadada;}
.up{background:url(../img/makerbutton.png) ;background-position: -146px 0;}
.base{background:url(../img/makerbutton.png) ;background-position: -120px 0;}
.down{background:url(../img/makerbutton.png) ;background-position: -172px 0;}
.wide{background:url(../img/makerbutton.png) ;background-position: -68px 0;}
.narrow{background:url(../img/makerbutton.png) ;background-position: -94px 0;}
.up:hover{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -146px -35px;}
.base:hover{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -120px -35px;}
.down:hover{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -172px -35px;}
.wide:hover{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -68px -35px;}
.narrow:hover{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -94px -35px;}

.upp{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -146px -35px;}
.basep{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -120px -35px;}
.downp{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -172px -35px;}
.widep{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -68px -35px;}
.narrowp{box-shadow: 1px 2px 5px  #cecece inset;-webkit-box-shadow: 1px 2px 5px #cecece inset;
background:url(../img/makerbutton.png) ;background-position: -94px -35px;}


.spt4 {line-height:30px;font-size:90%;
	float:left;height:30px;margin: 0; padding:5px 0 0 0; width:220px;
	position: relative; text-align:left;}
.pnd4 {
	float:left;margin:0; padding: 3px 0 0 0; width:60px;height:32px;
	position: relative; text-align:center;}

.csed_1{border:solid 4px #ffffff;}
.csed_2{border:solid 4px rgba(255,255,255,0);
box-shadow: 0px 0px 2px 2px #ffffff;-webkit-box-shadow: 0px 0px 2px 2px #ffffff;}

#skx1{background:#fffbe8;}
#skx2{background:#ffefe8;}
#skx3{background:#ffded2;}
#skx4{background:#fce4ca;}
#skx5{background:#ffdcb9;}
#skx6{background:#f6b999;}

#hrx1{background:#5c696c;}
#hrx2{background:#7d4e2e;}
#hrx3{background:#d37575;}
#hrx4{background:#cd8561;}
#hrx5{background:#d885d1;}
#hrx6{background:#ff8fa9;}
#hrx7{background:#eec573;}
#hrx8{background:#b6d81a;}


#clx1{background:#c4cae1;}
#clx2{background:#fef9e6;}
#clx3{background:#c06e45;}
#clx4{background:#b19f93;}
#clx5{background:#d6b075;}
#clx6{background:#f0515a;}
#clx7{background:#ffabc3;}
#clx8{background:#fc945a;}
#clx9{background:#fcda56;}
#clx10{background:#ffb825;}
#clx11{background:#a8ca4c;}
#clx12{background:#6fcee4;}
#clx13{background:#5d89c4;}
#clx14{background:#686f88;}


#bgx0{background:url(../img/makerbutton.png) ;background-position: 0 -70px;}
#bgx1{background:#f9f6ef;}
#bgx2{background:#fdf5dc;}
#bgx3{background:#f8eef2;}
#bgx4{background:#efedee;}
#bgx5{background:#eff8f0;}
#bgx6{background:#e6f5f4;}
#bgx7{background:#fdfdda;}
#bgx8{background:#d4fcfc;}

.cr input{ margin;0;padding:0;height:46px;
	float:left;display:block;cursor:pointer;
	text-align:center; border:none; font-size:20px;
	font-weight:bold;border-radius: 5px;
	box-shadow: 1px 2px 10px #e2e2e2;-webkit-box-shadow: 1px 2px 10px #e2e2e2;
	}
.twitbutton{background:#ffffff;color:#919191; 
width:280px;position: relative; left:0; top:20px;}


.cr input:hover{background:#66beff;color:#ffffff;}


@media screen and (max-width: 640px) {
  /* 表示領域が800px未満の場合に適用するスタイル */
   #fmall{float:left; margin:0; padding:0; }
#canvasarea{float:left;margin:0 20px 10px 20px; padding:0;width:280px;
	}
#fmc{float:left;margin:0; padding:12px;
	position:relative; width:128px; height:128px; 
	background:#ffffff;border-radius: 5px;
	box-shadow: 1px 2px 10px #e2e2e2;-webkit-box-shadow: 1px 2px 10px #e2e2e2;
	color:#2b2b2b; }
#mixed,#bg,#bh,#sk,#ch,#ey,#mo,#ba,#cl,#ms,#te{
 position: absolute; left: 12px; top: 12px;width:128px;height:128px;}

#drmenu {float:right;margin:0 0 10px 0;padding:0;width:120px;height:120px;}
#drmenu input{ margin;0;padding:0;height:46px;
	float:left;display:block;cursor:pointer;
	text-align:center; border:none; font-size:15px;
	font-weight:bold;border-radius: 5px;
	box-shadow: 1px 2px 10px #e2e2e2;-webkit-box-shadow: 1px 2px 10px #e2e2e2;
	}
.download{background:#ffffff;color:#919191; width:110px;
position: relative; left:0; top:20px;}
.random{background:#ffffff;color:#919191; width:80px;
position: relative; left:0px; top:30px;}

#drmenu input:hover{background:#66beff;color:#ffffff;}
#drmenu form{margin:0; padding:0;}

}

/* 下部ブロック要素 */
#fb {background:#ffffff;margin:50px 0 0 0;padding:0;
position:static; overflow: hidden; clear:both;}
#fnavi {clear:both; padding:10px 0 10px 0; margin: 0 auto;border-top:solid 1px #e6e6e8;
	min-width: 320px; max-width: 960px; background:#ffffff; text-align:center;
	position:relative; overflow: hidden;}

/* 
* html  fnavi { 
	width : 960px; height : 1%;
	width : expression(  (document.documentElement.clientWidth > 960)? "940px" :(document.documentElement.clientWidth < 320)? "300px" :  "auto"); }
 */

#fnavi ul {float:left; padding:0px; margin:0; position:relative; left:50%;}
#fnavi li {float:left; white-space:nowrap; position:relative; right:50%;
	padding:0; margin:0; text-align:center; line-height:46px; list-style-type:none;}
#fnavi li a {padding:0 10px 0 10px;
	display: block; text-decoration:none;}
#fnavi li a:hover {background: #fcfcfc;text-decoration:underline;}

#fb2 {background:#f9f9f9;margin:0;padding:0;border-top:solid 1px #e6e6e8;
position:static; overflow: hidden; clear:both;}	
#footer {clear:both; position:static;
	padding:10px; min-width: 300px; max-width: 940px;
	margin: 0 auto; 
	text-align:center; font-size:100%; overflow: hidden;}

/* 
* html  footer { 
	width : 940px; height : 1%;
	width : expression(  (document.documentElement.clientWidth > 940)? "920px" :(document.documentElement.clientWidth < 300)? "280px" :  "auto"); }
 */

#footer hr { clear:both; padding:0; margin:0 0 10px 0;
	width:100%; height:1px; border:none; border-top: solid 1px #e1e1e3;}
#footer p{ font-size:80%; line-height:1.6; color:#333333;}


#fmnavi{float:left; width:100%;
	padding:0; margin:15px 0 25px 0; position: relative; overflow: hidden;}

#fmnavi ul {float:left; padding:0; margin:0; position:relative; left:50%;}
#fmnavi li {float:left; white-space:nowrap; width:100px;height:100px;
	padding:0; position:relative; right:50%;
	margin:0; text-align:center; list-style-type:none; overflow: hidden;}

#fmnavi li a { padding:0; display: block;
	width:100%;height:100px; text-decoration:none; position: relative;}

/*   オフマウス  */
#navi01 a{ background:url(../img/fmicon.png) ;background-position: 0 0;}
#navi02 a{ background:url(../img/fmicon.png) ;background-position: -100px 0;}
#navi03 a{ background:url(../img/fmicon.png) ;background-position: -200px 0;}
#navi04 a{ background:url(../img/fmicon.png) ;background-position: -300px 0;}
#navi05 a{ background:url(../img/fmicon.png) ;background-position: -400px 0;} 
/*   オンマウス  */
#navi01 a:hover{ background-position: 0 -100px;}
#navi02 a:hover{ background-position: -100px -100px;}
#navi03 a:hover{ background-position: -200px -100px;}
#navi04 a:hover{ background-position: -300px -100px;}
#navi05 a:hover{ background-position: -400px -100px;}


.fcul{clear:both; padding:0; width:100%;
	margin: 0 auto; text-align:center; position:relative; overflow: hidden;}

.fcul ul{float:left; padding:0px; margin:0 0 10px 0; position:relative;left:50%;}
.fcul li {float:left; white-space:nowrap; position:relative; right:50%;
	padding:0; margin:0; text-align:center; line-height:45px; list-style-type:none;}
.fcul li a {color:#666666;padding:0 10px 0 10px; display: block; text-decoration:none;}
.fcul li a:hover{color:#2b2b2b;text-decoration:underline;}