@charset "UTF-8";

/*基本*/
*
{color:#663300;margin:0; padding:0;
 font-family:"Arial","Helvetica",ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif;"
}

html {scroll-behavior: smooth;}


body {
background: #336600 url(img/neko_back.gif) repeat-x bottom;
 margin:0;
}

img
{border:none;
margin:0px;
max-width: 100%;
  vertical-align: bottom;
}

header{
  width : 95%;
  margin: 0 auto;
  background-color: #f4e6c3;
  max-width: 1100px;
  }

/*ヘッダー画像配置div*/
div#header_image{
  width : 100%;
  margin: 0;
  padding: 0;
	background-color: #fff;
  	}

  /*ヘッダー・ナビゲーション内リスト*/
ul.topnavi{
display: flex;
justify-content: center;
font-size: 0.8em;
font-weight:bold;
list-style: url("img/listmark.png") inside;
}

@media screen and (max-width : 320px) {
  ul.topnavi{
  font-size: 0.7em;
  }
}

@media screen and (min-width : 481px) {
  ul.topnavi{
  font-size: 1em;
  }
}


ul.topnavi li{
margin: 10px;
font-family: 'Sawarabi Mincho', sans-serif;
}

ul.topnavi li a{
  text-decoration: none;
  }




/*メイン＋サイド包括div*/
div#wrap{
  max-width: 1100px;
	background-color: #fff;
  width : 95%;
  margin: 0 auto;
}

@media screen and (min-width : 768px) {
	div#wrap{
    display: flex;
    flex-direction: row;
    justify-content: center;
	}
	}


/*メインdiv*/
@media screen and (min-width : 768px) {
		div#main{
		flex: 1;
		order: 2;
	}
  }

/*メインdiv・記事*/
  article{
    margin-bottom:1em;
  }

/*グリッドレイアウト*/
.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 1em ;
  }

/*flexboxレイアウト*/
.flexbox{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin:1em 0em 0em 0em;
  }

@media screen and (max-width : 480px) {
 .flexbox{
  justify-content: center;
    }
    }

@media screen and (min-width : 768px) {
  .flexbox{
  margin:1em 0em 0em 1.5em;
    }
    }

.flexbox div{
  margin:0.5em 0.5em 0.5em 0.5em;
  }

@media screen and (min-width : 768px) {
  .flexbox div{
    margin:0.5em 0.5em 0.5em 0.5em;
  }
  }

.flexbox a{
  font-size:0.8em;
      }

/*youtube埋め込み*/

.youtube_wrap{
  width: 80%;
  min-width: 450px;
  padding: 10px 0px 20px 20px;
          }

@media screen and (max-width : 480px) {
  .youtube_wrap{
  width: 100%;
  min-width: 300px;
  padding: 10px 0px 20px 0px;
      }
      }

      .youtube_container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      }
      .youtube_container iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }


/*サイドdiv*/
div#side {
  background-color: #f4e6c3;
}

@media screen and (min-width : 768px) {
div#side {
	width: 200px;
}
}

/*サイドdiv・aside*/
aside {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 30px;
}


/*サイドdiv・aside内段落*/
aside p{
font-size:0.8em;
font-family: 'Sawarabi Mincho', sans-serif;
margin-bottom: 10px;
}

/*サイドdiv・aside・リスト全般*/
aside ul{
list-style-type:none;
padding :0;
}

aside ul li{
font-weight:normal;
font-size:0.8em;
}

/*サイドdiv・aside・リスト・テキストの配置*/
aside ul.text{
margin-top: 15px;
}

aside ul.text li{
margin-bottom: 15px;
}

/*サイドdiv・aside・リスト・カテゴリ画像*/
aside ul.menu li
{margin-bottom: 15px;
}

/*サイドdiv・aside・リスト・カテゴリ画像のリンク*/
a#navi_top,a#navi_menu,a#navi_blog,a#navi_rice{
display:block;
width:180px;
height: 52px;
margin-bottom: 20px;
}
/*（メニュー）*/
a#navi_menu:link {background: url(img/navi_menu.jpg) no-repeat 0px 0px;}
a#navi_menu:visited{background: url(img/navi_menu.jpg) no-repeat 0px 0px;}
a#navi_menu:hover{background: url(img/navi_menu_hov.jpg) no-repeat 0px 0px;}
a#navi_menu:visited:hover{background: url(img/navi_menu_hov.jpg) no-repeat 0px 0px;}

/*（お米）*/
a#navi_rice:link {background: url(img/navi_rice.jpg) no-repeat 0px 0px;}
a#navi_rice:visited{background: url(img/navi_rice.jpg) no-repeat 0px 0px;}
a#navi_rice:hover{background: url(img/navi_rice_hov.jpg) no-repeat 0px 0px;}
a#navi_rice:visited:hover{background: url(img/navi_rice_hov.jpg) no-repeat 0px 0px;}

