@charset "utf-8";

@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


/* =================================================================== */
/* TOP PAGE
/* =================================================================== */
.ctg-0{
	background-color: #f5fdff;
}

/*-- KEY VISUAL -- */
#TP-KV{
	position: relative;
	margin-top: 59px;
	height: 650px;
	*zoom: 1;
	
	background: #162947;
	background-image: linear-gradient(to bottom, #162947, #162947 68%, #57677d 80%, #f5fdff);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff162947', endColorstr='#fff5fdff', GradientType=0);
}
*:first-child+html #TP-KV,
.ie7 #TP-KV { margin-top: 0; top: 59px; } /* IE7 */

#TP-KV:after { content: ""; display: table; clear: both; }

.kv-area {
	position: relative; z-index: 10;
	margin: 0 auto; max-width: 1280px; height: 100%;
	overflow: hidden;
	-webkit-animation: fade-in 0.5s linear 0s 1 normal;
	animation: fade-in 0.5s linear 0s 1 normal;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.kv-area .kv {
	position: absolute;
	top: 0; left: 0; z-index: 10;
	width: 100%; height: 100%;
	background: url(../../img/tp_kv_1.jpg) center top no-repeat;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	transition-timing-function: ease;
}
.kv-area .kv.active {
	z-index: 12;
}

.kv-btn {
	position: absolute;
	top: 36%;
}
.kv-btn.prev {
	left: 0;
	margin-left: -32px;
}
.kv-btn.next {
	right: 0;
	margin-right: -32px;
}

.kv-btn a {
	display: block;
	width: 56px;
	height: 56px;
	background: transparent url(../../img/tp_kv_btn.png) no-repeat 0 0;
	overflow: hidden;
    outline: none;
}
.kv-btn.prev a:hover { background-position: 0 -56px; }
.kv-btn.next a { background-position: -56px 0; }
.kv-btn.next a:hover { background-position: -56px -56px; }

@media (max-width: 810px) {
	.kv-btn { top: 30%; }
}
@media (max-width: 760px) {
	.kv-btn { top: 25%; }
}


/*-- KV BOX --*/
#TP-KV .area{
	position: relative;
	z-index: 50;
	width: 980px;
	height: 100%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}

#TP-KV .pickups{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.kvbox {
	position: relative;
	display: inline-block;
	width: 184px;
	height: 212px;
	margin-left: 11px;
	font-size: 14px;
	background-position: 0 0;
	background-repeat: no-repeat;
	overflow: hidden;
}

.kvbox:nth-child(1){
	margin-left: 0;
}

.kvbox-inner { position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; }

.kvbox .link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; }
.kvbox .link a { display: block; width: 100%; height: 100%; text-indent: -999px; }

.kvbox .cnt { position: absolute; top: 21%; left: 5px; right: 5px; bottom: 5px; font-size: 85%; }
.kvbox .text,
.kvbox .image { margin: 0; padding: 0; }

#TP-kvb-1 { background-image: url(../../img/tp_kvb_news.png); }
#TP-kvb-2 { background-image: url(../../img/tp_kvb_info.png); }
#TP-kvb-3 { background-image: url(../../img/tp_kvb_map.png); }
#TP-kvb-4 { background-image: url(../../img/tp_kvb_schdl.png); }
#TP-kvb-5 { background-image: url(../../img/tp_kvb_pickup.png); }


/* IMPORTANT NEWS */

#TP-kvb-1 { text-align: left; }
#TP-kvb-1 .link { display: none; }

#TP-kvb-1 ul { list-style: none; position: absolute; top: 0; left: 0; right: 0; bottom: 28px; margin: 0; padding: 5px; overflow: auto; }
#TP-kvb-1 li { margin: 0; padding: 5px 2px; border-top: #ccc 1px solid; }
#TP-kvb-1 li:first-child { border: none; }

#TP-kvb-1 .link-2 { position: absolute; left: 5px; right: 5px; bottom: 0; margin: 0; padding: 5px 2px 4px; border-top: #ccc 1px solid; text-align: right; }
#TP-kvb-1 .link-2 a { display: inline-block; padding-left: 10px; background: url(../img/link_arw_2.png) left center no-repeat; }
	
	
/* INFORMATION */
#TP-kvb-2 .link a { height: 21%; }

#TP-kvb-2 .cnt ul { margin: 14px 2px 0; padding: 0; list-style: none; }
#TP-kvb-2 .cnt li { margin: 5px 0 0; padding: 0; }

#TP-kvb-2 .cnt li a {
	display: block;
	width: 100%;
	max-width: 169px;
	height: 0;
	padding: 0 0 24.85%;
	text-indent: -999px;
	background: transparent url(../../img/tp_kvb_info_btn2.png) no-repeat 0 0;
	background-size: cover;
}
#TP-kvb-2 .cnt li a:hover,
#TP-kvb-2 .cnt li a:focus { opacity: 0.85; }

