@charset "utf-8";

/* common
---------------------------------------- */
div#contents{
	width:100%;
	max-width:none;
	padding:60px 0;
	background-color:transparent;
}
div#contents div.box{
	position:relative;
	margin:0 auto;
	padding:60px 0;
	overflow:hidden;
}
div#contents div.box a.btn{
	margin:30px auto 0;
}
span.pic{
	width:100%;
	height:0;
	margin:0 auto 5px;
	display:block;
	padding-top:70%;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	transition:all 0.2s linear;
}
span.pic:hover{
	background-size:110% auto;
}

h2.ttl{
	width:calc(100% - 340px);
}
@media screen and (max-width:1280px){
	h2.ttl{
		width:calc(100% - 280px);
	}
}
@media screen and (max-width:960px){
	h2.ttl{
		width:calc(100% - 220px);
	}
}
@media screen and (max-width:640px){
	div#contents {
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
	}
}
@media screen and (max-width:540px){
	h2.ttl{
		width:100%;
	}
}
@media screen and (max-width:350px){
	div#contents div.box{
		width:auto;
		padding:45px 15px;
	}
}

/* pickup_navi
---------------------------------------- */
ul#pickup_navi{
	position: relative;
	margin:30px auto;
	text-align:center;
	z-index: 1;
}
ul#pickup_navi li{
	width:95px;
	margin: 0 5px;
	text-align:center;
}
ul#pickup_navi li a{
	width:95px;
	height:95px;
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
}

ul#pickup_navi li a:hover{
	opacity:0.7;
}
ul#pickup_navi li:nth-child(1) a{background-image:url(../img/top/pickupnv1.png);}
ul#pickup_navi li:nth-child(2) a{background-image:url(../img/top/pickupnv2.png);}
ul#pickup_navi li:nth-child(3) a{background-image:url(../img/top/pickupnv3.png);}
ul#pickup_navi li:nth-child(4) a{background-image:url(../img/top/pickupnv4.png);}
ul#pickup_navi li:nth-child(5) a{background-image:url(../img/top/pickupnv5.png);}

ul#pickup_navi li a span{
	display:block;
	text-indent:-999999999999999px;
}

@media screen and (max-width:540px){
	ul#pickup_navi{
		margin-top:15px;
	}
	ul#pickup_navi li{
		width:calc(20% - 6px);
		margin: 0 3px;
	}
	ul#pickup_navi li a{
		width:100%;
		height:0;
		padding-top:100%;
		background-size:100% auto;
	}
}




/* calendar
---------------------------------------- */

div#calendar_area{
	width:300px;
	max-height:calc(100vh - 60px);
	position:fixed;
	padding:0 0 30px;
	top:30px;
	right:0;
	text-align:center;
	border-radius:10px 0 0 10px;
	-webkit-border-radius:10px 0 0 10px;
	-moz-border-radius:10px 0 0 10px;
	-ms-border-radius:10px 0 0 10px;
	background-color:#fff;
	z-index:130;
	transition:all 0.3s ease-in;
	overflow-y: auto;
}

/* date */
div#calendar_area div.date{
	width:100%;
	margin:0 auto 30px;
	padding:30px 0 ;
	line-height:1.4;
	background:url(../img/top/date_bk.png) no-repeat center top;
	background-size:auto 310px;
}
div#calendar_area div.date p{
	color:#fff;
	text-align:center;
}
div#calendar_area div.date p.opening_hours{
	margin-bottom:10px;
	padding: 0 10px;
}
div#calendar_area div.date p:not(.opening_hours){
	padding-top:35px;
	background:url(../img/top/date_icon.png) no-repeat center top;
}
div#calendar_area div.date p span{
	display:block;
	margin:-3px auto 5px;
	color:#fff;
	font-family: 'Noto Sans Japanese';
	font-size:24px;
	text-align:center;
}
div#calendar_area div.date p span.note{
	font-size:14px;
}
div#calendar_area div.date h2{
	color:#fff;
	font-size:16px;
	text-align:center;
}

