/****************************************
		1. 基本設定 
*****************************************/

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
　↓YUI3 CSS Reset　ブラウザー固有のスタイルをリセットします↓　*/
body,div,dl,dt,dd,
ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td {
	padding: 0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
img {
	border:0;
}
ul,ol,li {
	list-style:none;
}

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
　↓YUI3 CSS Fonts　フォントサイズを相対指定する↓　*/
body{
	font:13px/1.231 "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    *font-size:small;/* IE用 */
    *font:x-small;/* IE 互換モード用 */
	background:#eeeeee;
}

/* YUI3 CSS Fonts フォントサイズ対応表
10px:77%     11px:85%     12px:93% 
13px:100%    14px:108%    15px:116%
16px:123.1%  17px:131%    18px:138.5%
19px:146.5%  20px:153.9%  21px:161.6%
22px:167%    23px:174%    24px:182%
25px:189%    26px:197%
*/

/*　↓リンクに対する共通設定↓　*/
a {
	text-decoration:none;
}

/*　↓HTML5　新要素をブロック化する↓　*/
header, section, footer, aside, nav, article, figure { 
	margin:0;
	padding:0;
	display: block;
}

.navbar-inverse{
	background-color:#288203;
}

.panel-group {
	margin-top:10px;
}

.panel-footer {
  padding: 10px 15px;
  background-color: #DBF9D4;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.panel-heading {
  padding: 0;
  background-color: #DBF9D4;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin:0;
}

.panel-title {
	text-align:center;
	line-height:25px;
	color:#1DA303;
	margin:0;
}

.mess {
 	font-size: 130%;
	font-weight:300 ;
	padding: 2px 2px;
	margin: 20px 20px;
	line-height: 1.5em;
    
   
    
    
}


table#Gallery{
	width:100%;
	border:none;
	border-collapse: separate;
	border-spacing: 5px;
}
#Gallery td{
	text-align: center;
	max-width: 180px;
	max-height: 180px;
	bottom: 0;
	
}
#Gallery img{
	width: 100%;
}

table.Gallery{
	width:100%;
	border:none;
	border-collapse: separate;
	border-spacing: 5px;
}
.Gallery td{
	text-align: center;
	max-width: 180px;
	max-height: 180px;
	bottom: 0;
	
}
.Gallery img{
	width: 100%;
}

.panel-body {
	padding: 10px;
	
}

.recipe-box {
	font-size: 100%;
	font-weight: bold;
	color: #333333;
	background: #FFCC00;
	text-align: center;
	border: 1px solid #336600;
	padding: 4px 3px;
	margin: 4px 3px;
	line-height: 2em;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
.hid{
	overflow: hidden;
  zoom: 1;
}
.leftsidebox {
	font-size: 110%;
	font-weight: bold;
	color: #333333;
	background: #CCFF99;
	text-align: center;
	border: 1px solid #336600;
	padding: 2px 2px;
	margin: 4px 3px;
	line-height: 2em;
	border-radius:8px;
}
.leftsideboxtex {
	font-size: 100%;
	line-height: 1.2em;
	color: #333333;
	background: #FFCCFF;
	text-align: left;
	margin: 5px;
	padding: 5px 10px;
	border-radius:8px;

}
#side-bar {
	padding-top:7px;
	padding-bottom:7px;
}

.month {
	text-align:center;
}


a:hover img.overwhite{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}

h2.top-page{
	padding:10px;
	color:#049619;
}
	
