@import url(http://fonts.googleapis.com/css?family=Chango);



body { font-family: "Rounded Mplus 1c"; 
              
		background-color:#7FFFD4;
		  
		    
		     background-size: cover;
		  margin: 0;/* ボックスのまわりの余白のサイズ指定 */


}

h1{
  
font-family: 'Caesar Dressing', cursive;
	font-size : 38px;
	  margin-top: 0;/* ボックスの上の余白のサイズ指定 */
	margin-bottom: 0;/* ボックスの上の余白のサイズ指定 */
   
}

.h11h{border-left : solid 10px blue;	/* 左に枠線 */
    
}

.biggg {
    color:#F08080;
}



h2{
	font-family: "Rounded Mplus 1c";
	font-size : 38px;
        margin-top: 0;/* ボックスの上の余白のサイズ指定 */
}

p{ 
  font-family: "Rounded Mplus 1c";
    font-size : 20px;
  line-height: 1.5;
}

/* ヘッダー */
header {
	 background-color:#ffffff;
	  border-bottom : solid 1px #aaaaaa;	/* 下線 */
	  margin-bottom: 30px;
	  -webkit-box-shadow: 0 1px 7px #aaaaaa;
	    box-shadow: 0 1px 7px #aaaaaa;/* 横px　縦px　ぼかし　ボックスの影を指定する */
	  padding : 5px ;	/* ボックス内の余白の設定 */

}
/*リンクの下線を削除*/
header h1 a{
  text-decoration:none;
  color:3000000;
        
}
/*重ねたときに色変わるリンク*/
header h1 a:hover{
  
  color:3000000;
        
}



header h1 img {
  vertical-align:-10px
    margin-right:5px;
	    background-color:aqua;
	     font-family: "Chango",
                      "cursive";
	     font-size:24px;
	     width:900px;  
	     margin-left:auto;/*autoは右と左の余白を均等にしてくれる*/
	     margin-right:auto;/*autoは右と左の余白を均等にしてくれる*/

}



/*記事*/
article,#message {
	     background-color:#ffffff;
	     width:900px;
	     margin-left:auto;/*autoは右と左の余白を均等にしてくれる*/
	     margin-right:auto;/*autoは右と左の余白を均等にしてくれる*/
	     border : solid 5px #aaaaaa;	/* 枠線（白色） */
	      padding : 15px ;	/* ボックス内の余白の設定 */
	   
	     margin-bottom: 15px;/* ボックスの上の余白のサイズ指定 */
	     -webkit-box-sizing: border-box;/* webkitはAndroid2.3用 */
	     -moz-box-sizing: border-box;/* mozはFirefox用 */
	     box-sizing: border-box;/* ボックスの横幅と高さの算出方法を指定 */
	      margin-bottom:15px;
	    -webkit-box-shadow: 1px 1px 3px #aaaaaa;
	    box-shadow:10px 10px 3px #aaaaaa;/* 横px　縦px　ぼかし　ボックスの影を指定する */
            border-radius: 20px;/*ボックスの角を丸くする*/
           overflow:hidden;/*画像をボックスに含めて表示*/
    
}

/*フッター*/
footer{
	     background-color:#ffffff;
	     width:900px;
	     margin-left:auto;
  margin-right:auto;
    clear: both;/*回り込みの解除*/
    
    
}

/*画像を中央に配置するレイアウト*/
figure.photo-center {
			  text-align: center;/*テキストや画像の行揃えを指定*/
			margin-top:30px;
			 margin-bottom:30px;
    
    
    
}


/*画像を左に配置するレイアウト*/
figure.photo-left {     margin:0;/*余白0にする*/
			  margin-right:20px;
			      float:left;/*配置と回り込みを指定*/   
			     text-align:center;
}

figure.photo-left img {width:300px;}

/*画像を右に配置するレイアウト*/
figure.photo-right {     margin:0;
			  margin-left:20px;
  float:right;/*配置と回り込みを指定*/   
    text-align:center;
}


figure.photo-right img {width:300px;}



