@charset "Shift_JIS";


/* 全体設定 */
body{background: #3c54ca no-repeat fixed; background-size: 100%;}

* { color: #262626;
	font-family: メイリオ,meirio,hiragino,cursive,sans-serif;
	letter-spacing:2px;  
	text-shadow: 2px 1px #ccd3d7;
	}

* {cursor: url(help.cur), move; }

p{font-size:10px;}

/*    クラス→.   ID→#    擬似セレクタ→:  子孫セレクタ→空白   複数→,　　　 */


#topFloat{float:left;
		  height:1000px;}
#topMenu{position:fixed;
		 top:60px;
		 border:6px #3d3d3d inset;}
		 
#topMenu p{color:black;
		   font-weight:bolder;
		   font-size:16px;}
		   
#topMenu p.activeTab{font-size:125%;
					 border:4px #919191 outset;}


#bottomHr{border:0px;}

.con{margin:100px;}


/* 色々セレクタ勉強 ---------------------------------------------*/
p b,li b,th,dt,#orange{color: #fe7901;}
hr{border: #15b7b3 5px dashed;}

h2,h3,h4,h5{color:#fe073f;}


/* hover */
p:hover{background-color: #fce074;}
a#jump:hover{background-color: #f8cbcc;}
blockquote:hover{background-color: #b8fbb5;}
li:hover,dt:hover,dd:hover{background-color: #a38eff;}
ul:hover,ol:hover,dl:hover{border: 4px #15d200 dotted;}
#think:hover{background-color: black; border: 14px #c0c0c0 outset;}
#ue:hover{font-size: 70px; font-weight: bolder; opacity: 0.8;}

#titleSet *:hover{color:#5f5f5f;}

/* margin （枠と他要素)---------------------------------------------*/
p,ul,ol,dl{margin:20px 10px;}
form,address{margin: 40px; opacity:0.4;}

#think{margin: 20px;}
a#jump{margin: 200px 0px 0px;}
form,ol,dl,ul{width:240px;}




/* display */
h2,h3,h4,h5{ margin: 30px 5px; display:inline; }


/* position */
h1    {position: fixed; right: 10px; top: 0%; z-index:3; color:#21c1de; font-size:8px;}
#livly{position: fixed; right: 40px; bottom: 30px; color: #c433dd; z-index:3; opacity: 0.5; }
#tokei{position: fixed; right: -5px; top:35%; z-index:-1;
		font-size:300px; color: #fffa33; font-weight: bolder; opacity: 0.1;
		text-shadow: 9px 9px 10px #cfb7d7; font-family:'Comic Sans MS', Impact , メイリオ, monospace;
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(10deg);}

#color{position: fixed; right: 60px; bottom: 50px; z-index:3; opacity: 0.5; color: #ff0676;
		font-size: 30px; font-weight: bolder; opacity: 0.4; font-family:Impact , メイリオ, monospace;
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(-10deg);
		text-shadow: 9px 9px 10px #cfb7d7;}
#stop{
	color: red;
	font-weight: bolder;
}

#ue{position: absolute; z-index:5; top: 170px; left:210px; color: #ff79de; font-size: 50px; opacity: 0.3;}

#menu{position:fixed; top:-10px; right:0px; z-index: 3;
		font-size: 13px; color:#8a8a8a;;
		padding:36px 70px 20px 30px;
		background-color: #333333;
		-moz-box-shadow: 5px 5px 5px #DDD;
		-webkit-box-shadow: 5px 5px 5px #DDD;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px}
		

#menu span{color:#2ef9fe; font-weight:bolder; border:2px #3976db dotted;}
#menu span:hover{color:#ff2d66; font-size:110%;}

#tabMenu{position:relative; z-index:2;}

/*float*/
ul,ol,#think,table,dl,form{float: left;}
hr  { clear: both;}
#left{ float: left;
		border: 7px #76cbfe double;
		margin:20px 5px;}
#tabMenu{float:left;
		 margin:23px;}


/* line-height */
blockquote{line-height: 25px;}

/*vertical-align*/
#A     { font-size: 50px; color: #fc32b0; }
#align { 
		 font-size: 18px; color: #ffa4d3;
		 font-weight: bolder;
		 vertical-align: top;
		 }


/* visibility */
#align:hover{ visibility: hidden;}


/* overflow */
div#over{
	  width: 150px;
	  height: 150px;
	  overflow: scroll;
	  float: left;
	  }

div#over2{
	  width: 150px;
	  height: 150px;
	  overflow: visible;
	  float: left;
	  }

#over,#over2{color:#ffb9bb; font-weight: bolder; font-size: 14px;opacity: 0.2;}

	
/* font-family */
#Impact{font-family:Impact;}
#Georgia{font-family:Georgia;}
#TimesNewRoman{font-family:"Times New Roman";}
#CourierNew{font-family:"Courier New";}
#LucidaConsole{font-family:"Lucida Console";}
#SimHei{font-family:SimHei;}
#ComicSansMS{font-family:"Comic Sans MS";}
#ArialBlack{font-family:"Arial Black";}
#Webdings{font-family:Webdings; font-size:80px;}
#fantasy{font-family:fantasy;}
#cursive{font-family:cursive;}
#monospace{font-family:monospace;}
#meirio{font-family:メイリオ;}



a#jump{ text-decoration: underline overline blink ;}

/* text-shadow */
h1, h2, h3, h4, h5, #align{text-shadow: 4px 3px 2px #bea2a0;}
#ue{text-shadow: 6px 6px 8px #cfb7d7;}