.button {
  background: #5b9507 ;
  background: -moz-linear-gradient(top, #a3ea3f, #5b9507);
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    from(#a3ea3f),
    to(#5b9507));
  border: 1px solid #487606;
  border-radius: 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
  color: #fff;
  display: inline-block;
  font-family: "Jun 501", sans-serif;
  font-size: 23px;
  height: 56px;
  line-height: 56px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px #487606;
  width: 300px;
}

.button_inner {
  display: block;
  height: 56px;
  line-height: 56px;
  opacity: 0.9;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.button.hover .button_inner,
.button:hover .button_inner{
  opacity: 1;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

article.Top-page {
	margin-top:20px;
}

/* 　コラム中の挿入画像の配置　→　*/


img.right{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.left{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.img-right{
	margin-left: 10px;
	display: inline-block;
	margin-top: 7px;
	margin-bottom: 7px;
	float: right;
}

/*
img.left{
	margin-right: 10px;
	display: inline-block;
	margin-top: 7px;
	margin-bottom: 7px;
	float: left;
	}
*/
    
    
/*　 ←コラム中の挿入画像の配置　*/

.tenkai{
	font-size: 120%;
	line-height: 35px;
	color: #FFFFFF;
	padding-top: 5px;
	padding-bottom: 3px;
	background-color: #036A0B;
	border-radius: 6px;
	margin-bottom: 5px;
	margin-top: 5px;
	}
	.tenkai a {
	
	color:#FFFFFF;
	
	}
.cm{
	display: inline-block;
	margin:auto;
}
p.btn-link {
	margin-left:20px;
	margin-top:20px;
	font-weight:bold;
}

.clear {
	clear:both;
}  
.process img {
	margin:5px 10px 5px 5px;
}

/*　↓ナビバーの設定↓　*/
.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 25px;
  line-height: 30px;
}
.navbar-inverse .navbar-brand {
  color: #FCAC00;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-text {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a {
  color: #FFFFFF;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #F7DE00;
  background-color: transparent;
}
table.recipe {
	width: 80%;
	border-color: #FFFFFF;
	margin: 10px auto 10px;
	border-spacing: 3px;
	border-collapse: separate;	
	
}
table.recipe tr {
	border:#FFFFFF;
}

table.recipe td {
	background: #DEFCD7;
	border: thin solid #028826;
	text-align: center;
	padding: 5px auto 5px;
	line-height: 30px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

button.btn-success {
	margin-top:15px;
	margin-bottom:15px;
}
a:link.pagetop{
	color:#FFFFFF;
}
a:visited.pagetop{
	color:#FCAC00;
}
a:hover.pagetop{
	color:#FBF55F;
}
.panel-body .glyphicon{
	font-size: 25px;

}

.ward-level{
	padding: 10px 10px 10px 10px;
	
}

/*　-----　フルーツトップのインラインボックスを使ったパネルの配列　-------　*/

.disp-inBlock li{
	display: inline-block;
    *display: inline;	/*for IE*/
    *zoom: 1;		/*for IE*/
	border: none;
	margin-right: 5px;
	margin-bottom: 5px;
	width: 140px;
}
.disp-inBlock li img{
	width: 140px;
}
.disp-inBlockB{
	display: inline-block;
    *display: inline;	/*for IE*/
    *zoom: 1;		/*for IE*/
	border: none;
	margin-right: 5px;
	margin-bottom: 5px;
	width: 140px;
}
.disp-inBlockB img{
	width: 140px;
}
.disp-inBlock {
	margin: auto;
	
}

.itemBox{
	border-style: solid;
	border-left-width: 0px;
	border-bottom-width: 0px;
	border-right-width: 0px;
	border-top-width: 0px;
   }
.v-btm{vertical-align:bottom;}
.v-50{vertical-align:middle;}

/*　↑-----　ここまでフルーツトップのインラインボックスを使ったパネルの配列　-------　*/

@media screen and (max-width : 566px ){
.hidden-xs { display: none;}
}

/*  --------- 画像一覧　画像配置　　------　　＊*/   
.img-Gallery{
	border: thick;
	border-bottom-color: #667CFD;
	border-radius: 10px;
}
.img-Gallery img{
	display: inline-block;
	width: 160px;
	margin: 1px;
}

#how-to hr{
	border-bottom-style: dotted;
	border-bottom-color: aliceblue;
	clear:both;
	width: 80%;
	margin: auto;
}


/* ------ ページトップのスライドショー -------*/

#stage {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	background: #ffffff;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 15s infinite;
-webkit-animation: imgTrans 15s ease-in infinite;
animation: imgTrans 15s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
#photo3 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo4 img {
-moz-animation-delay: 12s;
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
#frame-img {
width: 100%;
position: relative;
overflow: hidden;
	background-color: ffffff;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:1; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:1; }
100% { opacity:0; }
}

/* -- -- -- ↑スライドショーここまで-- -- -- */