@charset "UTF-8";
/* CSS Document */

@charset "UTF-8";
#all{
	width:1970px;
	height:20000;
float:left;

}
#headset{
	
	background:#FC0;
	
	
	
	
	}
 

h1{
	text-align:center;
}
ul#plld li{
	text-align:left;
	
}
ul{
	margin-left:10px;
	margin-bottom:50px;
}
#nav{
	margin-top:48px;
	width:450px;
	height:3000px;
border-style:double;
border-width:1px;
border-color:#F36;
float:left;
 
}
table.tb{
	border-style:double;
border-width:1px;
border-color:#F36;
width:1500px;
height:autopx;
}
th.th{
 	width:300px;
	border-style:double;
border-width:1px;
border-color:#F36;
}


tr:nth-child(even){     

		background:rgba(245,245,245,0.8);

} 


.ll{
background:url('../html5new.html/warni.gif') no-repeat center bottom;
width:auto;
height:auto;

}






th{
	border-style:double;
border-width:1px;
border-color:#39F;
}
.intb{
	width:300px;
	height:200px;
	background:#000 url(tt.jpg) 10px 10px no-repeat;
	border-style:double;
border-width:1px;
border-color:#F36;
	
	}
	#intb{
		width:300px;
	height:200px;
	
	background:#000;
	background-image:url(img/texture_008.jpg),url(img/texture_003.jpg),url(img/texture_011.jpg);
	background-repeat:no-repeat;
	background-position:center, bottom, center bottom;
	
	
	}
td{
	border-style:double;
border-width:1px;
border-color:#39F;
padding-left:10px;

}
td.b{
	width:600px;
	border-style:double;
border-width:1px;
border-color:#F36;
}
td.b3{
	width:600px;
	border-style:double;
border-width:1px;
border-color:#F93;
text-align:center;
}
td.b2{
	width:700px;
	border-style:double;
border-width:1px;
border-color:#F36;
}
#main{
	
	
}
#articlesection{
	width:800px;
height:20000px;
float:left;
margin-left:20px;	

}
#sidenav{
	folat:left;	
}
#subnav{
folat:left;
}
td.center{
	text-align:center;
}
a.ww{
 	font-size:xx-large;
	text-align:center;
	margin-left:200px;
	margin-right:auto;
}
div#tora{
background-color:#0000ff;
-moz-transition-property:background-color,width,height;
-moz-transition-duration:1s;
-o-transition-property:background-color,width,height;
-o-transition-duration:1s;
-webkit-transition-property:background-color,width,height;
-webkit-transition-duration:1s;
width:300px;
height:200px;
color:#FFF;
}
div#tora:hover{
background-color:#cc00ff;
}
div#tora2{
background-color:#0000ff;
-moz-transition-property:background-color,width,height;
-moz-transition-duration:3s;
-o-transition-property:background-color,width,height;
-o-transition-duration:3s;
-webkit-transition-property:background-color,width,height;
-webkit-transition-timing-function:ease;
-moz-transition-timing-function:ease;
-o-transition-timing-function:ease;

-webkit-transition-duration:3s;

width:300px;
height:100px;
color:#FFF;
}
div#tora2:hover{
background-color:#cc00ff;
width:300px;
height:200px;
}
div#tora3{
background-color:#0000ff;
-moz-transition-property:background-color,width,height;
-moz-transition-duration:3s;
-o-transition-property:background-color,width,height;
-o-transition-duration:3s;
-webkit-transition-property:background-color,width,height;
-webkit-transition-timing-function:linear;
-moz-transition-timing-function:linear;
-o-transition-timing-function:linear;

-webkit-transition-duration:3s;



width:300px;
height:100px;
color:#FFF;
}
div#tora3:hover{
background-color:#cc00ff;
width:300px;
height:200px;
}
div#tora4{
background-color:#0000ff;
-moz-transition-property:background-color,width,height;
-moz-transition-duration:3s;
-o-transition-property:background-color,width,height;
-o-transition-duration:3s;
-webkit-transition-property:background-color,width,height;
-webkit-transition-timing-function:ease-in;
-moz-transition-timing-function:ease-in;
-o-transition-timing-function:ease-in;
transition-timing-function:ease-in;
-webkit-transition-duration:3s;

width:300px;
height:100px;
color:#FFF;
}
div#tora4:hover{
background-color:#cc00ff;
width:300px;
height:200px;
}
div#tora5{
background-color:#0000ff;
-moz-transition-property:background-color,width,height;
-moz-transition-duration:3s;
-o-transition-property:background-color,width,height;
-o-transition-duration:3s;
-webkit-transition-property:background-color,width,height;
-webkit-transition-timing-function:ease-out;
-moz-transition-timing-function:ease-out;
-o-transition-timing-function:ease-out;
transition-timing-function:ease-out;
-webkit-transition-duration:3s;


width:300px;
height:100px;
color:#FFF;
}
div#tora5:hover{
background-color:#cc00ff;
width:300px;
height:200px;
}
div#tora6{
background-color:#0000ff;
-moz-transition-property:background-color,width,height;
-moz-transition-duration:3s;
-o-transition-property:background-color,width,height;
-o-transition-duration:3s;
-webkit-transition-property:background-color,width,height;
-webkit-transition-timing-function:ease-in-out;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
-webkit-transition-duration:3s;