div#calendar_area div.date a{
	width:12em;
	display:block;
	margin:0 auto;
	padding:5px 0;
	font-size:14px;
	text-align:center;
	border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	-ms-border-radius:15px;
	background-color:#fff;
	transition:all 0.3s linear;
}
div#calendar_area div.date a:hover{
	color:#fff;
	background-color:#ff6400;
}

/* transform */

div#calendar_area.transform{
	margin-right:-300px;
}

@media screen and (max-width:1500px){
	div#calendar_area {
		width: 232px;
		height: auto;
		padding-bottom:0;
	}
	div#calendar_area.open {
		width: 232px;
		height: auto;
		padding-bottom:15px;
	}
	div#calendar_area div.date{
		margin-bottom:0;
		padding-bottom:70px;
		background-size:cover;
	}
	div#calendar_area.open div.date{
		margin-bottom:10px;
		padding-bottom:15px;
	}
	div#calendar_area div.date p span {
 		margin-top: 0;
	}
	div#calendar_area div.date h2{
		margin-top:0;
		margin-bottom:3px;
		font-size:14px;
	}
	div#calendar_area div.date p.opening_hours{
		margin-bottom:5px;
		font-size:14px;
	}
	div#calendar_area div.date p span {
		font-size: 22px;
		margin:-7px auto 7px;
	}
	div#calendar_area div.date p.opening_hours span{
		margin:-7px auto 5px;
	}
	div#calendar_area div.calendar{
		width:55px;
		height:55px;
		display:block;
		margin:-55px auto 0;
		border-radius:30px 30px 0 0;
		-webkit-border-radius:30px 30px 0 0;
		-moz-border-radius:30px 30px 0 0;
		-ms-border-radius:30px 30px 0 0;
		background-color:#fff;
		overflow:hidden;
		cursor:pointer;
		tarnsition:all 0.3s ease-out;
	}
	/*div#calendar_area div.calendar:hover{
		transform:scale(110%);
	}*/
	div#calendar_area.open div.calendar{
		width:auto;
		height:auto;
		margin:0 auto;
		border-radius:0;
		-webkit-border-radius:0;
		-moz-border-radius:0;
		-ms-border-radius:0;
		background-color:transparent;
	}
	/*div#calendar_area.open div.calendar:hover{
		transform:scale(100%);
	}*/
	div#calendar_area div.calendar h2 {
		padding-top: 55px;
		background-position:center top 14px;
	}
	div#calendar_area div.calendar h2:hover,
	div#calendar_area.open div.calendar h2:hover {
		background-position:center top 12px;
		background-size:33px auto;
	}
}
@media screen and (max-width:1280px){
	div#calendar_area {
		width: 220px;
	}
	div#calendar_area div.date {
		padding: 20px 0 60px;
	}
	div#calendar_area div.date a#calendar_btn {
 		 margin-top: 10px;
	}
}
@media screen and (max-width:1054px){
	div#calendar_area{
		width:55px;
		height:55px;
		max-height:calc(100vh - 45px);
		top:15px;
		right: 80px;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		-ms-border-radius:10px;
		overflow:hidden;
		cursor: pointer;
	}
	div#calendar_area.open{
		width: 280px;
		right:15px;
		padding-bottom: 30px;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		-ms-border-radius:10px;
		overflow-y: auto;
	}
	div#calendar_area:before{
		width:55px;
		height:55px;
		content:"";
		position:absolute;
		top:0;
		left:0;
		dispaly:block;
		background:url(../img/btn_today.png) no-repeat center center;
		background-size:100% auto;
		opacity:1;
		transition:all 0.3s linear;
	}
	div#calendar_area.open:before{
		opacity:0;
		transition:all 0.3s linear;
	}
	div#calendar_area div.date {
		padding-top: 12px;
	}
	div#calendar_area.open div.date {
		padding-top: 20px;
	}
	div#calendar_area.transform{
		margin-right:0;
	}
}

@media screen and (max-width:350px){
	div#calendar_area{
		width:45px;
		height:45px;
		right: 65px;
	}
	div#calendar_area:before{
		width:45px;
		height:45px;
	}
}

/* global_navi
---------------------------------------- */
ul.global_navi{
	margin-bottom:30px;
}


