/* CSS Document */

@charset "utf-8";

* {
	margin:0px;
	padding:0px;
	border-style: none;
	font-family: "メイリオ";
	list-style-type:none;
	color: #666;
}

body {
	background-image: url(../img/background2.jpg);
	background-repeat: repeat-x;
	margin: 0 auto;
	position:relative;
}

#wrapper {
	width:960px;
	margin-top: 15px;
	margin-right: auto;
	margin-left: auto;
}

/*ヘッダー*/


#top { overflow:hidden; }

h1 { float: left; }

#top p {
	float: left;
	color: #999;
	text-align: left;
	display: block;
	font-weight: bold;
	margin-top: 20px;
	margin-left: 20px;
	font-size: 20px;
}

#information {
	float: right;
	margin-top: 20px;
}

/*ナビゲーションバー*/

nav ul {
	margin-right: -10px;
	padding-left: 0;
	overflow: hidden;
	list-style-type:none;
}

nav ul li {
	margin-top:15px;
	float: left;
	width: 188px;
	margin-right: 5px;
}

nav ul li a {
	display: block;
	overflow: hidden;
	padding-top: 60px;
	height: 0;
}

nav ul li#suizokukan a {
	background-image: url(../img/nav1.png);
	background-repeat: no-repeat;
}

nav ul li#about a {
	background-image: url(../img/nav2.png);
	background-repeat: no-repeat;
}

nav ul li#uranai a {
	background-image: url(../img/nav3.png);
	background-repeat: no-repeat;
}

nav ul li#goods a {
	background-image: url(../img/nav4.png);
	background-repeat: no-repeat;
}

nav ul li#inquiry a {
	background-image: url(../img/nav5.png);
	background-repeat: no-repeat;
}

#page_suizokukan nav ul li#suizokukan a, nav ul li#suizokukan a:hover {
	background-image: url(../img/nav1_hover.png);
	background-repeat: no-repeat;
}

#page_about nav ul li#about a, nav ul li#about a:hover {
	background-image: url(../img/nav2_hover.png);
	background-repeat: no-repeat;
}

#page_uranai nav ul li#uranai a, nav ul li#uranai a:hover {
	background-image: url(../img/nav3_hover.png);
	background-repeat: no-repeat;
}

#page_goods nav ul li#goods a, nav ul li#goods a:hover {
	background-image: url(../img/nav4_hover.png);
	background-repeat: no-repeat;
}

#page_inquiry nav ul li#inquiry a, nav ul li#inquiry a:hover {
	background-image: url(../img/nav5_hover.png);
	background-repeat: no-repeat;
}

/*フッター*/

#index .gotop{display:none;}

footer {
	text-align: center;
	margin: 15px;
	background-image: url(../img/footer.png);
	background-position: center;
	height: 222px;
	box-sizing:border-box;
	padding-top:100px;
	clear:both;
}

/*トップページのサブナビ*/

sub ul {
	margin-right: -30px;
	padding-left: 0;
	overflow: hidden;
	list-style-type:none;
}

sub ul li {
	margin-top:15px;
	float: left;
	width: 300px;
	height:300px;
	margin-right: 30px;
	position:relative;
}

sub ul li a {
	display: block;
	overflow: hidden;
}

.uranaianime {
	position:absolute;
	top: 70px;
	left: 90px;
	z-index:-1;
}

#uranaisub a img { transition: .8s; }

#uranaisub a:hover img:nth-child(2) { transform: translate(-80px, -40px); }

#uranaisub a:hover img:nth-child(3) { transform: translate(165px, 40px); }

#uranaisub a:hover img:nth-child(4) { transform: translate(120px, -30px); }

.suizokukananime {
	position:absolute;
	top: 60px;
	left: 90px;
	z-index:-1;
}

#suizokukansub a img { transition: .8s; }

#suizokukansub a:hover img:nth-child(2) {
	transform: translateY(60px);
	z-index:1;
}

/*ぶるぶるアニメ試作*/

	
		.buruburu:hover img {
	-webkit-animation-name: buruburu;
	animation-name: buruburu;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}
 @keyframes 
buruburu {  16.65% {
 -webkit-transform: skew(-12deg);
 transform: skew(-12deg);
}
 33.3% {
 -webkit-transform: skew(10deg);
 transform: skew(10deg);
}
 49.95% {
 -webkit-transform: skew(-6deg);
 transform: skew(-6deg);
}
 66.6% {
 -webkit-transform: skew(4deg);
 transform: skew(4deg);
}
 83.25% {
 -webkit-transform: skew(-2deg);
 transform: skew(-2deg);
}
 100% {
 -webkit-transform: skew(0);
 transform: skew(0);
}
}

/*ぶるぶるアニメ試作ここまで*/



