@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0}

a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle}

/* image link */
a img		{border:none;margin:0px;padding:0px;}
a:hover img	{filter:alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;}

/* @end */


/* @group Fluid-img */

img { max-width : 100%;}

/* @end */


/* @group HTML */

html {
font-family : verdana, sans-serif;
font-size : 75%; /*レスポンシブタイプセッティングの指定*/
line-height : 1.5}

/* @end */

body {
	background : #BBE8BF;
}

/* @group Heading */

h1 {
font-size : 3em; /* 48px */
font-size : 1em; /* 16px */
line-height : 1; /* 48px */
margin-bottom : 0.5em }

h2 {
font-size : 2.25em; /* 36px */
line-height : 1.3333; /* 48px */
margin-bottom : 0.6667em }

h3 {
font-size : 1.5em; /* 24px */
line-height : 1; /* 24px */
color : #393939;
margin-bottom : 1em }

h4 {
font-size : 1em; /* 16px */
line-height : 1.5; /* 24px */
color : #7D4934;/*7D4934*/
margin-bottom : 1em;
/*border-left: solid 5px #6EDA77*/;/*左線（実線 太さ 色）*/
}

/*h4:before {
	content: '●';
  color: #6EDA77;
  margin-right: 8px;
}*/

h4:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(187,232,191), transparent);
  background: linear-gradient(to right, rgb(187,232,191), transparent);
}

h5 {
font-size : 1em; /* 16px */
line-height : 1.5; /* 24px */
color : #7D4934;
margin-bottom : 1em }

hgroup h2,h5,h6 {
font-size : 1em; /* 16px */
line-height : 1.5; /* 24px */
margin-bottom : 1.5em;
 }

/* @end */

/* @group Header */

header {
text-align : center;
padding-top : 0.5em;
background : #E3F1E4

}

header h1 {
font-size : 1.5em;
text-align : left;
margin-bottom : 0em;
margin-left : 10px;
color : #333333
}
header h5 {
font-size : 1em;
text-align : left;
margin-bottom : 0.5em;
margin-left : 10px;
color : #666666
}


/* @end */

/* @group Nav */

nav {
text-align : center;
/*margin-bottom : 1.5em;8CA88F 7D4934*/
background-color: #8CA88F;
background: -moz-linear-gradient(top, rgba(173,205,176,1) 0%, rgba(127,152,136,1) 88%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(173,205,176,1)), color-stop(88%,rgba(127,152,136,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(173,205,176,1) 0%,rgba(127,152,136,1) 88%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(173,205,176,1) 0%,rgba(127,152,136,1) 88%); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(173,205,176,1) 0%,rgba(127,152,136,1) 88%); /* W3C */
}

nav ul { overflow : hidden}
nav ul li { width : 25%;
		float : left}
nav ul li a {
display : block;
color : #EEEEEE;
padding : 0.25em 0}

nav ul li a:hover {
color : white;
background-color : #8CA88F}

/* @end */

/* @group Contents */

#contents {
/*width : 90%;*/
margin : 0 auto;
padding-top : 1em;
text-align : left;
background-color : #FFFFFF;/*F5FAF6*/
}

#contents #main,
#contents #sub {
/*float : left;*/
margin : 0 10px }

#contents p {
margin-bottom : 1.5em;
/*padding-left : 1em;*/
text-align : left}
#contents img {
margin-bottom : 1.5em;
box-shadow : 0 0 1px #2f1f1f;
}

#flexdiv{
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
  	-webkit-justify-content: space-around;
  	-ms-flex-pack: justify;
	justify-content: space-around;
	flex-wrap: wrap;
}
#flexdiv2 {
padding : 0em 0em;
width: calc(45% - 10px);
}

#typeA {
padding : 1.5em 1.5em;
margin-right : 1.5em;
margin-bottom : 0em;
background-color : #f9f9f9;
box-shadow : 0 0 1px #2f1f1f
}


#typeB {
padding : 1.5em 3em;
margin-left : 1.5em;
margin-bottom : 0em;
background-color : #211f1f
}

    #typeB h3 {
    color : #ffffff
    }
    #typeB h4 {
    color : #d8c2a4
    }
    #typeB p {
    color : #ffffff
    }

#typeC {
padding : 1.5em 1.5em;
margin-bottom : 0em;
background-color : #f9f9f9
}


/* @end */

/* @group Footer */

footer {
padding : 1.5em 0;
color : #555555;
text-align : center;
background-color : #E3F1E4;
/*background : url(../images/footer_bg.png);*/
}

/* @end */

/*768px*/
@media screen and (min-width : 768px){

html{ font-size : 87.5%} /*レスポンシブタイプセッティングの指定*/
#contents {
	 text-align : left;
}
#contents #main,
#contents #sub {
/*float : left;*/
margin : 0 1.0416667% }

}

/*1024px*/
@media screen and (min-width : 1024px) {

	html{ font-size : 100%} /*レスポンシブタイプセッティングの指定*/

	header {
	margin : 0 auto;
	/*1024px以上では幅を固定*/
		width : 960px
	}

	/* @group Nav */

	nav ul {
	width : 93.75%;/* 960/1024 */
	margin : 0 auto;
	/*1024px以上では幅を固定*/
		width : 960px
	}

	/* @end */

	/* @group Contents */

	#contents {
	overflow : hidden;
	/*float : left;*/
	width : 93.75%;
		/*1024px以上では幅を固定*/
		width : 960px
	}

	#contents #main,
	#contents #sub {
	/*float : left;*/
	margin : 0 1.0416667% }

	/*
	#contents #main { width : 64.5833333%}
	#contents #sub { width : 31.25%}
	*/

	/* @end */


	/* @group Footer */

	footer {
	/*float : left;*/
	width : 91.796875%; /*940/1024*/
	/*1024px以上では幅を固定*/
		width : 960px;
	margin : 0 auto}

	/* @end */

}
/*1024pxここまで*/