html {min-height: 100%; position: relative;}
/* ヘッダーを表示するためbody下部に余白 */
body { background-color: white; margin: 0; margin-bottom: 26rem; font-family: "メイリオ", "ヒラギノ丸ゴ ProN W4", sans-serif; line-height: 1.5em;}

/*汎用*/
p {font-size: 16px;}
a {color: #000;}
a:hover {color: #2e630a;}
h1 {margin-top: 1em;}
h2 { border-left: solid 5px #2e630a; padding: 3px 3px 0px 10px; font-size: 20px; color: #2e630a;}
h3 {color: #2e630a;}
h5 {color: #2e630a; border-left: solid 3px #2e630a; padding-left: 10px; font-size: 16px;}

/*マーカー*/
.marker01 {color: #ff8000; font-weight: bold;}
.marker02 {color: #0080ff; font-weight: bold;}
.marker03 {background-color: #ffff7b;}
.bold {font-weight: bold;}

/*ヘッダー用*/
.header {display: flex; justify-content: space-between;}
.headerright {text-align: right; margin-top: 1rem;}
.snslink {display: flex; margin: 0px 1rem 0px 0px; list-style: none; justify-content: right;}
.snslink li {border: solid 1px #2e630a; border-radius: 5px; padding: 2px 5px 2px 5px; margin: 1px 2px;}
.snslink a {text-decoration: none; }
.header11 {font-size: 12px; display: flex; justify-content: end;}
.header11 a {margin: 0px 4px;}
.headerright p {margin: 4px 0px 4px 0px;}

/*メインメニュー用*/
.mainmanu {background-color: #2e630a; display: flex; justify-content: center;}
.manubutton { background-color: #2e630a; color: white; text-decoration: none; display: block; width: 8rem; padding: 1rem; text-align: center; border-left: solid 1px white; border-right: solid 1px white;}
.manubutton:hover { background-color: #5b9a00; color: white;}

/*indexページ用 なぜ分けなかった*/
.indexcontent {display: flex;}
.topnews {flex: 2;}
.topics {flex: 1;}

/*サイトマップページ用 またしてもなぜ分けなかった*/
.sitemap1{padding-left: 0;}
.sitemap1 li{list-style: none;}

/*news用 newsページとindexページで使う*/
.news1 { color: #4a86e8;} /* news1 : お知らせ */
.news2 { color: #ff9900;} /* news2 : コンテンツ */
.news3 { color: #22cc33;} /* news3 : イベント情報 */
.news4 { color: #999999;} /* news4 : 更新情報 */
.newsdate { color: #000; font-size: 70%; margin-left: 1em;}

/*ページのトップへボタン 常に右下にいる カーソルを合わせると動く*/
.pagetopbutton {position: absolute; bottom: 11.5rem; right: 50px; transition: .2s;}
.pagetopbutton:hover {transform: translateY(-7px); transition: .2s;}

/*フッター用 常にページの一番下にいる*/
.footer {margin-top: 3em; background: linear-gradient(110deg,#2e630a ,#5b9a00); color: white; position: absolute; width: 100%; bottom: 0; left: 0; line-height: 1.5em;}
.linkwhite {color: white; text-decoration: none;}
.linkwhite:hover {color: #c0f378; text-decoration: underline;}
.indent {margin-left: 1em;}
/*フッターの中身*/
.footertitle {font-size: 20px; margin: 30px 0 14px;}
.footerlink {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}

/*行間の調整*/
.linewide {line-height: 1.9em;}


/* もっと見る のリンク */
.more{text-align: right; color: #2e630a; font-weight: bold;}
.more a {text-decoration: none; color: #2e630a;}
.more a:hover {color: #5b9a00;}



/*ウィンドウ幅が1000pxを超えた時 centersを中央に配置する*/
@media (min-width: 1080px) {.centers {width: 1000px; margin: 0 auto;}}

/*ウィンドウ幅が1000px未満のとき 常に左右に余白がある*/
@media (max-width: 1079px) {.centers {margin-left: 40px; margin-right: 40px;}}

/*ウィンドウ幅が750px以下の時 スマホ表示の時 flexboxを縦並びにして、それに伴う位置調整をする*/
@media (max-width: 750px) {
    .header{flex-direction: column;} 
    .headerright{margin-top: -5px;}
    .snslink{padding: 0;}
    .indexcontent{flex-direction: column;}
    .footerlink{flex-direction: column;}
    body{margin-bottom: 42rem;}
    .pagetopbutton {bottom: 28rem;}
    .logo {text-align: center; margin: 10px 0px 0px 0px;}
    .breadcrumb p {font-size: 14px;}

    .centers {margin-left: 15px; margin-right: 15px;}

    .pc{display: none;}
    .mobile{display: inline;}

/* 大きな画像を横幅ぴったりにする */
    .bigimg {width: 100%; text-align: center;}
}

@media (min-width: 751px) {
    .topnews {margin-right: 2em;}
    .pc{display: inline;}
    .mobile{display: none;}
}

/* ほぼロゴ用 明らかに小さいウィンドウ幅のときの挙動 */
@media (max-width: 430px) {
    .midimg {width: 75vw;}/* ロゴのサイズに合わせている */
    .mainmanu {font-size: clamp(12px,4vw,16px);}
    .manubutton {padding: 10px 1px 10px 1px;}
}

.darkmode {color: #fff;}
.darkmode02 {filter: hue-rotate(180deg) invert(1) brightness(80%);}
.lightmode {color: #000;}
.darkmode03 {background-color: #444; color: #000;}
.darkmode04 {color: #5b9a00;}