@charset "UTF-8";
/* CSS Document */


/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
}
	
	/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
}
	
/*===============================================
●smart.css  画面の横幅が640pxまで>>480
===============================================*/
@media screen and (max-width:480px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
}

/*568px*/
@media only screen
and (min-device-width:320px)
and (max-device-width:568px) {
}

/*===============================================
●body
===============================================*/
	a.t { text-decoration:none; color:#ff66ff; background-color: green;}
a.t:hover, a.active{ text-decoration:underline; color:#ff66ff;background-color: #D9FF78; }

a.s { text-decoration:none; color:#ffffff; background-color: #CAF2F9;}
a.s:hover, a.active{ text-decoration:none; color:#7063EA;background-color: #CAF2F9; }
s-active{ text-decoration:none; color:#7063EA;background-color: #CAF2F9; }
 
a.w {  color: #ffffff;text-decoration: none;background-color: #94CEAB; }
a.w:hover {  color: #666666; text-decoration: none;background-color: #94CEAB; }

	
a.w2 {  color: #339933;text-decoration: none}
a.w2:hover  a.active{  color: #ff66ff; text-decoration: none}
	

body {
	font-family:Verdana, Arial, Helvetica, sans-serif,ヒラギノ角ゴ Pro W3,Osaka－等幅, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic, MS UI Gothic, ＭＳ ゴシック, MS Gothic, Osaka-mono, monospacesans-serif;
	font-size:12px;
}

/*===============================================
end ●body
===============================================*/	
		
/*===============================================
● 外枠　midori色 #80ba8f
===============================================*/			

.marumarubox{
    min-width: 320px;
    width:90%;

    background:#80ba8f;
	border-radius: 20px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-top: 30px;
	margin-left: auto;
}

@media screen and (max-width: 768px){
.marumarubox{
    background:#80ba8f;
	border-radius: 20px;
	
}
}
@media screen and (max-width:480px){
.marumarubox{
    background:#80ba8f;
	border-radius: 20px;
}	
}

@media screen and (max-width:320px){
.marumarubox{
    background:#80ba8f;
	border-radius: 20px;
		margin-right: auto;
		margin-left: auto;}	
	.marumarubox{
    min-width: 300px;
    width:80%;

}
	}
	
/*===============================================
end ● 外枠　
===============================================*/			

/*===============================================
● 中枠　 #CAF2F9
===============================================*/	
/*中枠*/
.container {
	width: 85%;
	height: auto;
	background-color:#ffffff;
	margin-right: auto;
	margin-bottom: 20px;
	margin-top: 20px;
	margin-left: auto;
	 border-radius: 10px;
}
@media screen and (max-width: 768px){
.container {
background-color:#ffffff;
		padding-top: 0px;
}
}
@media screen and (max-width:480px){
.container {
background-color:#ffffff;	
	padding-top: 0px;
}
}




/*中枠 navi*/
.container_navi {
	width: 85%;
	height: auto;
	background-color:#CAF2F9;
	margin-right: auto;
	margin-bottom: 20px;
	margin-top: 20px;
	margin-left: auto;
	 border-radius: 0px;
}
@media screen and (max-width: 768px){
.container_navi {
background-color:#CAF2F9;
		padding-top: 0px;
}
}
@media screen and (max-width:480px){
.container_navi  {
background-color:#CAF2F9;	
	padding-top: 0px;
}
}





/*中枠*/
.container_foto {
	width: 85%;
	height: auto;
	background-color:#CAF2F9;	margin-right: auto;
	margin-bottom: 20px;
	margin-top: 20px;
	margin-left: auto;
	
	 border-radius: 20px;
}
@media screen and (max-width: 768px){
.container_foto {
background-color:#CAF2F9;
		padding-top: 0px;
}
}
@media screen and (max-width:480px){
.container_foto{
background-color:#CAF2F9;
	padding-top: 20px;
}
}




/*中枠 logo*/
.container_logo {
	width: 85%;
	height: auto;
	background-color:#ffffff;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 20px;
	margin-left: auto;
	 border-radius: 10px;
		  padding-top: 20px;
}
	
@media screen and (max-width: 768px){
.container_logo {
				  padding-top: 25px;
}
}	
@media screen and (max-width:480px){	
.container_logo {
			  padding-top: 20px;
}
}	

/*中枠 top fotos*/

.container_top_fotos {
	width: 85%;
	height: auto;
	background-color:#D9FF78;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: auto;
	  padding-top: 0px;
	 border-radius: 10px;
}
	.container_top_fotos  img {width:100%; }

@media screen and (max-width: 768px){
.container_top_fotos {
	background-color:#D9FF78;

}
	.container_top_fotos  img {width:10%; 
}
}	

@media screen and (max-width:480px){	
.container_top_fotos {
	background-color:#D9FF78;
}
}	

/*中枠 top  logo maru*/
.container_top_fotos2 {
	width: 85%;
	height: auto;
	background-color:#D9FF78;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: auto;
	 border-radius: 10px;
		  padding-top: 20px;
}

	.container_top_fotos2  img {width:15%;
		 text-align: center;
}

@media screen and (max-width: 768px){
	.container_top_fotos2  img {width:20%;
		 text-align: center;
			margin-top: 0px;
				  padding-top: 0px;

}
	.container_top_fotos2 {
	margin-top: 0px;
						  padding-top: 10px;
		}	
}	
@media screen and (max-width:480px){	
	.container_top_fotos2  img {width:20%;
		 text-align: center;
			margin-top: 0px;
				  padding-top: 0px;
}
		.container_top_fotos2 {
	margin-top: 0px;
						  padding-top: 10px;
		}	
}	

/*===============================================
end ● 中外枠　空色
===============================================*/	

/*===============================================
●国旗　NAV
===============================================*/	
.main-nav {
  display: flex;
  justify-content: flex-end;
}
	
	.main-nav a {
  margin: 5px;
  border-radius: 0px;
  background: #D9FF78;
  color: #fff;
  display: block;
  padding: 0px;
  text-decoration: none;

}
		

.main-nav .logo {
  background: #D9FF78;

}

	.main-nav img {width:100%; }
	
ul.main-nav {
   margin: 0px; /* ul内部の左端余白を消す(IE) */
   padding: 0px; /* ul内部の左端余白を消す(Fx,Op) */
}
ul.main-nav li {
   list-style-type: none; /* 先頭記号を消す */
   margin: 0.1em 0em 0.1em 0em; /* 各項目周囲の余白 */
   border: 0px gray solid; /* 項目の枠線 */
   padding: 0px; /* 枠線と内容の距離をゼロに */
}

@media screen and (max-width: 768px){
	.main-nav img {width:80%; }
}	
@media screen and (max-width:480px){	
	.main-nav img {width:70%; }	
}
	
/*===============================================
end●国旗　NAV
===============================================*/	

	
/*===============================================
● top NAVI  #94CEAB 緑
===============================================*/		

#menu {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
		
}
#menu li{
	display: block;
	float: left;
	width: 20%;
	margin: 0;
	padding: 0;

}
#menu li a {
	display: block;
	padding: 10px 0 10px;
	background-color: #94CEAB;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	border-right:0px solid #339933;
}
#menu li:last-child a{
	border: none;
}


#menu li a:hover{
	background: #A3E5EF;
}
#menu li a:active{
	background: #8E94E8;
		color: #ffffff;
}

#toggle {
	display: none;
}

	/* 画面サイズが768px以下の場合に適用 */
@media only screen and (max-width: 768px) {
	#menu li {
		width: 50%;
		border-bottom: 1px solid #ffffff;
	}
}

/* 画面サイズが480px以下の場合に適用 */
@media only screen and (max-width: 480px) {
	#menu {
		display: none;
	}
	#menu li {
		width: 100%;
		
	}
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #76d1dd;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 20px 0 20px;
		border-bottom: 1px solid #76d1dd;
		color:#339933;
		text-align: center;
		text-decoration: none;

	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: #FFF;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 6px;
		background: #76d1dd;
	}
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}
}
	

