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



body { font-family: "Rounded Mplus 1c"; 
              
		background-color:#edede3;
		  background-image: url(jikihaikei.png);/*背景画像の指定 */
		    
		     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:#b77d3c}
    /*重ねたとき色が変わる*/
a:hover{color:#ff8800}
    
    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%で色を濃く*/


}

/*アバウトページ*/
table,th,td {border:solid 1px #aaaaaa}

table {
border-collapse:collapse;/*テーブルの罫線を重ねて表示するように指定*/
margin-left:auto;
margin-right:auto;
margin-top:30px;

}

th,td {padding:10px 20px 10px 20px}/*セルの内側に余白を入れる*/

th {
width:150px;
background-color:#ffcb63;
text-align:left
}

td {
width:450px;
background-color:#ffedce;

}

caption{
font-weight:bold;
background-color:#d9d8a7;
boder-radius:10px;
padding:5px;
margin-bottom:10px;
}

/*お問い合わせページ*/

input,textarea{display:block}/*空欄の３つをブロック化する*/

input {width:400px}

input[type="submit"] {
	width:200px
	background-color:#ffaa00;
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#DDFFFF),
	    to(#00CCCC));

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

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

textarea{
width:600px;
height:120px;

}



/*2段組にする*/

#container {
width:1000px;
margin-left:auto;
margin-right:auto;

}


#content {
width:650px;
float:left;

}


#menu {
width:300px;
float:right;

}

#content article {width:auto}
#content article img {width:400px }



#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;
		    }

table.type12 {
	border-collapse: separate;
	border-spacing: 3px;
	text-align: center;
	line-height: 1.5;
}
table.type12 th {
	
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
	background: #666;
}
table.type12 td {

	padding: 30px 10px;
	vertical-align: top;
	background: #FFFF00;
}
table.type12 th.col01 {background: #111111;width:50px;}
table.type12 td.col01 {background: #111111;width:50px;}
table.type12 th.col02 {background: #40E0D0; width:950px;text-align: center;}
table.type12 td.col02 {background: #C0C0C0;width:950px;text-align: center;}
table.type12 th.col03 {background: #111111;width:50px;}
table.type12 td.col03 {background: #111111;width:50px;}
table.type12 td.col04 {background: #111111;}
table.type12 th.col04 {background: #111111;}
table.type12 td.col05 {background: #FF99CC;}
table.type12 td.col06 {background: #3399FF;}
table.type12 td.col07 {background: #FF773E;}
table.type12 td.col08 {background: #00FF00;}
table.type12 td.col09 {background: #40E0D0;}
table.type12 td.col10 {background: #CC00CC;}
table.type12 td.col11 {background: #FFFF11;}
table.type12 td.col12 {background: #FFFF99;}															
		
table.type13 td {

	padding: 30px 10px;
	
	background: #FFFF00;
}



.botton1 {
  /*position: absolute;  */
  border-radius: 100px;
  text-align:center;
    margin-top:20px;
    font-family: 'Caesar Dressing', cursive;;
font-size : 15px;
font-weight: 900; 
width:140px;
height: 50px; 
color : black;

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

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

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

}
															
.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/2);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
															}