@charset "utf-8";

/* -----------------------------------------------------------
	Site Name: nakagawa-aquarium
	Author: Yamazen Communications co.,ltd.
	Comment: sightseeing style
	Since2011
----------------------------------------------------------- */
	
/*Index
	1.structure
	2.local navi
	3.tab
----------------------------------------------------------- */
 

/* 1.common
----------------------------------------------------------- */
p.outline{
	margin-bottom:30px;
}
div#inner {
	max-width: none;
}


/* 3.tab
----------------------------------------------------------- */
div#container.sightseeing ul#tab li:nth-child(9){display:none;}
div#container.sightseeing ul#tab.plan{display:none;}

@media screen and (min-width:760px){
	ul#tab {
		width:calc(100% - 30px);
		margin:0 auto 60px;
		padding:15px;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		-ms-border-radius:10px;
		background-color:#fff;
		overflow:visible;
	}
	div#container.sightseeing ul#tab li{
		width: 6em;
		position:relative;
		margin:5px;
	}
	div#container.sightseeing ul#tab li a {
		position:relative;
		color:#00998a!important;
		border: 1px #00998a solid!important;
		z-index:2;
	}
	div#container.sightseeing ul#tab li a:hover{
		color:#fff!important;
	}
	div#container.sightseeing ul#tab li a.on{
		color:#fff!important;
		border:1px #00998a solid!important;
		background-color:#00998a!important;
	}
	ul#tab li:before {
		width:47px;
		height:0;
		content:"";
		position:absolute;
		top:0;
		right:0;
		display:block;
		margin-right:1em;
		padding-top:57px;
		opacity:0;
		background:url(../img/sightseeing/tab_nakappy.png) no-repeat center center;
		transition:all 0.3s ease-out;
	}
	ul#tab li:hover:before {
		top:-45px;
		opacity:1;
	}
}
@media screen and (max-width:760px){
	div#container.sightseeing ul#tab.open li:nth-child(4),
	div#container.sightseeing ul#tab.open li:nth-child(7) {
		margin-right: 0;
	}
	div#container.sightseeing ul#tab.open li:nth-child(5),
	div#container.sightseeing ul#tab.open li:nth-child(6) {
		margin-right: 10px;
	}
}
@media screen and (max-width:540px){
	div#container.sightseeing ul#tab.open li:nth-child(5),
	div#container.sightseeing ul#tab.open li:nth-child(7) {
		margin-right: 0;
	}
	div#container.sightseeing ul#tab.open li:nth-child(4),
	div#container.sightseeing ul#tab.open li:nth-child(6) {
		margin-right: 10px;
	}
}


/* plan
----------------------------------------------------------- */
.plan ul#tab{
	margin-bottom:90px;
}

.plan dl#plan{
	width:100%;
}
.plan dl#plan dt#mainpic{
	width:100%;
	margin:0 auto 60px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	overflow:hidden;
}
.plan dl#plan dt#mainpic img{
	margin-bottom:5px;
}
.plan dl#plan dt#mainpic span{
	display:block;
	margin-bottom:30px;
}
.plan dl#plan dt#mainpic p.text{
	margin:0 auto;
	letter-spacing:normal
}
.plan dl#plan dd{
	width:calc(33.33% - 20px);
	margin-right:30px;
	margin-bottom:30px;
}
.plan dl#plan dd:nth-child(3n+1){
	margin-right:0;
}
.plan dl#plan dd div.pic{
	position:relative;
	margin-bottom:45px;
}
.plan dl#plan dd div.pic:after{
	width:71px;
	height:71px;
	content:"";
	position:absolute;
	bottom:-35px;
	left:50%;
	display:block;
	margin-left:-35px;
	background-repeat:no-repeat;
	background-position:center center;
}
.plan dl#plan dd:nth-child(2) div.pic:after{background-image:url(../img/sightseeing/no1.png);}
.plan dl#plan dd:nth-child(3) div.pic:after{background-image:url(../img/sightseeing/no2.png);}
.plan dl#plan dd:nth-child(4) div.pic:after{background-image:url(../img/sightseeing/no3.png);}
.plan dl#plan dd:nth-child(5) div.pic:after{background-image:url(../img/sightseeing/no4.png);}
.plan dl#plan dd:nth-child(6) div.pic:after{background-image:url(../img/sightseeing/no5.png);}
.plan dl#plan dd:nth-child(7) div.pic:after{background-image:url(../img/sightseeing/no6.png);}
.plan dl#plan dd:nth-child(8) div.pic:after{background-image:url(../img/sightseeing/no7.png);}
.plan dl#plan dd:nth-child(9) div.pic:after{background-image:url(../img/sightseeing/no8.png);}

.plan dl#plan dd div.pic a,
.plan dl#plan dd div.pic span{
	width:100%;
	height:0;
	display:block;
	padding-top:75%;
	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:contain;
}

.plan ul#pagerbtn{
	padding-top:30px;
	border-top:1px #ccc solid;
}
@media screen and (max-width:1054px){
	.plan dl#plan dd div.pic {
		margin-bottom: 30px;
	}
	.plan dl#plan dd div.pic::after {
		width: 50px;
		height: 50px;
		bottom:-25px;
		margin-left: -25px;
		background-size: 100% auto;
	}
}
@media screen and (max-width:760px){
	.plan dl#plan dd{
		width:calc(50% - 15px);
	}
	.plan dl#plan dd:nth-child(3n+1){
		margin-right:30px;
	}
	.plan dl#plan dd:nth-child(2n+1){
		margin-right:0;
	}
}
@media screen and (max-width:640px){
	.plan dl#plan dd p.text {
	  padding-right: 0;
	}
	.plan dl#plan dd{
		width:calc(50% - 7.5px);
		margin-right:15px;
	}
	.plan dl#plan dd:nth-child(3n+1){
		margin-right:15px;
	}
	.plan dl#plan dd:nth-child(2n+1){
		margin-right:0;
	}
}
@media screen and (max-width:350px){
	.plan dl#plan dd{
		width:100%;
	}
	.plan dl#plan dd:nth-child(3n+1),
	.plan dl#plan dd:nth-child(2n+1){
		margin-right:0;
	}
}