@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #2eb872;
	--accent-color: #ff5d6e;
	--dark-main-color: #a3de83;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width:1000px;
	--middle-width: 800px;
}



/* 基本設定： ページ全体 */
body {
	margin: 0;
	font-family: 'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;
	background-color: #feffea;
}


/* コンテンツA： イメージ */

.conA {
display: flex;
align-items: center;
justify-content: center;
height: 30vh;
min-height: 80px;
text-align:center;
background-color: var(--main-color);
}
.conA.compact{
	height: 80px;
}
.conA h1 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 18px;
	color: var(--text-bright-color);
}
.conA h2 { /* 利用してない */
	margin-top: 10;
	margin-bottom: 0;
	font-size: 20vw;
	color: #fff;
}

/* コンテンツA： ieのための色固定 */
@media all and (-ms-high-contrast: none){

.conA {
	background-color: #2AAE0D;
　　　}

.conA h1 {
	color: #fff;
}

}
/* コンテンツA： Andoridのための色固定 */
@media all and ( before Andorid4.5){

.conA {
	background-color: #2AAE0D;
　　　}

.conA h1 {
	color: #fff;
}

}










@media (min-width: 980px) {
.conA {
	height: 50vh;
	min-height: 80px;
	width: 980px;
	margin: 0 auto;
}
	.conA h1 {
		font-size: 46px;
	}
}



/* コンテンツAA： 緊急連絡 */
.conAA h3 {
	margin-top: 10px;
	margin-bottom: 10px;
	color: #dc143c;
	font-size: 14px;
	background-color: #f0e68c;
}
@media (min-width: 980px) {
  .conAA h3 {
	font-size:20px;
	width: 980px;
	margin: 0 auto;
  }
}




/*アレンジ： メニュー  メニュー*/
.related {
	background-color: #feffea;
}
.related a {
	flex: 1;
	display: block;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: var(--main-color);
	color: inherit;
	text-decoration: none;
}
.related a:hover {
	opacity: 0.6;
	background-color:var(--accent-color);
}

.related ul {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	/* max-width: 1000px; */
	background-color:  #feffea;
	/* padding: 20px 20px 20px;　*/　<!--上，左右，下の余白-->
	list-style: none;
}
.related li {
	flex: 1 1 500px;
	display: flex;
	padding: 10px 10px 10px;　　<!--上，左右，下の余白--> */
}


.related .text {
	/* margin: 20px; */
	text-align:center;
	/* padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: #395608; */
}
.related .text h2 {
	/* margin-top: 5px;
	margin-bottom: 5px; */
	font-size: 15px;
	color: #fff;
}


/* アレンジ： メニュー  メニュー： ieのための色固定 */
@media all and (-ms-high-contrast: none){

.related a {
	background-color: #2AAE0D;
}
.related a:hover {
	background-color:var(--accent-color);
}





}













/* 大きい画面用の設定 */
@media (min-width: 980px) {
.related {
		width: 980px;
		margin: 0 auto;
	}
.related ul {
		justify-content: center;
	}

.related li {
	flex: 0 0 280px;
}

.related .text h2 {
	font-size: 15px;
}
}