/* slider
---------------------------------------- */
div.slider {
	max-width:1280px;
	max-height:680px;
	margin-top: -90px!important;
}
div.slider ul{
	width:100%;
	height:0!important;
	padding-top:53.13%;
	overflow: hidden;
}
div.slider ul li{
	width:100%;
	height:0!important;
	padding-top:53.13%;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background-repeat:no-rpeat;
	background-position:center center;
	background-size:cover;
	overflow: hidden;
}
div.slider ul li.first {background-image:url(../img/top/visual/1.webp);}
div.slider ul li.second{background-image:url(../img/top/visual/2.webp);}
div.slider ul li.third {background-image:url(../img/top/visual/3.webp);}
div.slider ul li.fourth{background-image:url(../img/top/visual/4.webp);}
div.slider ul li.fifth {background-image:url(../img/top/visual/5.webp);}

div.slider ul li span{
	display:block;
	text-indent:-99999999px;
}
@media screen and (max-width:1054px){
	div.slider,
	div.slider ul{
		width: 100%;
		height: 53.13vw!important;
	}
	div.slider ul li.first{background-image:url(../img/top/visual/1_1054.webp);}
	div.slider ul li.second{background-image:url(../img/top/visual/2_1054.webp);}
	div.slider ul li.third {background-image:url(../img/top/visual/3_1054.webp);}
	div.slider ul li.fourth{background-image:url(../img/top/visual/4_1054.webp);}
	div.slider ul li.fifth {background-image:url(../img/top/visual/5_1054.webp);}
}
@media screen and (max-width:540px){
	div.slider {
		width:100%!important;
		height: auto!important;
		margin-bottom:60px;
		overflow:hidden;
	}
	div.slider ul {
		width:100%!important;
		height: 0!important;
		padding-top: 106.25%;
		transform-origin: top center;
		transform: scale(1);
	}
	div.slider ul li{
		width:100%!important;
		padding-top:106.25%;
		background-size:100% auto;
	}
	div.slider ul li.first {background-image:url(../img/top/visual/1_540.webp);}
	div.slider ul li.second{background-image:url(../img/top/visual/2_540.webp);}
	div.slider ul li.third {background-image:url(../img/top/visual/3_540.webp);}
	div.slider ul li.fourth{background-image:url(../img/top/visual/4_540.webp);}
	div.slider ul li.fifth {background-image:url(../img/top/visual/5_540.webp);}
}


/* mainview
---------------------------------------- */
div#mainview{
	height:350px;
	margin:0 auto 60px;
	padding:0 30px;
}
div#mainview div#slideshow{
	max-width:960px;
	height:290px;
	position:relative;
	margin:0 auto;
}

div#mainview div#slideshow ul,
div#mainview div#slideshow ul li{
	height:290px;
	text-align:center;
	overflow:hidden;
}
div#mainview div#slideshow ul li a img{
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
}
#slideshow{
	max-width:100%!important;
}
#slideshow ul {
	margin-left: 50%!important;
}
#slideshow ul li {
	margin-left: -420px!important; /* 840 / 2 */
	margin-right: 440px !important; /* 840 / 2 + 20 */
}

/*pager*/

