@charset "utf-8";
@import url(base.css);
/*---------------------------------------------*/
/* index.css                                   */
/*   --fishing park kagoshima                  */
/*---------------------------------------------*/


/* header -------------------------------------*/
#header {
	background:url(../img/img_index_cloud.png) no-repeat center 30px;
	background-size:110% auto;
	-moz-background-size:110% auto;
}
.logo {
	width:100%;
	text-align:center;
	float:none;
}

.logo img {
	width:45%;
	max-width:625px;
	padding:40px 0 10%;
}

.sea {
	width:100%;
	padding-top:17.78%;
	background:url(../img/img_index_sea.png) repeat-x;
	animation: seamove 30s linear infinite;
	-webkit-animation: seamove 30s linear infinite;
	-moz-animation: seamove 30s linear infinite;
	background-size:contain;
	-moz-background-size:contain;
	position:relative;
}

@keyframes seamove {
	0% {background-position: 0 bottom;}
	10% {background-position: 25px 3px;}
	20% {background-position: 50px bottom;}
	30% {background-position: 75px 3px;}
	40% {background-position: 100px bottom;}
	50% {background-position: 125px 3px;}
	60% {background-position: 150px bottom;}
	70% {background-position: 175px 3px;}
	80% {background-position: 200px bottom;}
	90% {background-position: 225px 3px;}
	100% {background-position: 250px bottom;}
}
@-webkit-keyframes seamove {
	0% {background-position: 0 bottom;}
	10% {background-position: 25px 3px;}
	20% {background-position: 50px bottom;}
	30% {background-position: 75px 3px;}
	40% {background-position: 100px bottom;}
	50% {background-position: 125px 3px;}
	60% {background-position: 150px bottom;}
	70% {background-position: 175px 3px;}
	80% {background-position: 200px bottom;}
	90% {background-position: 225px 3px;}
	100% {background-position: 250px bottom;}
}
@-moz-keyframes seamove {
	0% {background-position: 0 bottom;}
	10% {background-position: 25px 3px;}
	20% {background-position: 50px bottom;}
	30% {background-position: 75px 3px;}
	40% {background-position: 100px bottom;}
	50% {background-position: 125px 3px;}
	60% {background-position: 150px bottom;}
	70% {background-position: 175px 3px;}
	80% {background-position: 200px bottom;}
	90% {background-position: 225px 3px;}
	100% {background-position: 250px bottom;}
}

.ship {
	max-width:8%;
	float:left;
	position:absolute;
	top:-25%;
	left:13%;
	-moz-animation: swing linear 3s infinite;
	-moz-transform-origin:50% 50%;
	-webkit-animation: swing linear 3s infinite;
	-webkit-transform-origin:50% 50%;
	animation: swing linear 3s infinite;
	transform-origin:50% 50%;
}

.ship img {
	width:100%;
}

@-moz-keyframes swing {
	0% {-moz-transform: rotate(0deg);}
	25% {-moz-transform: rotate(3deg);}
	50% {-moz-transform: rotate(0deg);}
	75% {-moz-transform: rotate(-3deg);}
	100% {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes swing {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: rotate(3deg);}
    50% {-webkit-transform: rotate(0deg);}
    75% {-webkit-transform: rotate(-3deg);}
    100% {-webkit-transform: rotate(0deg);}
}    
@keyframes swing {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(3deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(-3deg);}
    100% {transform: rotate(0deg);}
}

@media screen and (min-width:1300px){
#header {
	background-size:auto;
	-moz-background-size:auto;
}
.logo img {
	padding-bottom:8%;
}
.ship {
	left:15%;
}
.sea {
	padding-top:249px;
	background-size:auto;
	-moz-background-size:auto;
}
}

@media screen and (min-width:1600px){
.logo img {
	padding-bottom:6.5%;
}
.ship {
	left:22%;
}
}

@media screen and (min-width:1900px){
.logo img {
	padding-bottom:5.3%;
}
.ship {
	left:25%;
}
}

/* slide */
.index-slide {
	width:50%;
	max-width:625px;
	margin:auto;
	overflow:hidden;
	position:absolute;
	top:45%;
	left:0;
	right:0;
}

#carousel li {
	width:180px;
	height:180px;
	text-align:center;
	float:left;
	position:relative;
}

#carousel li img {
	width:70%;
}

.index-note {
	padding:10px;
	margin:0 2%;
	color:#F00;
	font-weight:bold;
	text-align:center;
	position:relative;
	top:-40px;
	border:2px solid #f00;
	border-radius:10px;
	background:rgba(255, 255, 255, .5);
}

/* nav ----------------------------------------*/
.nav-box {
    width:16%;
	margin:0 2% 50px;
}

.nav-inner span a {
	font-size:26px;
	font-size:2.6rem;
}
@media screen and (max-width:1100px){
.nav-inner span a {
	font-size:21px;
	font-size:2.1rem;
}
}
@media screen and (max-width:850px){
.nav-inner span a {
	font-size:18px;
	font-size:1.8rem;
}
}

/* main ---------------------------------------*/
/* alpha */
.index-fb-inner {
	max-width:500px;
	width:auto;
}

.index-fb .fb-page {
	width:100%;
}

.index-choka {
	background-image:url(../img/img_index_choka.png);
	background-repeat:no-repeat;
	background-position:right 20px;
}

@media screen and (max-width:1000px){
.index-choka {
	background-size:50% auto;
	-moz-background-size:50% auto;
}
}

/* sidebar ------------------------------------*/
/* beta */

@media screen and (max-width:640px){
.logo img {
	width:80%;
	padding:15px 0 0;
}
.index-slide {
	width:70%;
	top:55%;
	display:none;
}
.index-note {
	top:-30px;
	padding:5px 0;
	letter-spacing:0;
	border:1px solid #f00;
}
.contents nav {
	height:80px;
	margin-bottom:20px;
}
.news-list dt {
	padding:10px 0 0;
	float:none;
}
.news-list dd {
	padding:3px 0 10px 0;
}
}