/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

*{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html{
	line-height:1.6;	
	letter-spacing: 0.1em;
}

body{
	width:100%;
}

img{
	max-width:100%;
}

a{
	text-decoration:none;
	color:#333;
}

p{
	line-height:2.3;
}


#wrap{
	width:100%;
	position:relative;
}

#bgimg{
	max-width:100%;
	vertical-align: bottom;
}

#anilist{
	list-style:none;
	padding:0;
	margin:0;
}

.ani{
	position:absolute;
	z-index:100;
	line-height:1.7;
}

.ani:hover{
	z-index:110;
}

.ani a{
	display:block;
	background-color:#ff6b81;
	border-radius: 10px;
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	transition-duration: 0.2s;  
    transition-timing-function: linear;
	padding:0.2rem;
	border-radius: 5px;
	color:#FFF;
}
.ani img{
	vertical-align: bottom;
}

.ani a:hover{
	background-color:#ff4757;
}

.ani img{
	display:none;
	width:8vw
}

.ani a:hover img{
	display:inline;
}

.ani h3{
	font-size:0.8vw;
	padding:0;
	margin:0;
}

.ani.small h3{
	font-size:0.55vw;
}

.ani h3 span{
	background-color:#FFF;
	display:inline-block;
	padding:1px 3px 0 3px;
	letter-spacing: 0;
	line-height:1.2;
	border-radius: 3px;
	margin-right:0.3rem;
	font-size:0.7vw;
	color:#e67e22;

}

/*アフリカゾウ*/
#n01{
	left:5.4%;
	top:19.5%;
}

/*ムネアカカンムリバト*/
#n02{
	left:21.8%;
	top:17.5%;
}

/*ニホンジカ*/
#n03{
	left:1%;
	top:35%;
}

/*フンボルトペンギン*/
#n04{
	left:22.5%;
	top:62%;
}

/*ニホンザル*/
#n05{
	left:27%;
	top:52.5%;
}

/*リスザル*/
#n06{
	left:31.5%;
	top:71%;
}

/*キンシコウ*/
#n07{
	left:62%;
	top:76.5%;
}

/*ホッキョクグマ*/
#n08{
	left:30.5%;
	top:63.5%;
}

/*大水槽*/
#n09{
	left:67%;
	top:54%;
}

/*モグラ*/
#n10{
	left:67%;
	top:56.5%;
}

/*クロサイ*/
#n11{
	left:46%;
	top:71%;
}

/*ライオン*/
#n12{
	left:44.5%;
	top:87.5%;
}

/*カンガルー*/
#n13{
	left:14%;
	top:47.5%;
}

/*タッチ愛ランド*/
#n14{
	left:50%;
	top:24.4%;
}

/*アルマジロ*/
#n15{
	left:21.8%;
	top:14.5%;
}

/*ワオキツネザル*/
#n16{
	left: 13.3%;
    top: 33.7%;
}

/*クジャク*/
#n17{
	left: 39.5%;
    top: 50%;
}

/*花の休息所*/
#n18{
	left: 87%;
    top: 24%;
}
#n18 a{
	background-color:#be2edd;
}
#n18 a span{
	color:#e056fd;
}

/*花園*/
#n19{
	left: 71.5%;
    top: 26.5%;
}
#n19 a{
	background-color:#be2edd;
}
#n19 a span{
	color:#e056fd;
}

#mainheader{
	background-image:url(img/headerbg.jpg);
	background-size:cover;
	background-position:top center;
	position:relative;
}

#zoochlogo{
	width:150px;
	max-width:11%;
	position:absolute;
	left:0;
	top:0;
}

#inner-header{
	width:1440px;
	max-width:100%;
	margin:0 auto;
}

#mainlogo{
	display:block;
	width:600px;
	max-width:35%;
}

#box01{
	position:absolute;
	right:2%;
	top:40%;
	width:250px;
	font-size:16px;
	padding:0.2rem;
	font-weight:bold;
	border-radius: 10px;
	display:block;
	background-color:#FFF;
	text-align:center;
	border:2px solid #e74c3c;
	color: #e74c3c;
    transition-duration: 0.2s;  
    transition-timing-function: linear;  
}

#box01:hover{
	color:#FFF;
	background-color:#e74c3c;
}