div.bx-controls{
	margin:30px auto 0;
	text-align:center;
	letter-spacing:-0.4em;
}
div.bx-pager-item{
	width:80px;
	height:8px;
	display:inline-block;
	margin:0 10px;
	vertical-align:top;
	letter-spacing:normal;
}
a.bx-pager-link{
	width:80px;
	height:8px;
	display:block;
	background-color:rgba(255,255,255,0.85);
	text-indent:-9999999999999999999px;
}
a.bx-pager-link:hover{
	background-color:#ff6400;
}
@media screen and (max-width:1054px){
	div#mainview{
		height:0;
		margin-top:-60px;
		position:relative;
		padding-top:35%;
	}
	div#mainview div#slideshow{
		width: calc(100% - 60px);
		position:absolute;
		top:0;
	}
	div#mainview div#slideshow div.bx-wrapper,
	div#mainview div#slideshow div.bx-wrapper div.bx-viewport,
	div#mainview div#slideshow div.bx-wrapper div.bx-viewport ul,
	div#mainview div#slideshow div.bx-wrapper div.bx-viewport ul li{
		height:auto!important;
	}
	div.bx-controls {
	  margin: 15px auto 0;
	}
}
@media only screen and (max-width: 900px){
	#slideshow ul {
		  margin-left: 0!important;
	}
	#slideshow ul li {
	  margin-left: 0 !important;
	  margin-right: 0 !important;
	}
}
@media only screen and (max-width: 640px){
    div#mainview{
        padding:0 0 35%;
        background:none;
    }
    div#mainview div#slideshow{
		width: 100%;
        height:inherit!important;
		margin-bottom:30px;
        padding-top:0;
    }
    div#mainview div#slideshow ul{
        height:inherit!important;
    }
    div#mainview div#slideshow ul li{
        height:inherit!important;
    }
	div.bx-pager-item {
		width: 9%;
		margin: 0 0.5%;
	}
	div.bx-pager-item a.bx-pager-link {
		width:100%;
	}
}

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

/*#slideshow .bx-prev,
#slideshow .bx-next{ 
	position:relative;
	display:block;
	width:37px;
	height:37px;
}

														
#slideshow .bx-prev, #slideshow .bx-next{  
	display:block;
	width:37px;
	height:37px;
	text-indent:-999999px;
	background:url(../img/top/slide_prev.png) no-repeat 0 0;
}	
#slideshow .bx-next{ 
	background:url(../img/top/slide_next.png) no-repeat 0 0;	
}

#slideshow .bx-prev:hover{background:url(../img/top/slide_prevo.png) no-repeat 0 0;}	
#slideshow .bx-next:hover{background:url(../img/top/slide_nexto.png) no-repeat 0 0;}*/

.bx-wrapper{margin: 0 auto;}

.bx-wrapper .bx-controls-direction a {
	width: 37px;
	height: 37px;
	position:absolute;
	top:170px;
	margin-top: -18px;
}
.bx-wrapper .bx-prev {
	left: 0;
	text-indent:-999999px;
	background:url(../img/top/slide_next.png) no-repeat 0 0;
}
.bx-wrapper .bx-prev:hover {
	background:url(../img/top/slide_nexto.png) no-repeat 0 0;
}
.bx-wrapper .bx-next {
	right: 0;
	text-indent:-999999px;
	background:url(../img/top/slide_prev.png) no-repeat 0 0;
}
.bx-wrapper .bx-next:hover {
	background:url(../img/top/slide_prevo.png) no-repeat 0 0;
}
@media only screen and (max-width: 640px){
    .bx-wrapper .bx-controls-direction{display: none;}
}




/* topics_area
---------------------------------------- */
div#contents div#topics_area{
	width:auto;
	max-width:960px;
	margin:0 auto 90px;
	padding:30px;
	border-radius:25px;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	-ms-border-radius:25px;
	background-color:rgba(255,255,255,0.9);
}

div#contents div#topics_area h2.ttl{
	width:auto;
}

@media screen and (max-width:1054px){
	div#contents div#topics_area {
		width: calc(100% - 120px);
	}
}
@media screen and (max-width: 540px){
	div#contents div#topics_area {
		width: calc(100% - 80px);
	}
	div#contents div#topics_area {
		padding: 20px;
	}
}
@media screen and (max-width:350px){
	div#contents div#topics_area {
		width: calc(100% - 90px);
		padding:15px;
	}
}




/* topics_tab
---------------------------------------- */
div#topics_area ul#tab{
	margin:0 auto 20px;
}
div#topics_area ul#tab li{
	width:7em;
	margin:0 5px;
}

div#topics_area ul#tab li:nth-child(2) a{color:#1493cc;border-color:#1493cc;}
div#topics_area ul#tab li:nth-child(3) a{color:#d0131c;border-color:#d0131c;}
div#topics_area ul#tab li:nth-child(4) a{color:#ff7600;border-color:#ff7600;}
div#topics_area ul#tab li:nth-child(5) a{color:#41a044;border-color:#41a044;}
div#topics_area ul#tab li:nth-child(6) a{color:#143278;border-color:#143278;}
div#topics_area ul#tab li:nth-child(7) a{color:#ff7396;border-color:#ff7396;}