width:300px;
height:100px;
color:#FFF;
}
div#tora6:hover{
background-color:#cc00ff;

width:300px;
height:200px;

}
div#tora7{
background-color:#0000ff;
-moz-transition-property:background-color,width,height,border-radius;
-moz-transition-duration:1s;
-o-transition-property:background-color,width,height,border-radius;
-o-transition-duration:1s;
-webkit-transition-property:background-color,width,height,border-radius;
-webkit-transition-timing-function:ease-in-out;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;



width:300px;
height:100px;
color:#FFF;
}
div#tora7:hover{
background-color:#cc00ff;
border-radius:20PX;

width:300px;
height:200px;

}

div#tora8{
	background-color:#0000ff;

-moz-transition-property:background-color,width,height,text-shadow;
-moz-transition-duration:1s,1s,1s,5s;
-o-transition-property:background-color,width,height,text-shadow;
-o-transition-duration:1s,1s,1s,5s;
-webkit-transition-property:background-color,width,height,text-shadow;
-webkit-transition-timing-function:ease-in-out;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
-webkit-transition-duration:1s,1s,1s,5s;



width:300px;
height:100px;
color:#FFF;
}
div#tora8:hover{

background-color:#FFF;
text-shadow:#F3C 0px 0px 20px,#F3C 0px 0px 20px,#F3C 0px 0px 20px;

width:300px;
height:100px;

}






/***********************************************************************************

                 文字色指定

************************************************************************************/	
.red{
	color:#F00;
}
.midori{
	color:#0F3;
}
.midori2{
    color:#090;
}
.ao{
	color:#03F;
}
.kuro{
	color:#000;
}
.siro{
	color:#FFF;
}
.kiiro{
	color:#FC0;
}
.pink{
	color:#F3F;
}
.orange{
	color:#F93;
}
.hotpink{
	color:#F36;
}
.murasaki{
	color:#C0F;
}
/***********************************************************************************

                 背景色指定

************************************************************************************/	
.bred{
	background:rgba(255,0,153,0.2);
}
.bmidori{
	background:rgba(153,204,0,0.2);
}
.bmidori2{
    background:rgba(51,102,0,0.2);
}
.bao{
	background:rgba(0,204,255,0.2);
}
.bkuro{
	background:rgba(0,0,0,0.2);
}
.bsiro{
	background:rgba(255,255,255,0.2);
}
.bkiiro{
	background:rgba(255,255,0,0.2);
}
.bpink{
	background:rgba(255,0,255,0.2);
}
.borange{
	background:rgba(255,102,0,0.2);
}
.bhotpink{
	background:rgba(255,51,102,0.2);
}
.bmurasaki{
	background:rgba(204,0,255,0.2);
}
/***********************************************************************************

                 トランスフォーム

************************************************************************************/	
p#tform{
-webkit-transition-timing-function:ease-out;
-moz-transition-timing-function:ease-out;
-o-transition-timing-function:ease-out;
transition-timing-function:ease-out;
-webkit-transition-duration:3s;
}
p#tform:hover{
	-webkit-transform: translate(66px);
	-moz-transform: translate(66px);
}
p#tform2{
-webkit-transition-timing-function:ease-out;
-moz-transition-timing-function:ease-out;
-o-transition-timing-function:ease-out;
transition-timing-function:ease-out;
-webkit-transition-duration:1s;
width:50px;
}
p#tform2:hover{
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
}
p#tform3{
	-webkit-transition-timing-function:ease-out;
	-moz-transition-timing-function:ease-out;
	-o-transition-timing-function:ease-out;
	transition-timing-function:ease-out;
	-webkit-transition-duration:1s;
	width:50px;
}
p#tform3:hover{
	-webkit-transform: scale(3);
	-moz-transform: scale(3);
}
p#tform4{
	-webkit-transition-timing-function:ease-in-out;
	-moz-transition-timing-function:ease-in-out;
	-o-transition-timing-function:ease-in-out;
	transition-timing-function:ease-in-out;
	-webkit-transition-duration:3s;
	width:50px;
}
p#tform4:hover{
	-moz-transform: rotate(5000deg);
-webkit-transform: rotate(5000deg);
}
p#tform5{
	-webkit-transition-timing-function:ease-in-out;
	-moz-transition-timing-function:ease-in-out;
	-o-transition-timing-function:ease-in-out;
	transition-timing-function:ease-in-out;
	-webkit-transition-duration:3s;
	width:50px;
}
p#tform5:hover{
	-moz-transform: skewX(44deg);
	-webkit-transform: skewX(44deg);
}
p#tform6{
	-webkit-transition-timing-function:ease-in-out;
	-moz-transition-timing-function:ease-in-out;
	-o-transition-timing-function:ease-in-out;
	transition-timing-function:ease-in-out;
	-webkit-transition-duration:1s;
	width:50px;
}
p#tform6:hover{

	-moz-transform:matrix(2,0,500,2,0,0); 
	-webkit-transform:matrix(2,0,500,2,0,0); 
}
/***********************************************************************************

                 アニメーション

************************************************************************************/	