.important {
        
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#ffe7b8),
	    to(#ffaa00));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #ffe7b8 0%,
	    #ffaa00 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #ffe7b8 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #ffffff 50%,/*グラデーションの真ん中を白くする*/
	    #ffaa00 100%);/*グラデーションの下の部分を100%で色を濃く*/
}
.text-center{text-align: center;}




/*リンクを付ける*/
/*リンクの文字色を指定*/
a{color:#FA8072}
    /*重ねたとき色が変わる*/
a:hover{color:#FF0461}
    
    a img {
border:none	
	
    }
    
    
    
/* プルダウンメニュー */
#dropmenu{
  list-style-type: none;
  width: 673px;/* メニューバー全体の長さ */
height: 20px;/* メニューバー全体の高さ */

  margin-left:auto;
margin-right:20px;
margin-top:-20px;

	margin-bottom:0px;
  padding: 0;
  background: #F08080;
  border-bottom: 5px solid #535d09;
  border-radius: 3px 3px 0 0;
}
#dropmenu li{
  position: relative;
width: 110px;/* 1個の区切りの幅 */
height: -10px;/* メニューバー全体の高さ */
float: left;
border-left:solid 2px #fff;/*リンクの右側に罫線を付ける*/
  margin-top:-7px;
  padding: 0;
  text-align: center;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li:hover > a{
  background: #6e7c0c;
  color: #eff7b1;
}
/* マウスを載せたときの色変更 */
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li:last-child ul{
  left: -100%;
  width: 100%
}
#dropmenu li ul li{
  overflow: hidden;
  width: 200%;
  height: 0;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  background: #6e7c0c;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
  border-top: 1px solid #7c8c0e;
  border-bottom: 1px solid #616d0b;
}
#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}







/*特定のページにデザインを施す*/

.content {
    width: 850px;
}
.float-content {
    font-size: 20px;/*枠内のコメントのサイズ*/
    width: 300px;/*枠内のコメントの幅かな*/
    float: left;
}
.caption {
    margin-top: 3px;
    font-size: 84%;
    text-align: center;
}


.content1 {
    width: 580px;
}
.float-content1 {
    font-size: 20px;/*枠内のコメントのサイズ*/
    width: 450px;/*枠内のコメントの幅かな*/
    float: left;
}
.caption1 {
    margin-top: 3px;
    font-size: 84%;
    text-align: center;
}


#posts time   { 
font-size:12px;
color:#ffffff;
background-color:#bdbc8f;
border-radius: 10px;
padding: 2px 20px 2px 20px
	
    }


/*トップページのデザイン*/
/*ヘッダー下の余白を削除*/
#top header {margin-bottom:0}

#photo{
background-image: url(photo.jpg);/*トップページの画像表示*/
background-repeat: no-repeat;
background-position: 50% 0;/*画面半分の50%の位置で背景をそろえる。縦位置は0*/
background-color: #3f8ad6;
text-align: center;/*タイトルを中央にそろえる*/
padding-top:320px;
padding-bottom:80px;

}

#photo h1 {
color: #ffffff;
font-size:60px;
font-family:'Chango',cursive;
text-shadow: 0 5px 10px #000000;
}

#photo p {
color: #ffffff;
font-size:20px;
font-weight:bold;/*文字の太さを指定*/
text-shadow: 0 5px 10px #000000;/*文字に影をつける*/
}

#photo h1,#photo p {
color:rgba(255,255,255,0.5)
}

span {color:black}

/*トップページのリンクボタン*/
#photo a {
background-color:#ffaa00;
padding:10px 80px;
border-radius:10px;
color:#000000;
font-weight:bold;
text-decoration:none
/*ここからはグラデーション指定*/
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#ffe7b8),
	    to(#ffaa00));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #ffe7b8 0%,
	    #ffaa00 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #ffe7b8 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #ffffff 50%,/*グラデーションの真ん中を白くする*/
	    #ffaa00 100%);/*グラデーションの下の部分を100%で色を濃く*/


}