/*===============================================
end ● top NAVI
===============================================*/			

/*===============================================
● contaner_title
===============================================*/			

/*タイトル */
.container_title {
	width: 85%;
	height: auto;
	background-color:#ffffff;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 0px;
			margin-left: auto;
	 border-radius: 10px;
		  padding-top: 3px;
		  padding-bottom:3px;
}
.container_title h2 {
	color: #777776;
	font-size:18px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	margin-left: 20px;
	margin-right:20px;
	line-height:1em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}

	
@media screen and (max-width: 768px){
.container_title {
				  padding-top: 5px;
}
}	
@media screen and (max-width:480px){	
.container_title {
			  padding-top: 5px;

}
}	



/*===============================================
end ●contaner_title
===============================================*/			




/*===============================================
●contaner_haupt
===============================================*/			

/*本文 */
.container_haupt {
	width: 85%;
	height: auto;
	background-color:#ffffff;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 10px;
			margin-left: auto;
	 border-radius: 10px;
		  padding-top: 3px;
		  padding-bottom:3px;
}
.container_haupt  h2 {
	color: #777776;
	font-size:18px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:0px;
	margin-bottom:5px;
	margin-left: 10px;
	margin-right:10px;
	line-height:2em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}
.container_haupt  h3 {
	color: #365c99;
	font-size:15px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	margin-left: 10px;
	margin-right:10px;
	line-height: 1em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}

.container_haupt  h5 {
	color: #365c99;
	font-size:13px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	margin-left: 10px;
	margin-right:10px;
	line-height:1em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}


.container_haupt  h4 {
	color: #777776;
	font-size:13px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	margin-left: 10px;
	margin-right:10px;
	line-height:2em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}

	
