@charset UTF-8;
/* ================================================ */
/*               全体設定                */
/* ================================================ */

body {
	font-size: 16px;
	line-height: 1.6;
	background-color: #f7f8f3;
	color: #333; 
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif, Verdana, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

/* ================================================ */
/*全体ヘッダー*/
/* ================================================ */
/*タブレット*/
	@media(max-width: 960px){
		header{
			height: 162px;
		}
		.site-tittle img {
				width: 80px;
				height: 80px;
				padding: 20px 0 10px 0;
				margin-left: 30px;
		}
		.nav-item {
			float: left;
			width: 3%;
			margin-right: 50px;
		}
		.nav-item-01 {
			margin-left: 10px;
			margin-right: 120px
	}
		.nav-item-03, .nav-item-05 {
			margin-right: 60px;
			margin-left: 50px;
		}

	}

	/*スマートフォン*/
	@media(max-width: 560px){
		header{
			height: 165px;
		}
		#topics_list {
			font-size: 10px;
		}
		.site-tittle img {
			width:70px;
			height:70px;
			padding: 20px 0 5px 0; 
			margin-left: 10px;
		}
		.nav {
			display: none;
		}
		.hamburger {
			display: block;
		}
		.globalMenuSp {
			display: block;
		}
		/*　ハンバーガーボタン　*/
		.hamburger {
		  display : block;
		  position: fixed;
		  z-index : 3;
		  right: 80px;
		  top   : 30px;
		  width : 42px;
		  height: 42px;
		  cursor: pointer;
		  text-align: center;
		}
		.hamburger span {
		  display : block;
		  position: absolute;
		  width   : 30px;
		  height  : 2px ;
		  left    : 6px;
		  background : #555;
		  -webkit-transition: 0.3s ease-in-out;
		  -moz-transition   : 0.3s ease-in-out;
		  transition        : 0.3s ease-in-out;
		}
		.hamburger span:nth-child(1) {
		  top: 10px;
		}
		.hamburger span:nth-child(2) {
		  top: 20px;
		}
		.hamburger span:nth-child(3) {
		  top: 30px;
		}

		/* ナビ開いてる時のボタン */
		.hamburger.active span:nth-child(1) {
		  top : 16px;
		  left: 6px;
		  background :#fff;
		  -webkit-transform: rotate(-45deg);
		  -moz-transform   : rotate(-45deg);
		  transform        : rotate(-45deg);
		}

		.hamburger.active span:nth-child(2),
		.hamburger.active span:nth-child(3) {
		  top: 16px;
		  background :#fff;
		  -webkit-transform: rotate(45deg);
		  -moz-transform   : rotate(45deg);
		  transform        : rotate(45deg);
		}

		nav.globalMenuSp {
		  position: fixed;
		  z-index : 2;
		  top  : 0;
		  left : 0;
		  color: #fff;
		  background: rgba(0,0,0,0.7);
		  text-align: center;
		  width: 100%;
		  opacity: 0;
		  visibility: hidden;
		  transition: opacity .6s ease, visibility .6s ease;
		}
		nav.globalMenuSp ul {
		  margin: 0 auto;
		  padding: 0;
		  width: 100%;
		}

		nav.globalMenuSp ul li {
		  list-style-type: none;
		  padding: 0;
		  width: 100%;
		  transition: .4s all;
		}
		nav.globalMenuSp ul li:last-child {
		  padding-bottom: 0;
		}
		nav.globalMenuSp ul li:hover{
		  background :#ddd;
		}

		nav.globalMenuSp ul li a {
		  display: block;
		  color: #fff;
		  padding: 1em 0;
		  text-decoration :none;
		}
		/* このクラスを、jQueryで付与・削除する */
		nav.globalMenuSp.active {
		  opacity: 100;
		  visibility: visible;

		}
	}