div#anime{
	width:300px;
	height:100px;
	text-align:center;
	padding-top:50px;
}
@-webkit-keyframes test{
	0% {background:#0000cc;}
	20%{background:#6600ff;}
	40%{background:#ff0099;}
	60%{background:#ffcc66;}
	80%{background:#99ff00;}
	100%{background:#33ff66;}
}
div#anime:hover{
		-webkit-animation-name: test;
       -webkit-animation-duration: 5s;
    
}
	
/***********************************************************************************

              透明度

************************************************************************************/	

	div#back{
		width:600px;
		height:auto;
		background:url(img/aoback.png);
		background-repeat:no-repeat;
		padding:20px;
		opacity:0.8;
		}
	
	div#test01{opacity:0.0;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test02{opacity:0.1;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test03{opacity:0.2;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test04{opacity:0.3;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test05{opacity:0.4;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test06{opacity:0.5;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test07{opacity:0.6;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test08{opacity:0.7;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test09{opacity:0.8;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test10{opacity:0.9;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
    div#test11{opacity:1.0;
		width:500px;
		height:66px;
		background:#00C;
		margin-bottom:10px;
		color:#FFF;
		}
		div#bbb{
		background:url(img/texture_011.jpg) ;
		background-repeat:no-repeat;
		width:300px;
		height:99px;
		padding-top:10px;
		
		}
	/***********************************************************************************

              overflow

************************************************************************************/		
		
		
		div#ovfx p{
			padding-left:10px;
			width:100px;
			height:50px;
			border:#000 solid 1px;
			overflow-x:scroll;
		white-space:nowrap;
		}
		div#ovfy p{
			padding-left:10px;
			width:100px;
			height:100px;
			border:#000 solid 1px;
			overflow-y:scroll;
		
		}
		
		div.clp{
		    width:105px;
			height:50px;
			
		
		}
		p#clpp{
		text-overflow:clip;
		white-space:nowrap;
		border:#000 solid 1px;
		overflow:hidden;
		
		
		}
		p#elps{
		text-overflow:ellipsis;
		white-space:nowrap;
		border:#000 solid 1px;
		overflow:hidden;
		}
		div#ddd{
		width:200px;
		height:200px;
		outline:#0000cc solid 5px;
		outline-offset:10px;
		border:#000 solid 10px;
		margin-top:30px;
		margin-left:20px;
		margin-bottom:30px;
		}
		/***********************************************************************************

            webfont

************************************************************************************/	
		@font-face {
font-family: "onryou";
src: local("onryou"), url("webf/onryou.TTF") format("truetype");
		}
p#onryou{
font-family:onryou;
font-size:xx-large;
}
/***********************************************************************************

          boxレイアウト系

************************************************************************************/	
#disp{
width:600px;
height:200px;
border: 1px solid #000;
display:-moz-box;
display:-webkit-box;
display:box;
}
#b1{
width:100px;
background:#ffcc66;
}
#b2{
width:300px;
height:50px;
background:#ff6666;
}
#b3{
width:100px;
background:#ff0066;
}



#disp2{
width:600px;
height:300px;
border: 1px solid #000;
display:-moz-box;
display:-webkit-box;
display:box;
color:#FFF;

-webkit-box-orient:vertical;
-moz-box-orient:vertical;
box-orient:vertical;
}
#b12{
height:100px;
background:#ffcc66;
}
#b22{

height:50px;
background:#ff6666;
}
#b32{
height:100px;
background:#ff0066;
}



#disp3{
width:600px;
height:200px;
border: 1px solid #000;
display:-moz-box;
display:-webkit-box;
display:box;
}
#b13{
width:100px;
background:#ffcc66;
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
box-ordinal-group:3;
}
#b23{
width:300px;
height:50px;
background:#ff6666;
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
box-ordinal-group:1;
}
#b33{
width:100px;
background:#ff0066;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;
}
#b43{
width:100px;
background:#cc00cc;
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
box-ordinal-group:1;
}






#disp4{
width:600px;
height:200px;
border: 1px solid #000;
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-flex:2.0; }
#b14{
width:100px;
background:#ffcc66;
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
box-ordinal-group:3;
}
#b24{
width:100px;
height:50px;
background:#ff6666;
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
box-ordinal-group:1;
}
#b34{
width:100px;
background:#ff0066;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;
}
#b44{
width:100px;
background:#F90;
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
box-ordinal-group:1;
-webkit-box-flex:1.0; 
}


#disp5{
width:600px;
height:200px;
border: 1px solid #000;
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-pack:justify;
 -moz-box-pack:justify;
  box-box-pack:justify; 
  }
#b15{
width:100px;
height:200px;
background:#ffcc66;

}
#b25{
width:100px;
height:200px;
background:#ff6666;

}
#b35{
width:100px;
height:200px;
background:#ff0066;

}
#b45{
width:100px;
height:200px;
background:#F90;

}


P#mobk{
color:#336699;
background-color:blue;
}