div#topics_area ul#tab li.active a{
	color:#fff;
}
div#topics_area ul#tab li:nth-child(1).active a{background-color:#00998a;}
div#topics_area ul#tab li:nth-child(2).active a{background-color:#1493cc;}
div#topics_area ul#tab li:nth-child(3).active a{background-color:#d0131c;}
div#topics_area ul#tab li:nth-child(4).active a{background-color:#ff7600;}
div#topics_area ul#tab li:nth-child(5).active a{background-color:#41a044;}
div#topics_area ul#tab li:nth-child(6).active a{background-color:#143278;}
div#topics_area ul#tab li:nth-child(7).active a{background-color:#ff7396;}

div#topics_area ul#tab li a:hover{
	color:#fff;
	border-color:#00998a;
	background-color:#00998a;
}



@media screen and (max-width:960px){
	div#topics_area ul#tab {
		text-align:left;
	}
	div#topics_area ul#tab li{
		width:calc(25% - 7.5px);
		margin:0 10px 10px 0;
	}
	div#topics_area ul#tab li:nth-child(4n){
		margin-right:0;
	}
}
@media screen and (max-width: 760px){
	div#container ul#tab li:nth-child(1){
		margin-bottom:0;
		margin:0 0 10px 0;
	}
	div#topics_area ul#tab.open li{
		display: inline-block;
	}
	div#topics_area ul#tab.open li:nth-child(4n){
		margin-right:10px;
	}
	div#topics_area ul#tab.open li:nth-child(4n+1){
		margin-right:0;
	}
}
@media screen and (max-width:540px){
	div#topics_area ul#tab li{
		width:calc(33.33% - 6.66px)!important;
	}
	div#topics_area ul#tab.open li:nth-child(4n),
	div#topics_area ul#tab.open li:nth-child(4n+1){
		margin-right:10px;
	}
	div#topics_area ul#tab.open li:nth-child(3n+1){
		margin-right:0;
	}
}
@media screen and (max-width:480px){
	div#topics_area ul#tab li{
		width:calc(50% - 5px)!important;
	}
	div#topics_area ul#tab.open li:nth-child(4n),
	div#topics_area ul#tab.open li:nth-child(4n+1),
	div#topics_area ul#tab.open li:nth-child(3n+1){
		margin-right:10px;
	}
	div#topics_area ul#tab.open li:nth-child(2n+1){
		margin-right:0;
	}
}


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




/* topics_list
---------------------------------------- */
div#topics_area div.list{
	width:100%;
}

div#topics_area div.list div.box{
	width:calc(100% - 10em);
	position:relative;
	margin:0;
	padding:15px 0 15px 10em;
	border-top:1px #ccc solid;
	transition:all 0.3s linear;
}

div#topics_area div.list div.box:before{
	width:9em;
	content:"お知らせ";
	position:absolute;
	top:15px;
	left:0;
	display:block;
	padding:5px 0 4px;
	color:#fff;
	line-height:1.4;
	text-align:center;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	background-color:#00998a;
}


div#topics_area div.list div.box.news:before{content:"ニュース";background-color:#1493cc;}
div#topics_area div.list div.box.event:before{content:"イベント";background-color:#d0131c;}
div#topics_area div.list div.box.course:before{content:"体験講座";background-color:#ff7600;}
div#topics_area div.list div.box.course1:before{content:"体験講座";background-color:#ff7600;}
div#topics_area div.list div.box.course2:before{content:"創作工房";background-color:#ff7600;}
div#topics_area div.list div.box.course3:before{content:"味わい工房";background-color:#ff7600;}
div#topics_area div.list div.box.course4:before{content:"おさかな研究室";background-color:#ff7600;}
div#topics_area div.list div.box.course5:before{content:"つり池・つかみどり池";background-color:#ff7600;}
div#topics_area div.list div.box.app:before{content:"募集";background-color:#41a044;}
div#topics_area div.list div.box.area:before{content:"地域情報";background-color:#143278;}
div#topics_area div.list div.box.press:before{content:"募集";background-color:#41a044;}
div#topics_area div.list div.box.season:before{content:"季節情報";background-color:#ff7396;}
div#topics_area div.list div.box.guide:before{content:"水遊園のご案内";background-color:#00b4ff;}
div#topics_area div.list div.box.sightseeing:before{content:"地域情報";background-color:#143278;}