/* ================================================ */
/*メインコンテンツ-home.html*/
/* ================================================ */
/*タブレット*/
	@media(max-width: 1024px){
			#slider {
				height: 300px;
			}
			#carousel img {
				width: 400px;
				height: 300px;
			}
			#slider:after {
				/*background-size: 110%;
				margin: -39% 0;*/
				display: none;
			}
	}
	@media(max-width: 960px){
			#slider {
				height: 200px;
			}
			#carousel img {
				width: 300px;
				height: 200px;
			}
			#slider:after {
				margin: -58% 0;
			}
			.menu-list {
				float: left;
				margin-left: 20px;
			}
			.menu-list li {
				width: 30%;
			}
			.menu-list img {
				width: 80%;
			}
			.menu {
				height: 200px;
			}
			.news h2, .calender-sec h2 {
				margin-right: 120px;
			}
			#calender {
				position: static;
				margin-bottom: 50px;
			}
		}
		@media(max-width: 834px){
			#slider:after {
				margin: -52% 0;
			}
		}

	/*スマートフォン*/
	@media(max-width: 560px){
		#slider {
			height: 150px;
		}
		#carousel img {
			width: 200px;
			height: 150px;
		}
		#slider:after {
			margin: -84% 0;
		}
		.menu {
			height: 550px;
		}
		.menu-list {
			clear: left;
			margin-bottom: 0px;
		}
		.menu-list li {
			margin-left: 20px;
			margin-bottom: 30px;
			width: 70%;
		}
		.menu-list img {
			width: 70%;
		}
		.news img, .calender-sec img {
			width: 80%;
		}
		#topics_list {
			width: 90%;
			font-size: 10px;
		}
		.tittle_voice img {
			width: 65%;
		}
		.calender-sec {
			margin-bottom: 30px;
		}
		#calender iframe {
			width: 90%;
			height: 500px;
		}
		.date {
			clear: left;
		}

	}
	@media(max-width: 540px){
		#slider:after {
			margin: -88% 0;
		}
	}

	@media(max-width: 450px){
		#slider {
			height: 100px;
		}
		#carousel img {
			width: 180px;
			height: 100px;
		}
		#slider:after {
			margin: -110% 0;
			background-size: 100%;
		}
		.menu {
			height: 720px;
		}
	}
	@media(max-width: 414px){
		#carousel img {
			width: 170px;
		}
		#slider:after {
			margin: -120% 0;
			background-size: 105%;
		}
		.menu {
			height: 650px;
		}
	}
	@media(max-width: 375px){
		#carousel img {
			width: 130px;
		}
		#slider:after {
			margin: -134% 0;
		}
	}
	@media(max-width: 360px){
		#slider:after {
			margin: -139% 0;
		}
		.menu {
			height: 550px;
		}
	}
	@media(max-width: 320px){
		#slider:after {
			margin: -158% 0;
			background-size: 130%;
		}
		.menu {
			height: 450px;
		}
	}

	@media(max-width: 280px){
		#slider:after {
			margin: -179% 0;
			background-size: 135%;
		}
		.menu {
			height: 500px;
		}
		#calender iframe {
			width: 270px;
			height: 300px;
		}
	}

/* ================================================ */
/*メインコンテンツ-about.html*/
/* ================================================ */
/*タブレット*/
@media(max-width: 960px){
	.greeting p{
		font-size: 14px;
	}
	.about p {
		font-size: 14px;
	}
	.feature-contents-1 h3, .feature-contents-3 h3{
		margin-top: 30px;
		margin-left: 40px;
		text-align: left;
		font-weight: bold;
	}
	.feature-contents-2 h3 {
		margin-top: 30px;
		margin-left: 50px;
		text-align: left;
		font-weight: bold;
	}
	.feature-contents-1 p, .feature-contents-3 p {
		margin-left: 40px;
		font-size: 11px;
		text-align: left;
	}
	.feature-contents-2 p {
		margin-left: 50px;
		font-size: 11px;
		text-align: left;
	}
	.feature-image-4 img {
		position: relative;
		left: 200px;
		width: 30%;
	}
	.sum p {
		font-size: 12px;
	}
	.contents p{
		font-size: 12px;
		margin-left: 20px;
	}


}

/*スマートフォン*/
@media(max-width: 560px){
	.greeting h1 img, .greeting h2 img {
		width: 50%;
	}
	.greeting p{
		font-size: 10px;
	}
	.about-tittle {
		position: relative;
		left: -30px;
	}
	.about-tittle img {
		width: 80%;
	}
	.about p {
		font-size: 10px;
	}
	.details p {
		margin-bottom: 20px;
	}
	.feature-sec {
		margin-top:20px;
	}
	.feature-image	{
		margin-left: 0px;
		width: 25%;
	}
	.feature-image img {
		width: 90%;
	}
	.feature-contents-1 h3 {
		font-size: 12px;
		margin-top: 10px;
		margin-left: 5px;
		text-align: left;
		font-weight: bold;
	}
	.feature-contents-3 h3{
		font-size: 12px;
		margin-top: 10px;
		margin-left: 5px;
		text-align: left;
		font-weight: bold;

	}
	.feature-contents-2 h3 {
		font-size: 12px;
		margin-top: 10px;
		margin-left: 15px;
		text-align: left;
		font-weight: bold;
	}
	.feature-contents-1 p, .feature-contents-3 p {
		margin-left: 5px;
		font-size: 7px;
		text-align: left;
	}
	.feature-contents-2 p {
		margin-left: 15px;
		font-size: 7px;
		text-align: left;
	}
	.feature-image-4 img {
		position: relative;
		left: 100px;
		width: 25%;
	}
	.sum h3 {
		font-weight: bold;
		font-size: 14px;
	}
	.sum p {
		font-size: 7px;
	}
	.contents img {
		width: 90%;
	}
	.contents p{
		font-size: 8px;
		margin-left: 10px;
	}
}
@media(max-width: 320px){
	.greeting p{
		font-size: 8px;
	}
	.about p {
		margin-top: 0px;
		font-size: 8px;
	}
	.feature-contents-1 p, .feature-contents-3 p {
		font-size: 8px;
	}
	.feature-contents-2 p {
		font-size: 8px;
	}
	.sum h3 {
		font-weight: bold;
		font-size: 11px;
	}
	.sum p {
		font-size: 6px;
	}
	.contents p{
		font-size: 6px;
		margin-left: 5px;
	}
}



