@charset "utf-8";

/* -----------------------------------------------------------
	Site Name: nakagawa-aquarium
	Author: Yamazen Communications co.,ltd.
	Comment: pavilionmap style
	Since2011
----------------------------------------------------------- */
 

/* common
----------------------------------------------------------- */


@media only screen and (max-width: 640px){
}


/* pavilionmap
----------------------------------------------------------- */
div.pavilion_map ul{
	width:100%;
	position: relative;
	padding-top:50.25%;
	background:url(../img/aquarium/map_pavilion.png) no-repeat center top;
	background-size:100% auto;
}
div.pavilion_map ul:before{
	width:240px;
	height:0;
	content:"";
	position:absolute;
	top:0;
	left:0;
	display:block;
	padding-top:200px;
	background-repeat:no-repeat;
	background-position:right bottom,left top;
	background-image:url(../img/nakappy.gif),url(../img/aquarium/map_baloon.png);
	background-size:29.58% auto,83.333% auto;
}
div.pavilion_map ul li {
	position:absolute;
	height:25px;
}

div.pavilion_map ul li.noc1 {top:60px; left:390px;}
div.pavilion_map ul li.noc2 {top:35px; left:355px;}
div.pavilion_map ul li.noc3 {top:125px; left:145px;}
div.pavilion_map ul li.noc4 {top:90px; left:315px;}
div.pavilion_map ul li.noc5 {top:140px; left:100px;}
div.pavilion_map ul li.noc6 {top:50px; left:310px;}
div.pavilion_map ul li.noc7 {top:65px; left:270px;}

div.pavilion_map ul li.noa1 {top:175px; left:320px;}
div.pavilion_map ul li.noa2 {top:203px; left:320px;}
div.pavilion_map ul li.noa3 {top:222px; left:210px;}
div.pavilion_map ul li.noa4 {top:250px; left:215px;}
div.pavilion_map ul li.noa5 {top:210px; left:155px;}
div.pavilion_map ul li.noa6 {top:195px; left:190px;}
div.pavilion_map ul li.noa62{top:105px; left:435px;}
div.pavilion_map ul li.noa7 {top:105px; left:385px;}

div.pavilion_map ul li.nos1 {top:83px; left:370px;}
div.pavilion_map ul li.nos2 {top:75px; left:420px;}
div.pavilion_map ul li.nos3 {top:120px; left:345px;}
div.pavilion_map ul li.nos4 {top:95px; left:240px;}
div.pavilion_map ul li.nos5 {top:70px; left:244px;}
div.pavilion_map ul li.nos6 {top:155px; left:155px;}
div.pavilion_map ul li.nos7 {display:none;}

@media only screen and (max-width: 1200px){
	div.pavilion_map ul:before{
		width:23.95%;
		top:-10px;
		padding-top:19.96%;
	}
}
@media screen and (max-width:1054px){
	div#exhibition.tabPanel ul {
		padding-bottom:260px;
	}
	div#service.tabPanel ul {
		padding-bottom:260px;
	}
}
@media screen and (max-width:760px){
	div#exhibition.tabPanel ul {
		padding-bottom:0;
	}
}

@media screen and (max-width:540px){
	div.pavilion_map ul{
		padding-top:89.07%;
		background:url(../img/aquarium/map_pavilion_sp.png) no-repeat center top;
		background-size:100% auto;
	}
}