/*（ブログ）*/
a#navi_blog:link {background: url(img/navi_blog.jpg) no-repeat 0px 0px;}
a#navi_blog:visited{background: url(img/navi_blog.jpg) no-repeat 0px 0px;}
a#navi_blog:hover{background: url(img/navi_blog_hov.jpg) no-repeat 0px 0px;}
a#navi_blog:visited:hover{background: url(img/navi_blog_hov.jpg) no-repeat 0px 0px;}

/*（トップページ）*/
a#navi_top:link {background: url(img/navi_top.jpg) no-repeat 0px 0px;}
a#navi_top:visited{background: url(img/navi_top.jpg) no-repeat 0px 0px;}
a#navi_top:hover{background: url(img/navi_top_hov.jpg) no-repeat 0px 0px;}
a#navi_top:visited:hover{background: url(img/navi_top_hov.jpg) no-repeat 0px 0px;}



/*フッター（コピーライト表示）*/
footer {
    margin: 35px 0;
    padding :0;
 }

footer p{
    font-size:0.8em;
    font-family: 'Sawarabi Mincho', sans-serif;
    color:#fff;
    text-align: center;
    margin: 0;
}


/*トップページ専用・見出し1*/
h1#indextop{
color:#009900;
background-color: #f4e6c3;
font-family: 'Sawarabi Mincho', sans-serif;
font-size:0.8em;
font-weight:bold;
padding-left: 2em;
}

@media screen and (max-width : 480px) {
  h1#indextop{
    font-size:0.7em;
  }
}


@media screen and (min-width : 768px) {
h1#indextop{
padding-left: 4em;
}
}

/*本文・見出し*/
div#main h1{
color:#663300;
font-size:1.2em;
font-family: 'Sawarabi Mincho', sans-serif;
padding:0.8em 0em 0.8em 2em;
margin:0px 10px 0px 10px;
border:1px dotted #663300;
background: url(img/neko_icon_h1.gif) no-repeat 8px 16px;}

div#main h2{
color:#663300;
font-size:1.1em;
font-family: 'Sawarabi Mincho', sans-serif;
padding:0.8em 0.8em 0.8em 2em;
margin:30px 10px 0px 10px;
border:1px dotted #663300;
background: url(img/neko_icon_h2.gif) no-repeat 8px 18px;}


div#main h3{
color:#663300;
font-size:1em;
font-family: 'Sawarabi Mincho', sans-serif;
padding:0.1em 0em 0.1em 0.3em;
margin:2em 0em 1em 0.3em;
}

/*本文・リスト*/
div#main ul{
    margin:0.5em 1em 0.5em 3em;
    font-weight:normal;
    font-size:0.9em;
}

div#main ul li{
list-style:disc outside;
    margin-top: 1.5em;
    line-height:1.7em;}

div#main ul li p{
    margin-top: 0.8em;
    margin-left: 1em;
}



/*本文・段落基本*/
div#main p{
    margin:1em 1em 0.5em 1em;
    font-size: 0.9em;
    line-height:1.7em;}

@media screen and (min-width : 768px) {
  div#main p{
      margin:1em 1em 0.5em 2em;
    }
    }

/*本文・段落・ひと回り小さい文字*/
div#main p.smaller{
    margin:1em 1em 0.2em 1em;
    font-size:0.8em;
    line-height:1.4em;}


/*本文中画像・基本*/
div#main img{
     margin:0;}

/*本文中画像・左寄せ*/
div#main img.left{
    float:left;
    margin:auto 1em 1em auto;}

/*本文中画像・右寄せ*/
div#main img.right{
    float:right;
    margin:auto 0.5em 1em 1em;}

/*本文中画像・右側に余白*/
div#main img.space_right { margin: 0em 1em 0em 0em }

/*部分的にwebフォントを使用する場合*/
.webfont{
font-family: 'Sawarabi Mincho', sans-serif;
}

/*太字*/
.bold{font-weight:bold;}

/*赤字で強調*/
.caution{color:#ed1b23;}

/*キャプション・注など文字小さめ*/
.sub{font-size:smaller;}

/*非表示*/
.none{display: none;}

/*中央揃え*/
.center{text-align: center;}

/*右揃え*/
.right{text-align: right;}

/*改行したくない単語*/
span.nowrap{ white-space: nowrap;
}


/*テキストリンク*/
a:link { color: #009900;}
a:visited{ color: #009900;}
a:hover{color: #0099cc;}
a:visited:hover{color: #0099cc;}


/*ページ内pagetopリンク　Font Awesome矢印*/
.pagetop{
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 2em;
color: #009900;
}

a#pagetop_link{
text-decoration: none;
}

a#pagetop_link :link { color: #009900;}
a#pagetop_link :visited { color: #009900;}
a#pagetop_link :hover { color: #0099cc;}
a#pagetop_link :visited:hover { color: #0099cc;}