/* ================================================ */
/*メインコンテンツ-365days.html*/
/* ================================================ */
/*タブレット*/
@media(max-width:960px){
	.theme {
		height: 500px;
		margin-top: 30px;
	}
	.mainpic img{
		width: 90%;
	}
	.theme-block1 {
		position: relative;
	}
	.theme-block1 h2 {
		padding-left: 0px;
	}
	.theme-block1 p {
		margin-left: 0px;
		padding-top: 5px;
		font-size: 12px;
	}
	.dec {
		position: absolute;
		top: 95px;
		left: 310px;
	}
	.theme-block2 {
		margin-top: 60px;
	}
	.theme-block2 div {
			width: 32%;
	}
	.theme-block2 img {
		width: 100%;
	} 
	.sm-dec {
		position: absolute;
		top: 105px;
		left: 260px;
		width: 230px;
	}
	.fa-dec {
		position: absolute;
		top: 75px;
		left: 315px;
		width: 120px;
	}
	.wi-dec {
		position: absolute;
		top: 40px;
		left: 310px;
	}

}

/*スマートフォン*/
@media(max-width:560px){
	.theme {
		height: 1100px;
	}
	.theme-block1, .theme-block2 {
		display: block;
	}
	.theme-block1 h2 {
		padding-left: 50px;
	}
	.theme-block1 p {
		padding-left: 60px;
		font-size: 10px;
	}
	.theme-block1 {
		position: relative;
	}
	.dec, .sm-dec,  .fa-dec, .wi-dec{
		display: none;
	}
	.theme-block2 div {
			width: 100%;
	}
	.theme-block2 img {
		width:70%;
	} 
	.main h1 {
		background-size: 80%;
	}
	.top-tittle img {
		width: 55%;
		background-position: 35% 70%;
	}
}
/* ================================================ */
/*メインコンテンツ-introduction.html*/
/* ================================================ */
/*タブレット*/
@media(max-width: 960px){
	.introduction {
		margin-left: 15px;
	}
	.introduction h3 {
		font-size: 12px;
	}
	.introduction-01 img, .introduction-02 img, .introduction-03 img, .introduction-04 img {
		width: 80%;
	}
	.introduction-text-01 p, .introduction-text-02 p, .introduction-text-03 p, .introduction-text-04 p {
		font-size: 8px;
	}
	.intro-animal {
		margin-left: 50px;

	}
	.officer p{
		font-size: 8px;
		text-align: left;
		margin-left: 200px;
	}


}

/*スマートフォン*/
@media(max-width: 560px){
	.main h1 {
		margin-left: 0;
	}
	.second-tittle img {
		width: 50%;
	}
	.introduction-01, .introduction-02, .introduction-03, .introduction-04 {
		display: block;
	}
	.introduction-01 img, .introduction-02 img, .introduction-03 img, .introduction-04 img {
		width: 40%;
	}
	.introduction-text-01 p, .introduction-text-02 p, .introduction-text-03 p, .introduction-text-04 p {
		font-size: 6px;
	}
	.introduction-text-01, .introduction-text-02, .introduction-text-03, .introduction-text-04, .introduction-text-05, .introduction-text-06,  .introduction-text-07 {
		text-align: left;
	} 
	.introduction-text-01 a, .introduction-text-02 a, .introduction-text-03 a, .introduction-text-04 a {
		/*font-size: 6px;*/
	}
	.intro-animal {
		margin-left: 0px;
	}
	.animal-pic1 img, .animal-pic2 img, .animal-pic3 img {

	}
	.animal-text h3{
		font-size: 11px;
		text-align: left;
	}
	.officer p{
		font-size: 8px;
		text-align: left;
		margin-left: 30px;
	}

}

/* ================================================ */
/*メインコンテンツ-program.html*/
/* ================================================ */
/*タブレット*/
@media(max-width: 960px){



}