/* 3.tab
----------------------------------------------------------- */
ul.tab{
	margin:0 auto 30px;
}
ul.tab li{
	width:calc(33.33% - 20px);
	margin-right:30px;
	padding:0;
}
ul.tab li:nth-child(3){
	margin-right:0;
}
ul.tab li a{
	display:block;
	margin:0;
	padding:25px 0;
	text-align:center;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	background-repeat:no-repeat;
	background-position:center center;
}
ul.tab li:nth-child(1) a{background-color:#004da0;}
ul.tab li:nth-child(2) a{background-color:#00b48c;}
ul.tab li:nth-child(3) a{background-color:#ff8224;}

ul.tab li a img{
	display:block;
	margin:0 auto;
}
ul.tab li a:hover img,
ul.tab li.active img{
	opacity:0!important;
}
ul.tab li:nth-child(1) a:hover{background-color:#c7e5ff;background-image:url(../img/aquarium/tab_exhibition_on.png);}
ul.tab li:nth-child(2) a:hover{background-color:#c7eee5;background-image:url(../img/aquarium/tab_experience_on.png);}
ul.tab li:nth-child(3) a:hover{background-color:#ffe4cf;background-image:url(../img/aquarium/tab_service_on.png);}

ul.tab li:nth-child(1).active a{background-color:#c7e5ff;background-image:url(../img/aquarium/tab_exhibition_on.png);}
ul.tab li:nth-child(2).active a{background-color:#c7eee5;background-image:url(../img/aquarium/tab_experience_on.png);}
ul.tab li:nth-child(3).active a{background-color:#ffe4cf;background-image:url(../img/aquarium/tab_service_on.png);}

@media only screen and (max-width: 960px){
	ul.tab li{
		width:calc(33.33% - 7px);
		margin-right:10px;
	}
	ul.tab li a,
	ul.tab li a:hover,
	ul.tab li.active a{
		background-size:auto 30%;
	}
	ul.tab li a{
		background-repeat:no-repeat;
		background-potition:center center;
	}
	ul.tab li:nth-child(1) a{background-image:url(../img/aquarium/tab_exhibition.png);}
	ul.tab li:nth-child(2) a{background-image:url(../img/aquarium/tab_experience.png);}
	ul.tab li:nth-child(3) a{background-image:url(../img/aquarium/tab_service.png);}
	ul.tab li a img{
		opacity:0;
	}
}

@media only screen and (max-width: 760px){
	ul.tab li:nth-child(1) a{background-size:70% auto;}
	ul.tab li:nth-child(2) a{background-size:70% auto;}
	ul.tab li:nth-child(3) a{background-size:84% auto;}
	ul.tab li a img{
		width:50px;
		height:50px;
	}

}
@media screen and (max-width:540px){
	ul.tab li a {
		padding: 10px 0;
	}
	ul.tab li:nth-child(1) a{background-image:url(../img/aquarium/tab_exhibition_sp.png);}
	ul.tab li:nth-child(2) a{background-image:url(../img/aquarium/tab_experience_sp.png);}
	ul.tab li:nth-child(3) a{background-image:url(../img/aquarium/tab_service_sp.png);}
	ul.tab li:nth-child(1) a:hover{background-image:url(../img/aquarium/tab_exhibition_on_sp.png);}
	ul.tab li:nth-child(2) a:hover{background-image:url(../img/aquarium/tab_experience_on_sp.png);}
	ul.tab li:nth-child(3) a:hover{background-image:url(../img/aquarium/tab_service_on_sp.png);}
	ul.tab li:nth-child(1) a,
	ul.tab li:nth-child(2) a,
	ul.tab li:nth-child(3) a{background-size:70% auto;}
}



/* tabpanel */
div.tabPanel{display:none;}
div.tabPanel.active{display:block;}


/* list
----------------------------------------------------------- */
div.tabPanel ul{
	letter-spacing:-0.4em;
	background-repeat:no-repeat;
	background-position:right bottom;
}
div.tabPanel ul li{
	width:calc(20% - 8px);
	display:inline-block;
	*display:linline;
	margin-right:10px;
	vertical-align:top;
	letter-spacing:normal;
	zoom:1;
}
div.tabPanel ul li:first-child{
	margin-bottom:30px;
}
div.tabPanel ul li:nth-child(5n){
	margin-right:0;
}
div.tabPanel ul li a{
	display:block;
}
div#exhibition.tabPanel ul li a{color:#004da0;}
div#experience.tabPanel ul li a{color:#00998a;}
div#service.tabPanel    ul li a{color:#ff6400;}

div.tabPanel ul li a{
	display:block;
}
div.tabPanel ul li a span.pic{
	width:100%;
	height:0;
	display:block;
	margin-bottom:15px;
	padding-top:100%;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
}
div.tabPanel ul li a span.pic:hover{
	width:calc(100% - 10px);
	padding-top:calc(100% - 10px);
}
div#exhibition.tabPanel ul li a span.pic:hover{border:5px #004da0 solid;}
div#experience.tabPanel ul li a span.pic:hover{border:5px #00998a solid;}
div#service.tabPanel    ul li a span.pic:hover{border:5px #ff6400 solid;}

div.tabPanel ul li a span.name{
	min-height:31px;
	display:block;
	margin-bottom:15px;
	padding-top:5px;
	padding-left:45px;
	font-family: 'Noto Sans Japanese';
	font-size:16px;
	line-height:1.6;
	background-repeat:no-repeat;
	background-position:left top;
}
div#exhibition.tabPanel ul{
	background-image:url(../img/aquarium/no_aqua_nakappy.png);
	background-size:200px auto;
}
div#exhibition.tabPanel ul li:nth-child(1) a span.name{background-image:url(../img/aquarium/no_aqua1.png);}
div#exhibition.tabPanel ul li:nth-child(2) a span.name{background-image:url(../img/aquarium/no_aqua2.png);}
div#exhibition.tabPanel ul li:nth-child(3) a span.name{background-image:url(../img/aquarium/no_aqua3.png);}
div#exhibition.tabPanel ul li:nth-child(4) a span.name{background-image:url(../img/aquarium/no_aqua4.png);}
div#exhibition.tabPanel ul li:nth-child(5) a span.name{background-image:url(../img/aquarium/no_aqua5.png);}
div#exhibition.tabPanel ul li:nth-child(6) a span.name{background-image:url(../img/aquarium/no_aqua6.png);}
div#exhibition.tabPanel ul li:nth-child(7) a span.name{background-image:url(../img/aquarium/no_aqua7.png);}
div#exhibition.tabPanel ul li:nth-child(8) a span.name{background-image:url(../img/aquarium/no_aqua8.png);}
div#exhibition.tabPanel ul li:nth-child(9) a span.name{background-image:url(../img/aquarium/no_aqua9.png);}

div#experience.tabPanel ul{background-image:url(../img/aquarium/no_exp_nakappy.png);}
div#experience.tabPanel ul li:nth-child(1) a span.name{background-image:url(../img/aquarium/no_exp1.png);}
div#experience.tabPanel ul li:nth-child(2) a span.name{background-image:url(../img/aquarium/no_exp2.png);}
div#experience.tabPanel ul li:nth-child(3) a span.name{background-image:url(../img/aquarium/no_exp3.png);}
div#experience.tabPanel ul li:nth-child(4) a span.name{background-image:url(../img/aquarium/no_exp4.png);}
div#experience.tabPanel ul li:nth-child(5) a span.name{background-image:url(../img/aquarium/no_exp5.png);}
div#experience.tabPanel ul li:nth-child(6) a span.name{background-image:url(../img/aquarium/no_exp6.png);}
div#experience.tabPanel ul li:nth-child(7) a span.name{background-image:url(../img/aquarium/no_exp7.png);}

div#service.tabPanel ul{background-image:url(../img/aquarium/no_ser_nakappy.png);}
div#service.tabPanel ul li:nth-child(1) a span.name{background-image:url(../img/aquarium/no_ser1.png);}
div#service.tabPanel ul li:nth-child(2) a span.name{background-image:url(../img/aquarium/no_ser2.png);}
div#service.tabPanel ul li:nth-child(3) a span.name{background-image:url(../img/aquarium/no_ser3.png);}
div#service.tabPanel ul li:nth-child(4) a span.name{background-image:url(../img/aquarium/no_ser4.png);}
div#service.tabPanel ul li:nth-child(5) a span.name{background-image:url(../img/aquarium/no_ser5.png);}
div#service.tabPanel ul li:nth-child(6) a span.name{background-image:url(../img/aquarium/no_ser6.png);}
	
	
div.tabPanel ul li p{
	font-size:12px;
	line-height:1.6;
}

@media screen and (max-width:1280px){
	div.tabPanel ul li{
		width:calc(25% - 7.5px);
	}
	div.tabPanel ul li:nth-child(5n){
		margin-right:10px;
	}
	div.tabPanel ul li:nth-child(4n){
		margin-right:0;
	}
}
@media screen and (max-width:1054px){
	div.tabPanel ul li{
		width:calc(33.33% - 6.66px);
	}
	div.tabPanel ul li:nth-child(5n),
	div.tabPanel ul li:nth-child(4n){
		margin-right:10px;
	}
	div.tabPanel ul li:nth-child(3n){
		margin-right:0;
	}
}
@media screen and (max-width:760px){
	div.tabPanel ul li{
		width:calc(50% - 5px);
	}
	div.tabPanel ul li:nth-child(5n),
	div.tabPanel ul li:nth-child(4n),
	div.tabPanel ul li:nth-child(3n){
		margin-right:10px;
	}
	div.tabPanel ul li:nth-child(2n){
		margin-right:0;
	}
}
@media screen and (max-width:540px){
	div.tabPanel ul li a span.name {
		margin-top:-33px;
		margin-bottom: 15px;
		padding-top: 35px;
		padding-left: 0;
		background-position: center top;
	}
	div#exhibition.tabPanel ul,
	div#experience.tabPanel ul,
	div#service.tabPanel ul {
		background-position: bottom 1.2em right;
		background-size:45% auto;
	}
	div#service.tabPanel ul {
		padding-bottom:40%;
		background-position: bottom right;
	}
}
@media screen and (max-width:350px){
	div.tabPanel ul li a span.name {
		font-size: 14px;
	}
}



/* detail_page
----------------------------------------------------------- */
.pavilion ul#pagerbtn{
	margin-top:60px;
	padding-top:30px;
	border-top:1px #ccc solid;
}

/* creature_area
---------------------------------------- */
ul#creature_area{
	width:100%;
	margin:0 auto;
}
ul#creature_area li{
	width:calc(16.66% - 16.66px);
	position:relative;
	margin:0 20px 30px 0;
}
ul#creature_area li:nth-child(6n+1){
	margin-right:0;
}
ul#creature_area li.ttl{
	width:100%;
	margin:0 auto 30px;
}
ul#creature_area li a span.pic{
	width:138px;
	height:138px;
	position:relative;
	display: block;
	margin: 0 auto;
	padding-top:0;
	border-radius:69px;
	-webkit-border-radius:69px;
	-moz-border-radius:69px;
	-ms-border-radius:69px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transition:all 0.3s ease-out;
}
ul#creature_area li a span.pic:hover{
	transform:scale(1.1)
}
ul#creature_area li a span.name{
	display:block;
	position:absolute;
	left: 50%;
	top:-55px;
	padding:5px 15px;
	color:#646464;
	text-align:center;
	white-space:nowrap;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	background-color:#ffff00;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
	transition:all 0.3s linear;
	opacity:0;
}
ul#creature_area li a:hover span.name{
	opacity:100%;
}
ul#creature_area li a span.name:after{
	width:15px;
	height:15px;
	position:absolute;
	left:50%;
	bottom:-8px;
	content:"";
	margin-left:-10.5px;
	transform:rotate(45deg);
	background-color:#ffff00;
}
a.btn{
	color:#00998a;
	background-color:#fff;
	background-image:url(../img/arr_btn2.png);
}
a.btn:hover{
	color:#fff;
	background-color:#ff6400;
	background-image:url(../img/arr_btn.png);
}
@media screen and (max-width:1130px){
	ul#creature_area li{
		width:calc(20% - 16px);
	}
	ul#creature_area li:nth-child(6n+1){
		margin-right:20px;
	}
	ul#creature_area li:nth-child(5n+1){
		margin-right:0;
	}
}
@media screen and (max-width:960px){
	ul#creature_area li{
		width:calc(25% - 15px);
	}
	ul#creature_area li:nth-child(6n+1),
	ul#creature_area li:nth-child(5n+1){
		margin-right:20px;
	}
	ul#creature_area li:nth-child(4n+1){
		margin-right:0;
	}
}
@media screen and (max-width:800px){
	ul#creature_area li{
		width:calc(33.33% - 13.33px);
	}
	ul#creature_area li:nth-child(6n+1),
	ul#creature_area li:nth-child(5n+1),
	ul#creature_area li:nth-child(4n+1){
		margin-right:20px;
	}
	ul#creature_area li:nth-child(3n+1){
		margin-right:0;
	}
}
@media screen and (max-width:600px){
	ul#creature_area li{
		width:calc(33.33% - 6.66px);
		margin-right:10px;
	}
	ul#creature_area li:nth-child(6n+1),
	ul#creature_area li:nth-child(5n+1),
	ul#creature_area li:nth-child(4n+1){
		margin-right:10px;
	}
	ul#creature_area li:nth-child(3n+1){
		margin-right:0;
	}
	ul#creature_area li a span.pic {
		width: 100%;
		height: 0;
		padding-top: 100%;
	}
}
@media screen and (max-width:350px){
	ul#creature_area li{
		width:calc(50% - 10px);
	}
	ul#creature_area li:nth-child(6n+1),
	ul#creature_area li:nth-child(5n+1),
	ul#creature_area li:nth-child(4n+1),
	ul#creature_area li:nth-child(3n+1){
		margin-right:10px;
	}
	ul#creature_area li:nth-child(2n+1){
		margin-right:0;
	}
}