#TP-kvb-2 .cnt li:first-child a { background-image: url(../../img/tp_kvb_info_btn1.png); }

/* PICK UP */
#TP-kvb-5,
#TP-kvb-5 a { color: #fff; }

#TP-kvb-5 .link { display: none; }

#TP-kvb-5 .image { position: absolute; top: 8px; left: 3px; right: 3px; bottom: 40px; }
#TP-kvb-5 .image img { width: auto; height: auto; max-width: 100%; max-height: 100%; border: #fff 2px solid; }

#TP-kvb-5 .text { position: absolute; left: 5px; right: 5px; bottom: 3px; height: 28px; font-size: 12px; line-height: 14px; overflow: hidden; }


.close-btn {
	position: relative;
	z-index: 50;
	display: block;
	width: 980px;
	margin: 0 auto;
	padding: 0;
	text-align: right;
}

.close-btn a {
	display: inline-block;
	margin: 15px 0;
	padding: 5px 10px;
	background-color: #000;
	color: #fff;
	border-radius: 3px;
	font-size: 12px;
	opacity: 0.5;
}







#CNT-area{
	padding-top: 10px;
}


/* -- TOP LANGUAGE BTN -- */
#TP-lang-btn{ display: none;}




/*-- TOP INFO BOX --*/
#CNT-area .tp-area h3{
	border: none;
	border-radius: 0;
}

#CNT-area .tp-area{
	width: 748px;
	margin-bottom: 30px;
	margin-right: 2px;
}

.TP-program{
	background-color: #cdf9ff;
	border-top: #1959a3 2px solid;
	padding: 0 0 10px;
}

.TP-program h3{
	width: 219px;
	height: 33px;
	margin: 0 0 10px 7px;
	padding: 0;
	text-indent: -9999px;
	background: url(../../img/tp_ttl_program.png) 0 0 no-repeat;
}

.TP-program ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.TP-program li{
	display: inline-block;
}

#TP-news,
#TP-diary,
#TP-events{
	position: relative;
	padding-top: 10px;
	background: url(../../img/tp_box_bc.png) 0 0 no-repeat ;
}

#TP-news h3,
#TP-diary h3,
#TP-events h3{
	width: 180px;
	height: 32px;
	margin: 0 0 10px;
	padding: 0;
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -9999px;
}

#TP-news h3{ background-image: url(../../img/tp_ttl_news.png);}
#TP-diary h3{ background-image: url(../../img/tp_ttl_diary.png);}
#TP-events h3{ background-image: url(../../img/tp_ttl_event.png);}

#TP-news .box,
#TP-diary .box,
#TP-events .box{
	padding: 25px;
	background-color: #fff;
	border-radius: 0 0 5px 5px;
	box-shadow: 2px 2px 2px #dde6e8;
}

#TP-news ul,
#TP-diary ul,
#TP-events ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

#TP-news li,
#TP-diary li,
#TP-events li{
	margin-bottom: 7px;
}

#TP-news .link,
#TP-diary .link,
#TP-events .link{
	padding: 0;
	margin: 0;
	text-align: right;
}

#TP-news .link a,
#TP-diary .link a,
#TP-events .link a{
	display: inline-block;
	min-width: 140px;
	padding: 8px 20px 8px 30px;
	line-height: 15px;
	border: #9ed4df 1px solid;
	border-radius: 3px;
	background: #e2faff url(../img/link_arw_1.png) 15px 0.9em no-repeat;
	text-align: left;
}

.tp-news-list { line-height: 1.5; }
.tp-news-list .news-date { margin-right: 1em; font-size: 88%; line-height: 1.7; color: #888; }
.tp-news-list .news-date,
.tp-news-list .news-title { vertical-align: middle; }
.tp-news-list .news-icon { display: inline-block; vertical-align: middle; line-height: 1; }

#TP-news:after,
#TP-diary:after,
#TP-events:after{
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 300px;
	height: 71px;
	background-position: 0 0;
	background-repeat: no-repeat;
	content: '';
}

#TP-news:after{ background-image: url(../../img/tp_box_fish1.png);}
#TP-diary:after{ background-image: url(../../img/tp_box_fish3.png);}
#TP-events:after{ background-image: url(../../img/tp_box_fish1.png);}

.ctg-0 #BTN-pagetop{
	background-image: url(../img/btm_wave_tp.jpg);
}


/* BNR */

#TP-bnr .about-ad {
	margin: 1em 0 .25em;
}

#TP-bnr > ul {
    overflow: hidden;
    clear: both;
    list-style: none;
    margin: 0;
    padding: 0;
}

#TP-bnr > ul > li {
    float: left;
    margin: 0 5px 5px 0;
    padding: 0;
}