/* font-variant  variant→「様々な」  (類)variation　　*/
address{font-variant: small-caps;
		font-size: 15px;
		fon-family: "Comic Sans MS";
		letter-spacing:7px;
		}

/* letter-spacing */		
.spandiv{letter-spacing:10px;}

blockquote{ color: #0086ce;
			font-style:italic;
			font-size:13px;
			text-shadow: 2px 1px #c0c0c0;
			letter-spacing: 6px;
			font-weight: bolder;
			}
				
table{font-size:55%;}	
li{color:black;}
	
/* 透過→opacity！ 不透明度 */
h1,blockquote,#livly,#align,address,span,p,table{	opacity: 0.7;	
    					 /*filter: alpha(opacity=80);  IE6、IE7対応*/
 	   					/*-moz-opacity: 0.8;	          Firefox1.5以前対応*/
                                           }
										   
h2,h3,g4,h5,p,ol,ul,dl,#think,table{opacity: 0.85;}
	
	
/* list-style */
#list1 ul{ list-style:  decimal-leading-zero inside; }
#list2 ul{ list-style:  hebrew outside; }
#list3 ul{ list-style:  armenian inside; }
#list4 ul{ list-style:  georgian outside; }
#list5 ul{ list-style:  square inside; }
#list6 ul{ list-style:  lower-latin outside; }



#tabl:hover {border:2px #8df1b0 dotted;;}
/* table系 */
table { table-layout: auto;
		caption-side: bottom; 
		border-collapse : separate;
		border-spacing: 10px 5px;
		margin: 30px;
		width: 200px;}
		
table { border: #ff79a2 16px outset;}
th    { border: #aa77ff 4px solid;}
td    { border: #dac4ff 3px double;}
table caption{ color: #f90076; font-size: 20px; font-weight: bolder; opacity: 0.7; }



/* outline */
input { outline: 4px double #0082e1;}
#livly{ outline: 10px groove #00b5ce;}




/* content */
a#jump[href]:hover:after {  content: attr(href);
						color: #0000a0;
						font-size: 4px;
						position: relative;
						top 10px;
						right 20px; }

*[title]:hover:after{ content: attr(title);
			color: #9f2000;
			position: relative;
			top: 10px;
			right: 20px;}




/*  transform  */
#ue{ -webkit-transform: rotate(-20deg);
     -moz-transform: rotate(-20deg);    }
table{ -webkit-transform: rotate(50deg);
       -moz-transform: rotate(50deg);    }
#think{ -webkit-transform: rotate(9deg);
     -moz-transform: rotate(9deg);    }
#over2{ -webkit-transform: rotate(9deg);
        -moz-transform: rotate(9deg);    }
form{ -webkit-transform: rotate(-66deg);
      -moz-transform: rotate(-66deg);    }
address{ -webkit-transform: rotate(-5deg);
      -moz-transform: rotate(-5deg);    }	



/* tab & box */


#box1,#box2,#box3,#box4{
	opacity:0.8;
	width: 300px;
	height: 300px;
	margin-bottom: 30px;
	background-color: #01b479;
	color: #f5a5a5;
	overflow:scroll;
	font-size: 12px;
	-moz-box-shadow: 5px 5px 5px #DDD;
	-webkit-box-shadow: 5px 5px 5px #DDD;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px
}

#tabs a{
	width:50px !important;
	background-color: gray;
	color: #fbdbdb;
	-moz-box-shadow: 5px 0px 5px #DDD;
	-webkit-box-shadow: 5px 0px 5px #DDD;
}


.acTab{
	font-weight:bolder;
	background-color: #01b479 !important;
	color : #ff3c3c !important;
}



#tabs{
	opacity:0.8;}


/*広告にはむかってみる*/
#y_gc_div_mast,#y_gc_div_mast{
	visibility: hidden !important ;
	opacity:0.1 !important ;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	}


/*  ボックスに影をつける
    -moz-box-shadow: 5px 5px 5px #DDD;
	-webkit-box-shadow: 5px 5px 5px #DDD;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px  */



/*
■　table-layout属性の値
 ◇　auto：　自動レイアウト。各セル内容に合わせてテーブルの列幅を自動的に決定します。デフォルト値。
 ◇　fixed：　固定レイアウト。テーブルの列幅を固定します。
  ※デフォルト（auto）の場合、ブラウザーはテーブルの全体を読込み、各セルの内容に合わせて列幅を決定して表示をし始めます。複雑な（階層深い）テーブルの場合、ブラウザーの表示時間がかかってしまうことも考えられます、現在は、tableを使わず、divタグとCSSでのレイアウトが推奨（主流）されています。
  ※fixedと指定される場合、幅が指定されていない列に幅は均等に割り当てられるため、テーブルの列、もしくはテーブルの一行を読み込んだ時点で、すぐ表示開始します。
*/


/* CSS ---------------------------------*/	
/* animation!!--------------------------*/
h1{
 display: block;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-iteration-count: infinite;
 -webkit-transform-origin: middle center;
 -webkit-transform: scale(1);
 -webkit-animation-name: outer01;
}
@-webkit-keyframes outer01 {
 0%{
 -webkit-transform: scale(1); 
 }
 70% {
 -webkit-transform: scale(1); 
 
 }
 85% {
 -webkit-transform: scale(1.4); 
 
 }
 100% {
 -webkit-transform: scale(1); 
 }
}