div#topics_area div.list div.box p a img{
	display:none;
}
div#topics_area div.list div.box p a span.spotname{
	display:block;
	min-height:20px;
	font-size:16px;
	font-weight:bold;
}
@media screen and (max-width:540px){
	div#topics_area div.list div.box {
		width:100%;
		padding: 55px 0 15px;
	}
}


/* topics_bnr
---------------------------------------- */
div#topics_area ul#topics_bnr{
	margin-top:15px;
	padding:15px 0;
	border-top:1px #ccc solid;
	border-bottom:1px #ccc solid;
}
div#topics_area ul#topics_bnr li{
	width:22.5%;
	margin:5px 3.33% 5px 0;
}
div#topics_area ul#topics_bnr li:nth-child(4n){
	margin-right:0;
}

@media screen and (max-width:860px){
	div#topics_area ul#topics_bnr li{
		width:calc(33.33% - 10px);
		margin:5px 15px 5px 0;
	}
	div#topics_area ul#topics_bnr li:nth-child(4n){
		margin-right:15px;
	}
	div#topics_area ul#topics_bnr li:nth-child(3n){
		margin-right:0;
	}
}
@media screen and (max-width:540px){
	div#topics_area ul#topics_bnr li{
		width:calc(50% - 7.5px);
	}
	div#topics_area ul#topics_bnr li:nth-child(3n){
		margin-right:15px;
	}
	div#topics_area ul#topics_bnr li:nth-child(2n){
		margin-right:0;
	}
}


/* event_course_area
---------------------------------------- */
div#contents div#event_course_area,
div#contents div#sightseeing_area{
	width:100%;
	background-color:rgba(255,255,255,0.9);
}
div#event_course_area ul,
div#sightseeing_area ul{
	width:100%;
	max-width:1500px;
	margin:0 auto;
	text-align:center;
}
div#event_course_area ul li,
div#sightseeing_area ul li{
	width:calc(16.66% - 30px);
	max-width:200px;
	margin:0 15px 15px;
}


@media screen and (max-width:1440px){
	div#event_course_area ul,
	div#sightseeing_area ul{
		width:auto;
		max-width:none;
		margin:0 15px;
	}
}

@media screen and (max-width:1054px){
	div#event_course_area ul li,
	div#sightseeing_area ul li{
		width:calc(20% - 30px);
	}
}
@media screen and (max-width:860px){
	div#event_course_area ul li,
	div#sightseeing_area ul li{
		width:calc(25% - 30px);
	}
}
@media screen and (max-width:640px){
	div#event_course_area ul li,
	div#sightseeing_area ul li{
		width:calc(33.33% - 30px);
	}
}
@media screen and (max-width:510px){
	div#event_course_area ul li,
	div#sightseeing_area ul li{
		width:calc(50% - 30px);
	}
}
@media screen and (max-width:350px){
	div#contents div#event_course_area,
	div#contents div#sightseeing_area{
		width:auto;
	}
	div#event_course_area ul li,
	div#sightseeing_area ul li{
		width:100%;
		margin:0 auto 15px;
	}
}


/* btn */
@media screen and (max-width:540px){
	div#contents div#event_course_area a.btn,
	div#contents div#sightseeing_area a.btn,
	div#contents div#creature_area a.btn{
		width:calc(100% - 5em - 30px);
	}
}

/* sightseeing_area
---------------------------------------- */