#box02{
	position:absolute;
	right:calc(4% + 250px);
	top:40%;
	width:250px;
	font-size:16px;
	padding:0.2rem;
	font-weight:bold;
	border-radius: 10px;
	display:block;
	background-color:#FFF;
	text-align:center;
	border:2px solid #27ae60;
	color: #27ae60;
    transition-duration: 0.2s;  
    transition-timing-function: linear;  
}

#box02:hover{
	color:#FFF;
	background-color:#27ae60;
}

#linklist{
	padding:0;
	margin:0;
}

#linklist li{
	display:inline-block;
	position:absolute;
	line-height:1;
	z-index:100;
}


#linklist li a{
	display:inline-block;
	background-color:#D00003;
	color:#FFF;
	font-size:0.8vw;
	padding:6px 5px 4px 5px;
	border-radius: 3px;
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}

#linklist li a img{
	vertical-align:middle;
	margin-right:6px;
	margin-bottom:2px;
}

/*キリン*/
#ll01{
	top:31%;
	left:1%;
}

/*小ライオン*/
#ll02{
	left: 44.5%;
    top: 90%;
}

/*チンパンジー*/
#ll03{
    left: 50%;
    top: 60%;
}

/*オタリア*/
#ll04{
   left: 37%;
    top: 47.5%;
}

/*カピパラ*/
#ll05{	
    left: 18.8%;
    top: 57.2%;
}

/*キンシコウ*/
#ll06{
	left: 62%;
    top: 79%;
}

/*ホッキョクグマ*/
#ll07{
    left: 30.5%;
    top: 66%;
}

/*羊毛刈り*/
#ll08{
	left: 50%;
    top: 27%;
}

/*モグラ*/
#ll09{
	left: 67%;
    top: 59.1%;
}

#concept{
	padding:2.5rem;
	text-align:center;
	background-color:#00b0ec;
	color:#FFF;
	font-weight:bold;
	margin-bottom:-8vw;
}

#concept p{
	width:680px;
	max-width:95%;
	margin:0 auto;
	background-color:#FFF;
	padding:1.5rem;
	border-radius: 10px;
	color:#00b0ec;
	position:relative;
	z-index:30;
}

#sp_anilist{
	display:none;
}


@media screen and (max-width: 1707px) {

#mainlogo{
	margin-left:12%;
}

}

@media screen and (max-width: 1030px) {

#box01,#box02{
	font-size:12px;
	width:200px;
}

#box02{
	right:calc(4% + 200px);
}

}

@media screen and (max-width: 979px) {

#zoochlogo{
	display:none;
}

#bgimg{
	display:none;
}



.ani{
	position:static;
	width:48%;
	margin:1%;
}

#anilist{
	width:640px;
	max-width:100%;
	display:flex;
	flex-wrap: wrap;
	margin:0 auto;
}

#box01,
#box02{
	position:static;
	margin:0.5rem auto;
}

#mainheader{
	padding:0.5rem 0;
}

#mainlogo{
	padding:0;
	margin:0.5rem auto;
	width:95%;
	max-width:95%;
}

#linklist{

}

#linklist li{
	position:static;
	width:98%;
	margin:1%;
}
#linklist li a{
	display:block;
	font-size:5vw;
	padding:0.7rem 0.5rem;
	border-radius: 5px;
}

#linklist li a img{
	margin-right:0.5rem;
}

#wrap{
	background-color:#FFF3B8;
}

#sp_anilist{
	display:flex;
	flex-wrap: wrap;
	margin:0 auto;
	list-style:none;
	padding:1.5rem 0;
	text-align:center;
}

#anilist{
	display:none;
}

#sp_anilist li{
	width:48%;
	margin:1%;
	text-align:center;
}

#sp_anilist li a{
	display:block;
	background-color:#ff7979;
	color:#FFF;
	font-weight:bold;
	border-radius: 5px;
	width:260px;
	max-width:100%;
	margin:0 auto;
	padding:10px;
}

#sp_anilist li h3{
	margin:0;
	font-size:16px;
}

#sp_anilist li h3 span{
	font-size:0.95em;
	    background-color: #FFF;
    display: inline-block;
    padding: 1px 3px 0 3px;
    letter-spacing: 0;
    line-height: 1.2;
    border-radius: 3px;
    margin-right: 0.3rem;
    color: #e67e22;
}

#concept{
	margin-bottom:0;
}
#concept p{
	font-size:3vw;
	text-align:left;
	max-width:100%;
}


}
@media screen and (max-width: 640px) {
#sp_anilist li h3{
	font-size:3vw;
}
}