/*スマートフォン*/
@media(max-width: 560px){
	.tittle-program img{
		width: 50%;
	}
	.program-pic {
		margin: 30px 0px;
	}
	.program h3 {
		font-size: 13px;
	}
	.program p {
		font-size: 10px;
	}
	.btn-page a{
		font-size: 10px;
	}
	.attention p {
		text-align: left;
		font-size: 10px;
	}


}
/* ================================================ */
/*メインコンテンツ-contact.html*/
/* ================================================ */
/*タブレット*/
@media(max-width: 960px){
	iframe {
		width: 450px;
		height: 300px;
	}
	label {
		display: inline-block;
		font-size: 16px;
	    font-weight: bold;
	    min-height: 1px;
	    position: relative;
	}
	 label span {
	    position: absolute;
	    right: -30px;
	    top: 0px;
	}
	



}

/*スマートフォン*/
@media(max-width: 560px){
	.main-contact img {
		width: 60%;
	}
	.location-wrapper {
		display: block;
	}
	.location-info {
		width: 100%;
		margin-left: 20px;
	}
	.location-info p {
		padding: 12px 10px;
	}
	.location-map {
		width: 100px;
		margin-left: 20px;
	}
	iframe {
		width: 350px;
		height: 200px;
	}
	.contact-form p {
		font-size: 12px;
	}
	label {
		display: inline-block;
		font-size: 12px;
	    font-weight: bold;
	    width: 100px;
	    float: left;
	    min-height: 1px;
	    position: relative;
	}
	 label span {
	    position: absolute;
	    right: -30px;
	    top: 0px;
	}
	input[type=text], input[type=e-mail], div textarea, div select{
	    min-width: 170px;
	    max-width: 200px;
	    height: 28px;
	}
	.contact-attention p {
		padding-bottom: 10px;
		font-size: 10px;
		text-align: left;
	}

}
@media(max-width: 414px){
	.location-info {
		margin-left: 10px;
	}
		.location-info p {
		padding: 12px 10px;
	}
	.location-map {
		margin-left: 10px;
	}

}
@media(max-width: 360px){
	.location-info {
		margin-left: 0px;
	}
		.location-info p {
		padding: 12px 0px;
	}
	.location-map {
		margin-left: 0px;
	}

}
@media(max-width: 320px){
	input[type=text], input[type=e-mail], div textarea, div select{
	    min-width: 90px;
	    max-width: 160px;
	    height: 28px;
	    margin: 0 0px;	
	}
	iframe {
		width: 310px;
		height: 190px;
	}
}
@media(max-width: 280px){
	label {
		font-size: 10px;
	    font-weight: bold;
	    width: 100px;
	    float: left;
	    text-align: left;
	    min-height: 1px;
	    position: relative;
	}
	 label span {
	    position: absolute;
	    right: 5px;
	    top: -5px;
	}
	input[type=text], input[type=e-mail], div textarea, div select{
	    min-width: 90px;
	    max-width: 120px;
	    height: 20px;
	    margin: 0 0px;	
	}
	iframe {
		width: 270px;
		height: 190px;
	}
}
/* ================================================ */
/*メインコンテンツ-facility.html*/
/* ================================================ */



/* ================================================ */
/*メインコンテンツ-admission.html*/
/* ================================================ */
/*タブレット*/
@media(max-width: 960px){
	.detail {
		position: absolute;
		top: 110px;
		left: 150px;
	}
	.admission-attention p {
		font-size: 11px;
	}
	.btn-page {
		width: 20%;
	}

}

/*スマートフォン*/
@media(max-width: 560px){
	.admission-attention p {
		font-size: 8px;
	}
	.fee-table img {
		width: 90%;
	}
	.btn-page {
		width: 20%;
	}
	.detail {
		display: none;
	}
	.detail2 {
		display: block;
	}
	.detail2 p {
		font-size: 6px;
		position: absolute;
		top: 120px;
		left: 70px;
	}
	.admission-attention p {
		font-size: 8px;
	}
}
@media(max-width: 375px){
	.detail2 p {
		position: absolute;
		top: 120px;
		left: 30px;
	}
}
@media(max-width: 360px){
	.detail2 p {
		position: absolute;
		top: 120px;
		left: 20px;
	}
}
@media(max-width: 320px){
	.detail2 p {
		font-size: 4px;
		position: absolute;
		top: 120px;
		left: 0px;
	}
}
/* ================================================ */
/*フッター*/
/* ================================================ */
/*タブレット*/
@media(max-width: 960px){



}

/*スマートフォン*/
@media(max-width: 560px){
	footer {
		height: 120px;
	}
	.footer-tittle img {
		width: 80%;
	}
	.address {
		padding-top: 10px;
		float: left;
		margin-left: 10px;
	}
	.footer-nav {
		display: none;
	}
}

@media(max-width: 280px){
	.address h4 {
		font-size: 12px;
	}
	.address p {
		font-size: 10px;
	}
}