/* creature_area
---------------------------------------- */
div#contents div#creature_area{
}
div#creature_area h2.ttl{
	color:#fff;
	border-bottom-color:#fff;
}
div#creature_area ul{
	width:100%;
	max-width:1176px;
	margin:0 auto;
	text-align:center;
}
div#creature_area ul li{
	position:relative;
	margin:0 15px 30px;
}
div#creature_area ul li a span.pic{
	width:138px;
	height:138px;
	padding-top:0;
	border-radius:69px;
	-webkit-border-radius:69px;
	-moz-border-radius:69px;
	-ms-border-radius:69px;
}
div#creature_area ul 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;
}
div#creature_area ul li a:hover span.name{
	opacity:100%;
}
div#creature_area ul 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;
}
div#creature_area a.btn{
	color:#00998a;
	background-color:#fff;
	background-image:url(../img/arr_btn2.png);
}
div#creature_area a.btn:hover{
	color:#fff;
	background-color:#ff6400;
	background-image:url(../img/arr_btn.png);
}
	
@media screen and (max-width:1192px){
	div#creature_area ul li:nth-child(13),
	div#creature_area ul li:nth-child(14){
		display:none;
	}
}
@media screen and (max-width:1024px){
	div#creature_area ul li:nth-child(11),
	div#creature_area ul li:nth-child(12){
		display:none;
	}
}
@media screen and (max-width:857px){
	div#creature_area ul li:nth-child(11),
	div#creature_area ul li:nth-child(12){
		display:inline-block;
	}
}
@media screen and (max-width:540px){
	div#creature_area ul li{
		margin:0 10px 10px;
	}
	div#creature_area ul li a span.name {
		width: 50%;
		display: block;
		text-align: center;
		white-space: normal;
	}
	div#creature_area ul li a:hover span.name {
		top:auto;
		bottom:100%;
	}
}
@media screen and (max-width:350px){
	div#creature_area ul li{
		width:calc(50% - 5px);
		margin:0 10px 10px 0;
	}
	div#creature_area ul li:nth-child(2n){
		margin-right: 0;
	}
	div#creature_area ul li a span.pic {
		width: 100%;
		height: 0;
		padding-top:100%;
	}
}





/* sightseeing_area
---------------------------------------- */
div#contents div#sightseeing_area{
	background-color:rgba(255,255,255,0.9);
}
div#sightseeing_area div#plan{
	margin:0 auto 60px;
}
div#sightseeing_area h2.ttl{
	border-bottom:none;
}



/* sns_area
---------------------------------------- */
div#sns_area{
	width:auto;
	max-width:960px;
}
div#sns_area h2.ttl{
	width:auto;
	color:#fff;
	border-bottom-color:#fff;
}
div#sns_area ul{ 
	text-align:center;
}
div#sns_area ul li{
	width:140px;
	height:140px;
	margin:0 20px;
	padding:0;
	text-algin:center;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	overflow:hidden;
	background-color:#fff;
}
div#sns_area ul li a{
	width:calc(100% - 40px);
	display:block;
	padding:20px;
}
div#sns_area ul li a:hover{
	width:100%;
	padding:0;
}
div#sns_area ul li a img{
	width:100%;
	display:block;
}
@media screen and (max-width:800px){
	div#sns_area ul{
		margin:0 15px;
	}
	div#sns_area ul li{
		width:23%;
		height:0;
		position:relative;
		margin:0 1%;
		padding-top:23%;
	}
	div#sns_area ul li a{
		width:70%;
		position:absolute;
		top:0;
		padding:15%;
	}
}
@media screen and (max-width:350px){
	div#sns_area ul{
		margin:0;
	}
}

/* bnr_area
---------------------------------------- */

ul#bnr_area{
	margin:0 auto 90px;
	text-align:center;
}
ul#bnr_area li {
	width:200px;
	margin:0 15px 15px;
}
ul#bnr_area li a,
ul#bnr_area li span{
	display:block;
	color:#fff;
	font-size:12px;
	line-height:1.7;
}
ul#bnr_area li a img,
ul#bnr_area li span img{
	display:block;
	margin-bottom:5px;
}




/* lazyloaded
---------------------------------------- */
.lazyloaded {
	animation:lazyload 1s linear forwards;
}
@-webkit-keyframes lazyload {
	0%   { opacity:0;}
	100% { opacity:1;}
}