/* IE7 inline-block hack */
.kvbox,
.TP-program li { *display: inline; *zoom: 1; }



/* ----------* * * * *----------*/
/* --------- RESPOSIVE ---------*/

@media screen and (max-width: 1000px) and (min-width:520px){
	/*-- KV --*/
	#TP-KV{
		margin-top: 5.9%;
		height: auto;
	}
	#TP-KV .kv {
		background-size: 128% auto ;
	}

	#TP-KV .area{
		padding-top: 65%;
	}

	#TP-KV .area{
		width: auto;
	}

	.kvbox {
		width: 19%;
		height: 0;
		margin: 0 0.5%;
		padding: 0 0 21.89%;
		background-size: 100% auto;
	}

	.kv-btn.prev { margin-left: 0; }
	.kv-btn.next { margin-right: 0; }

    .close-btn {
        width: 99%;
        padding: 0 10px 0 0;
    }



	/*-- CONTENTS --*/
	#CNT-area .tp-area{
		width: 100%;
		margin-bottom: 5%;
		margin-right: 2px;
	}

}

/*================================================================

	MOBILE

================================================================*/

@media screen and (max-width: 599px) {
	#TP-KV{
		margin-top: 0;
		height: auto;
		background: transparent;
	}

	#TP-KV .kv{
		background-size: 128% auto;
        top: 30px;
	}

	#TP-KV .area{
		width: 97%;
		top: 0;
		margin-left: 3%;
		text-align: left;
		height: 100px;
		padding-top: 55%;
	}

	.kvbox {
		display: block;
		float: left;
		height: 0;
		width: 31%;
		margin: 0 2% 10px 0;
		padding: 0 0 19.58%;
		background-size: 100% auto;
	}
	
	#TP-kvb-1 .link { display: block; }

	.kvbox .link{
		display: block;
		width: 100%;
	}

	.kvbox .link a,
	.kvbox .link span{
		display: block;
		width: 100%;
		height: auto;
		padding-top: 63%;
		text-indent: -9999px;
		font-size: 0;
	}

	.kvbox .cnt{
		display: none;
	}

	#TP-kvb-1{ background-image: url(../img_mbl/tp_kvb_news.png);}
	#TP-kvb-2{ background-image: url(../img_mbl/tp_kvb_info.png);}
	#TP-kvb-3{ background-image: url(../img_mbl/tp_kvb_map.png);}
	#TP-kvb-4{ background-image: url(../img_mbl/tp_kvb_schdl.png);}
	#TP-kvb-5{ background-image: url(../img_mbl/tp_kvb_pickup.png);}

	#TP-kvb-5 .link { display: block; }
	
	.kv-btn,
	.close-btn{ display: none;}

    
    /* TOP LANGUAGE BTN */
    #TP-lang-btn{
        display: block;
        text-align: center;
        margin-bottom: 20px;
        border-top: #a1bdd9 1px dotted;
    }
    
    #TP-lang-btn ul{
        margin: 0;
        padding: 0;
    }
    
    #TP-lang-btn li{
        display: inline-block;
        width: 93px;
        height: 25px;
        margin: 0;
        padding: 0;
        line-height: 0;
        font-size: 0;
    }
    
    #TP-lang-btn li a{
        display: block;
        width: 93px;
        height: 25px;
        text-indent: -9999px;
        background-image: url(../img_mbl/btn_lang.png);
        background-repeat: no-repeat;
        background-size: 279px 25px;
        line-height: 0;
    }
    
    #TP-lang-btn li:nth-child(1) a{ background-position: 0 0;}
    #TP-lang-btn li:nth-child(2) a{ background-position: -93px 0;}
    #TP-lang-btn li:nth-child(3) a{ background-position: -186px 0;}


    #CNT-area{
        padding-bottom: 0 !important;
    }

}

@media screen and (max-width: 519px) {
    #TP-KV .kv{
        top: 0;
	}

	/*-- CONTENTS --*/
	#CNT-area .tp-area{
		width: 100%;
		margin-bottom: 5%;
		margin-right: 2px;
	}

	#TP-news .box,
	#TP-diary .box{
		padding: 3%;
		font-size: 13px;
	}


	#TP-news .link,
	#TP-diary .link{
		margin: 20px 0 5px;
		text-align: center;
	}
	
	#TP-news .link a,
	#TP-diary .link a{
		padding: 10px 30px 7px;
		background: #e2faff;
		text-align: center;
	}
	
	.tp-news-list .news-date { display: block; margin: 5px 0 0; }
	
	#TP-news:after,
	#TP-diary:after{
		top: 14px;
		width: 200px;
		height: 47px;
		background-size: 100% auto;
	}

}



/* ----------* * * * *----------*/


/* =================================================================== */