#menu aside {
	    background-color:#ffffff;
	     margin-left:auto;/*autoは右と左の余白を均等にしてくれる*/
	     margin-right:auto;/*autoは右と左の余白を均等にしてくれる*/
	     border : solid 1px #aaaaaa;	/* 枠線（白色） */
	    padding : 20px ;	/* ボックス内の余白の設定 */
	    margin-top: 0px;
	     margin-bottom: 30px;/* ボックスの上の余白のサイズ指定 */
	     
	    -webkit-box-shadow: 1px 1px 3px #aaaaaa;
	    box-shadow: 1px 1px 3px #aaaaaa;/* 横px　縦px　ぼかし　ボックスの影を指定する */
            border-radius: 20px;/*ボックスの角を丸くする*/
         
}

h3{font-family: "Rounded Mplus 1c"; 
              margin-left:auto;/*autoは右と左の余白を均等にしてくれる*/
	     margin-right:auto;/*autoは右と左の余白を均等にしてくれる*/
		background-color:#edede3;
		 text-align:center;
		    }


.aa1 {  /*波動アニメーションタイトル*/
	
    padding: 10px;
font-weight: bold;
vertical-align: top;
	color: black;
		  width: 950px;
background-color:#edede3;
}


.aa2 {   /*各分野のタイトル*/
	
    padding: 10px;
font-weight: bold;
vertical-align: top;
	color: black;
		  width: 1550px;

background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#FFFF00),
	    to(#FFFF00));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #FFFF00 0%,
	    #ffaa00 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #FFFF00 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #ffffff 50%,/*グラデーションの真ん中を白くする*/
	    #FFFF00 100%);/*グラデーションの下の部分を100%で色を濃く*/
}

				
.T1 {
		    
		  width: 5px;
		    background: #7B68EE;
}
.a1 {
		    font-size : 30px;
		    padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: black;
width: 750px;
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#ffe7b8),
	    to(#ffaa00));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #ffe7b8 0%,
	    #ffaa00 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #ffe7b8 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #ffffff 50%,/*グラデーションの真ん中を白くする*/
	    #ffaa00 100%);/*グラデーションの下の部分を100%で色を濃く*/

		   
}

		
		
.a2 {
 font-size : 30px;
		    padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: black;
width: 750px;
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#D9E5FF),
	    to(#5D99FF));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #D9E5FF 0%,
	    #5D99FF 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #D9E5FF 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #ffffff 50%,/*グラデーションの真ん中を白くする*/
	    #5D99FF 100%);/*グラデーションの下の部分を100%で色を濃く*/
}

		
.a3 {
 font-size : 30px;
		    padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: black;
width: 750px;
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#DCC2FF),
	    to(#7B3CFF));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #DCC2FF 0%,
	    #7B3CFF 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #DCC2FF 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #ffffff 50%,/*グラデーションの真ん中を白くする*/
	    #7B3CFF 100%);/*グラデーションの下の部分を100%で色を濃く*/
}
		
.a4 {
 font-size : 30px;
		    padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: black;
width: 750px;
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#FF99FF),
	    to(#FF6699));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #FF99FF 0%,
	    #FF6699 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #FF99FF 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #ffffff 50%,/*グラデーションの真ん中を白くする*/
	    #FF6699 100%);/*グラデーションの下の部分を100%で色を濃く*/
}




.content2 {   /*各テーマのテーブル内の言葉*/
    width: 850px;
}
.float-content2 {
    font-size: 35px;/*枠内のコメントのサイズ*/
    width: 800px;/*枠内のコメントの幅かな*/
    float: left;
}
.caption2 {
    margin-top: 3px;
    font-size: 84%;
    text-align: center;
}

.gazou {
 margin-left:70px;/*autoは右と左の余白を均等にしてくれる*/
margin-right:auto;/*autoは右と左の余白を均等にしてくれる*/
border-radius:10px;
border : solid 2px #aaaaaa;	/* 枠線（白色） */
	    padding : 0px ;	/* ボックス内の余白の設定 */
	    
	     
    
width: 600px;/*枠内のコメントの幅かな*/
height: 200px;/*枠内のコメントの幅かな*/
    
}