@media screen and (max-width: 768px){
.container_haupt  {
				  padding-top: 25px;
}
}	
@media screen and (max-width:480px){	
.container_haupt {
			  padding-top: 20px;
}

}	


/*本文 */
.container_haupt2{
	width: 85%;
	height: auto;
	background-color:#ffffff;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 10px;
			margin-left: auto;
	 border-radius: 10px;
		  padding-top: 3px;
		  padding-bottom:3px;
}
.container_haupt2 h2 {
	color: #777776;
	font-size:18px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:0px;
	margin-bottom:5px;
	margin-left: 10px;
	margin-right:10px;
	line-height:2em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}
.container_haupt2 h3 {
	color: #365c99;
	font-size:15px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	margin-left: 10px;
	margin-right:10px;
	line-height: 1em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}

.container_haupt2 h5 {
	color: #365c99;
	font-size:13px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	margin-left: 10px;
	margin-right:10px;
	line-height:1em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}


.container_haupt2 h4 {
	color: #777776;
	font-size:13px;
	background-color: #ffffff;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
	margin-bottom:5px;
	margin-left: 10px;
	margin-right:10px;
	line-height:2em;
	
	border-bottom-width: 0px; 
	border-bottom-style:none;
    border-bottom-color: #339933;
}

	
@media screen and (max-width: 768px){
.container_haupt2 {
				  padding-top: 25px;
}
}	
@media screen and (max-width:480px){	
.container_haupt2 {
			  padding-top: 20px;
}

}	





/*===============================================
end ●contaner_haupt
===============================================*/			





/*===============================================
● info
===============================================*/			

.info{
	clear: both;
	text-align: reft;	
	color: #365c99;
	border-top-width: 0px;
	border-top-style: dashed;
	border-top-color: #D5D5D5;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
	border-top: 0px solid #cccccc;
	}
		
.info2{
	clear: both;
	text-align: reft;	
	color: #365c99;
	border-top-width: 0px;
	border-top-style: dashed;
	border-top-color: #D5D5D5;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	border-top: 0px solid #cccccc;
	}
		
		
		.info5{
	clear: both;
	 color: #999999;
	font-size:10px;
	text-align: left;
	border-top: 0px solid #999999;
	padding-top: 5px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	
	}
	

/*===============================================
end● info
===============================================*/			

	
/*===============================================
● docu  #D9FF78
===============================================*/		


/*ドキュメント*/


.docu {
	width:100%;/* IEバグ対策 */
	height:auto;
	margin-bottom:0px;
	padding-bottom: 0px;
	margin-left:auto;
		margin-right:auto;
	background-color: background-color;
	border: 0px dotted #ffccff;
		padding: 0px 0px 0px 0px;

}

.docu  h2 {

	color: #339933;
	font-size:16px;
	background-color: #D9FF78;
	padding-left: 0px;
		padding-right: 0px;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:0px;
	margin-left: 20px;
	margin-right:20px;
	line-height:1em;
	
	border-bottom-width: 1px; 
	border-bottom-style:dotted;
    border-bottom-color: #339933;
}

.docu h3 {
	color: #666666;
	font-size:14px;
	line-height: 1.5em;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 10px;
}



.docu  h5 {
	color: #339933;
	font-size:13px;
	background-color: #D9FF78;
	padding-left: 0px;
	padding-top:1px;
	padding-bottom:0px;
	margin-top:3px;
	margin-left: 0px;
	margin-right:5px;
	line-height:0em;
	
	border-bottom-width: 1px; 
	border-bottom-style:dotted;
    border-bottom-color: #D9FF78;
}


/*===============================================
end ● docu
===============================================*/	

	
/*===============================================
● ドキュメント　メイン　animal
===============================================*/	

main {
  display: flex;
  flex-wrap: wrap;	
  width:100%;
  padding: 0px;
	margin-left:auto
	margin-right:auto;
	 background-color:#ffffff;
	border-radius: 10px / 10px;
	
}

main div.animal {
  width: calc(25% - 10px);
  margin: 5px;
 background-color:#ffffff;
border-radius: 10px 10px 10px 10px /10px 10px 10px 10px;
}

main div.animal2 {
  width: calc(100% - 0px);
	margin-left:auto;
	margin-right:auto;
 background-color:#ffffff;
border-radius: 0px 0px 10px 10px / 0px 0px 10px 10px;
}	
	main div.animal2 img {width:100%; }

	main div.animal3 {
	width:90%;
	margin-left:auto;
	margin-right:auto;
 background-color:#E8ECED	;
		padding-right: 10px;
	padding-left: 10px;
border-radius: 0px 0px 10px 10px / 0px 0px 10px 10px;
}

}
main div.animal2 img {width:100%; }

@media screen and (max-width: 768px){
main div.animal {
  width: calc(50% - 20px);
	  margin: 10px;
}	
}	
@media screen and (max-width:480px){	
main div.animal {
  width: 100%;
}
}