/*オパシティ―ホバー*/

.opa:hover img{opacity:0.7;}




/*トップ以外のベース設定*/

#contents {
	text-align: center;
	margin-top:30px;
}

h2 {
	margin-top:15px;
	margin-bottom:15px;
}

h3 {
	font-size: 18px;
	margin-bottom:30px;
}

/*やわらか水族館について*/

#goaisatu{position:relative;}

#goaisatu p { font-size: 24px;
font-weight:bold; }

#goaisatu a {
	float: right;
	margin-bottom:-15px;
	margin-top:5px;
}

#goaisatu small{color:#000000;}

#go_setumei{position:absolute;
right:40px;
top:-95px;}

/*水生無脊椎動物とは*/
		
#text {
	text-align: center;
	width: 520px;
	margin-top: 15px;
	margin-left:0;
	float:left;
	
}

h5 {
	float:right;
	margin-top:15px;
	overflow:hidden;
}


#setumei{
	background-color: #FFF;
	border-radius: 20px;
	padding-left:5px;
	overflow:hidden;
}

/*水族館入口*/
#page_suizokukan #contents ul {
	margin-right: -30px;
	padding-left: 0;
	overflow: hidden;
	list-style-type:none;
}

#page_suizokukan #contents ul li {
	margin-top:15px;
	float: left;
	width: 300px;
	margin-right: 30px;
}

/*水族館共通*/

#pankuzu ul { list-style-type:none; }

#pankuzu ul li { display:inline-block; }

#pankuzu {
	margin-top:20px;
	margin-bottom:10px;
}

#inline-content1 img{width:100%;}

#inline-content2 img{width:100%;}

#inline-content3 img{width:100%;}

#inline-content4 img{width:100%;}

#inline-content5 img{width:100%;}

#inline-content6 img{width:100%;}

#inline-content7 img{width:100%;}

#inline-content8 img{width:100%;}

#inline-content9 img{width:100%;}


/*刺胞動物*/

.jump {
	margin-left:auto;
	margin-right:auto;
}

.jump ul {
	overflow: hidden;
	margin-left:60px;
}

.jump ul li {
	float: left;
	margin-top:15px;
	width: 260px;
	margin-right:30px;
}

article h2 { margin-top:50px; }

.gotop {
	position: fixed;
	right: 10%;
	top: 80%;
}

/*やわらか占い*/

#page_uranai #contents{position:relative;}

#go_characters{
	position:absolute;
	top: 200px;
	right: 50px;
}


#uranattemiru{position:relative;}

#uranattemiru a{
	display:block;
	margin-top: 85px;
	width:360px;
	margin-right: auto;
	margin-left: auto;
              }
			  
.uranaianime2 {
	position:absolute;
	top: 15px;
	right:400px;
	z-index:-1;
}

#uranattemiru a img { transition: .8s; }

#uranattemiru a:hover img:nth-child(2) { transform: translate(-145px, -85px); }

#uranattemiru a:hover img:nth-child(3) { transform: translate(-15px, -80px); }

#uranattemiru a:hover img:nth-child(4) { transform: translate(110px, -80px); }


/*やわらか占い結果*/

.kekka{
	background-color: #FFF;
	padding-top: 15px;
	padding-bottom: 20px;
	width:720px;
	margin-top:20px;
	margin-right: auto;
	margin-left: auto;
	border: 3px double #999;
}

.kekka p{ font-size: 18px;
margin-top:10px; }




#repeat ul {
	overflow: hidden;

}

#repeat ul li {
	float: left;
	margin-top:25px;
	width: 244px;
	margin-right:30px;
	margin-left:150px;
}

#repeat ul li a {
	display: block;
	overflow: hidden;
}

/*やわらかい仲間たち*/

.characters figure{
	width: 290px;
	height:370px;
	float: left;
	color:#000000;
	margin: 15px 10px 50px;
	background-color:#FFF;
	padding: 10px 5px 5px;
	border-radius: 20px;
}

.characters figure:nth-child(3){
	margin-right:0;}
	
/*オリジナルグッズ*/

.or_goods figure{
	width: 290px;
	height:370px;
	float: left;
	color:#000000;
	margin: 15px 10px 50px;
	background-color:#FFC;
	padding: 10px 5px 5px;
	border-radius: 20px;
	font-weight:bold;
}

.or_goods figure:nth-child(3){
	margin-right:0;}
	
/*お問合せ*/

#page_inquiry #contents p{
margin-bottom:50px;}




/*サイトマップ*/

.site_link{
	width:370px;
	float:left;
	text-align:center;
	font-size:20px;
	line-height:250%;
	
	
	

	}
#sites{
	width:800px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
	overflow:hidden;
	padding: 15px 40px;
	border-radius: 20px;
}