@charset "utf-8";

/* body::before{
	content: "";
	display: block;
	position: fixed;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	height: 100%;
	background: #000;
	z-index: 9999;
} */
body{
	padding-top: var(--header-height);
}
.main{
	padding-top: 14rem;
	padding-bottom: 16.5rem;
}
.header-nav{
	display: none;
}
.header-indexnav{
	margin-right: 2.6rem;
	display: inline-block;
	transform: translateY(-50%);
}
.header-indexnav__inner{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.header-indexnav__item:not(:last-child){
	margin-right: 2.8rem;
}
.header-indexnav__item a{
	padding-left: 3.5rem;
	line-height: 1;
	display: block;
	position: relative;
}
.header-indexnav__item a::before{
	content: "";
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	position: absolute;
	background-image: url(../images/common/icon_arrow-lightblue-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.header-indexnav__item span{
	width: 100%;
	height: 2.4rem;
	font-size: 1.8rem;
	padding-bottom: .4rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.header-indexnav{
		margin-right: 2rem;
	}
	.header-indexnav__inner{
		flex-direction: column;
		align-items: flex-start;
	}
	.header-indexnav__item:not(:last-child){
		margin-right: 0;
		margin-bottom: 1rem;
	}
	.header-indexnav__item a{
		padding-left: 3rem;
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

	.header-indexnav{
		display: none;
	}

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

	body{
		padding-top: var(--header-height);
	}
	.main{
		padding-top: 6rem;
		padding-bottom: 17.5rem;
	}
	.header-indexnav{
		display: none;
	}

}



/*-------------------------------
	パーツ
-------------------------------*/

.Index-title__en{
	font-family: var(--en);
	font-size: 8rem;
	margin-bottom: 1.5rem;
	letter-spacing: .03em;
	font-weight: 500;
	line-height: 1;
	display: inline-block;
}
.Index-title__jp{
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Index-title__en{
		font-size: 11rem;
	}
	.Index-title__jp{
		font-size: 3.2rem;
	}

}



/*-------------------------------
	メインビジュアル
-------------------------------*/

.Mainvisual{
	height: calc(100vh - var(--header-height));
	position: relative;
}
.Mainvisual-nav{
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 6000;
	transform: translateY(50%);
}
.Mainvisual-nav__inner{
	width: 100%;
	border-radius: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.Mainvisual-nav__item{
	width: calc(100% / 6);
	height: 18rem;
}
.Mainvisual-nav__item a{
	width: 100%;
	height: 100%;
	font-size: 2.2rem;
	padding-top: 4rem;
	font-weight: 500;
	line-height: calc(3.3 / 2.2);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
}
.Mainvisual-nav__item a::before{
	content: "";
	display: block;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	top: -2rem;
	margin-left: auto;
	margin-right: auto;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
.Mainvisual-nav__item.-open a::before{
	background-image: url(../images/index/icon_open-lightblue.svg);
}
.Mainvisual-nav__item.-event a::before{
	background-image: url(../images/index/icon_event-lightblue.svg);
}
.Mainvisual-nav__item.-access a::before{
	background-image: url(../images/index/icon_access-lightblue.svg);
}
.Mainvisual-nav__item.-freshwater a::before{
	background-image: url(../images/index/icon_freshwater-lightblue.svg);
}
.Mainvisual-nav__item.-shop a::before{
	background-image: url(../images/index/icon_shop-lightblue.svg);
}
.Mainvisual-nav__item.-group a::before{
	background-image: url(../images/index/icon_group-lightblue.svg);
}

.Mainvisual__inner{
	height: 100%;
}
.Mainvisual__item{
	width: 100%;
	height: 100%;
	border-radius: 4rem;
	display: block;
	overflow: hidden;
}
.Mainvisual__item > span,
.Mainvisual__item > a{
	width: 100%;
	height: 100%;
	display: block;
	opacity: 1 !important;
}
.Mainvisual__item picture{
	width: 100%;
	height: 100%;
	display: block;
}
.Mainvisual__item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.Mainvisual-info_panel-wrap{
	position: absolute;
	right: 0;
	bottom: 14rem;
	z-index: 6000;
	transform: translateX(4rem);
}
.Mainvisual-info_panel{
	background: var(--gradcolor);
	width: 50rem;
	border-radius: 1rem;
	padding: 2.5rem 7rem 2.5rem 2.5rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.Mainvisual-info_panel__time{
	width: calc(100% - 19rem);
}
.Mainvisual-info_panel__time-title{
	width: 100%;
	font-size: 1.8rem;
	margin-bottom: 1.6rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Mainvisual-info_panel__time-title::before{
	content: "";
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	background-image: url(../images/common/icon_time-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.Mainvisual-info_panel__time-title span{
	width: calc(100% - 2.4rem);
	padding-left: 1rem;
	line-height: 1;
	display: block;
}
.Mainvisual-info_panel__time-number{
	font-size: 3.2rem;
	margin-bottom: .9rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}
.Mainvisual-info_panel__time-last{
	font-size: 1.6rem;
	line-height: 1;
	color: #fff;
}
.Mainvisual-info_panel__button-wrap{
	width: 19rem;
}
.Mainvisual-info_panel__button{
	width: 100%;
}
.Mainvisual-info_panel__button:not(:last-child){
	margin-bottom: 1rem;
}

.Mainvisual-info_panel-wrap.-closed .Mainvisual-info_panel__button.-event a{
	pointer-events: none;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Mainvisual{
		height: auto;
	}
	.Mainvisual__inner{
		height: 75rem;
	}
	.Mainvisual__item{
		border-radius: 4rem;
		overflow: hidden;
	}

	.Mainvisual-info_panel-wrap{
		margin-bottom: 4rem;
		margin-top: -5.5rem;
		position: relative;
		top: 0;
		left: 0;
		bottom: unset;
		transform: translate(0);
	}
	.Mainvisual-info_panel{
		width: 100%;
		border-radius: 2rem;
		padding: 3.6rem 3rem 3.6rem 3.6rem;
	}
	.Mainvisual-info_panel__time{
		width: calc(100% - 27.4rem);
		padding-top: .4rem;
	}
	.Mainvisual-info_panel__time-title{
		font-size: 2.6rem;
		margin-bottom: 2.2rem;
	}
	.Mainvisual-info_panel__time-title::before{
		width: 3.4rem;
		height: 3.4rem;
	}
	.Mainvisual-info_panel__time-title span{
		width: calc(100% - 3.4rem);
		padding-left: 1.6rem;
	}
	.Mainvisual-info_panel__time-number{
		font-size: 4.4rem;
		margin-bottom: 1.2rem;
	}
	.Mainvisual-info_panel__time-last{
		font-size: 2.4rem;
	}
	.Mainvisual-info_panel__button-wrap{
		width: 27.4rem;
	}
	.Mainvisual-info_panel__button{
		height: 8.6rem;
	}
	.Mainvisual-info_panel__button:not(:last-child){
		margin-bottom: 2rem;
	}
	.Mainvisual-info_panel__button a{
		font-size: 2.6rem;
		padding-right: 3rem;
	}
	.Mainvisual-info_panel__button a::after{
		right: 1.6rem;
	}

	.Mainvisual-nav{
		background: var(--subcolor);
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
		position: static;
		transform: translateY(0%);
	}
	.Mainvisual-nav__inner{
		width: 100%;
		border-radius: 0;
		gap: 2rem;
		flex-wrap: wrap;
		background: none;
	}
	.Mainvisual-nav__item{
		width: calc((100% - (2rem * 2)) / 3);
		height: auto;
	}
	.Mainvisual-nav__item a{
		font-size: 2.8rem;
		line-height: calc(4.2 / 2.8);
		padding: 2.5rem 2rem 2.2rem;
		border-radius: 1.5rem;
		background: #fff;
		flex-direction: column;
	}
	.Mainvisual-nav__item a::before{
		width: 8.4rem;
		height: 8.4rem;
		margin-bottom: 2rem;
		position: static;
	}

}



/*-------------------------------
	大切なお知らせ
-------------------------------*/

.Notice{
	position: relative;
	z-index: 6000;
}
.Notice__inner{
	border: 3px solid var(--maincolor);
	width: 100%;
	padding: 3rem 3.5rem 3rem 2.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: #fff;
}
.Notice__title{
	color: var(--maincolor);
	width: 25rem;
	font-weight: 500;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Notice__title::before{
	content: "";
	display: block;
	width: 2.8rem;
	height: 2.8rem;
	background-image: url(../images/index/icon_notice.svg);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.Notice__title span{
	width: calc(100% - 2.8rem);
	padding-left: 1.2rem;
	line-height: 1;
	display: block;
}
.Notice__body{
	width: calc(100% - 25rem);
}
.Notice-block:not(:last-child){
	margin-bottom: 1rem;
}
.Notice-block a{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.Notice-block__time{
	font-family: var(--en);
	width: 11rem;
	line-height: calc(3.5 / 2);
	transform: translateY(.1em);
	display: block;
	color: #666;
}
.Notice-block__title{
	color: var(--maincolor);
	width: calc(100% - 11rem);
	text-decoration: underline;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

	.Notice__title{
		width: 22.5rem;
	}
	.Notice__body{
		width: calc(100% - 22.5rem);
	}
	.Notice-block a{
		flex-direction: column;
	}
	.Notice-block__title{
		width: 100%;
	}

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

	.Notice__inner{
		border-width: .5rem;
		padding: 4rem 3rem 3.5rem;
		flex-direction: column;
	}
	.Notice__title{
		width: 100%;
		margin-bottom: 4rem;
	}
	.Notice__title::before{
		width: 4rem;
		height: 4rem;
	}
	.Notice__title span{
		width: auto;
		padding-left: 1.8rem;
	}
	.Notice__body{
		width: 100%;
	}
	.Notice-block:not(:last-child){
		margin-bottom: 3.5rem;
	}
	.Notice-block a{
		flex-direction: column;
	}
	.Notice-block__time{
		width: 100%;
		font-size: 2.8rem;
		margin-bottom: .5rem;
		line-height: 1;
		transform: translateY(0);
	}
	.Notice-block__title{
		width: 100%;
		font-size: 2.8rem;
		line-height: calc(4.2 / 2.8);
	}

}



/*-------------------------------
	バナースライド
-------------------------------*/

.Notice + .Banner{
	margin-top: -5rem;
}
.Banner{
	position: relative;
	z-index: 4000;
}
.Banner__inner{
	background: var(--gradcolor_light);
	padding-top: 15rem;
	padding-bottom: 5.6rem;
}
.Banner__item-wrap{
	padding-left: 0;
}
.Banner__item-wrap.-moving{
	padding-left: calc((61rem - 30.6rem) / 2);
}
.Banner__item-wrap.-moving_last{
	margin-left: calc(((61rem - 30.6rem) / 2) * -1);
}
.Banner__item{
	width: 30.6rem;
}
.Banner__item a{
	display: block;
}
.Banner__item img{
	width: 100%;
	height: 11.4rem;
	object-fit: cover;
}
.Banner__item.swiper-slide-active{
	width: 61rem;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	transform: translateY(-3.8rem);
	transform: translateY(calc(((19rem - 11.4rem) / 2) * -1))
}
.Banner__item.swiper-slide-active img{
	height: 19rem;
}

.Banner-controller{
	margin-top: -2rem;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.Banner-controller__arrow{
	width: 3rem;
	height: 3rem;
	margin-top: 0;
	background-image: url(../images/common/icon_arrow-transparent.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: static;
}
.Banner-controller__arrow::after{
	display: none;
}
.Banner-controller__arrow.-prev{
	transform: scale(-1,1);
}
.Banner-controller__pagination{
	width: 100%;
	padding-left: 1.8rem;
	padding-right: 1.8rem;
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Banner-controller__pagination .swiper-pagination-bullet{
	width: 1rem;
	height: 1rem;
	background: #fff;
	opacity: 1;
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}
.Banner-controller__pagination .swiper-pagination-bullet-active{
	background: var(--maincolor);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Banner__inner-wrap{
		padding-left: 0;
		padding-right: 0;
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Banner__inner{
		padding-top: 16rem;
		padding-bottom: 3rem;
	}
	.Banner__item-wrap{
		padding-left: 0;
	}
	.Banner__item-wrap.-moving{
		padding-left: calc((67rem - 34.4rem) / 2);
	}
	.Banner__item-wrap.-moving_last{
		margin-left: calc(((67rem - 34.4rem) / 2) * -1);
	}
	.Banner__item{
		width: 34.4rem;
	}
	.Banner__item img{
		height: 12.8rem;
	}
	.Banner__item.swiper-slide-active{
		width: 67rem;
		padding-left: 3.5rem;
		padding-right: 3.5rem;
		transform: translateY(calc(((22.4rem - 12.8rem) / 2) * -1));
	}
	.Banner__item.swiper-slide-active img{
		height: 22.4rem;
	}

	.Banner-controller__arrow{
		width: 4rem;
		height: 4rem;
	}
	.Banner-controller__pagination{
		padding-left: 2.7rem;
		padding-right: 2.7rem;
	}
	.Banner-controller__pagination .swiper-pagination-bullet{
		width: 1.3rem;
		height: 1.3rem;
		margin-left: 1.3rem !important;
		margin-right: 1.3rem !important;
	}

}



/*-------------------------------
	イベント＆体験
-------------------------------*/

.Event{
	padding-top: 10rem;
	padding-bottom: 9.5rem;
}
.Event__inner{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.Event__header{
	width: 100%;
	margin-bottom: 6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Event-title__en{
	color: var(--gradcolor2);
}
.Event__button-wrap{
	width: 50rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Event__body{
	width: 100%;
	gap: 3.5rem 5.5rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
.Event__body::after{
	content: "";
	display: block;
	width: calc((100% - (5.5rem * 2)) / 3);
	order: 9999;
}
.Event__body:has(.Event-block__no-data)::after{
	display: none;
}
.Event-block{
	width: calc((100% - (5.5rem * 2)) / 3);
}
.Event-block__image{
	width: 100%;
	height: 22rem;
	margin-bottom: 3rem;
	border-radius: 2rem;
	overflow: hidden;
}
.Event-block__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.Event-block__title{
	font-size: 2.2rem;
	margin-bottom: .8rem;
	line-height: calc(3.3 / 2.2);
	font-weight: 700;
}
.Event-block__schedule{
	color: var(--maincolor);
	width: 100%;
	font-size: 1.8rem;
	line-height: calc(2.7 / 1.8);
	position: relative;
	display: block;
}

.Event-active{
	width: calc(100% + 16rem);
	margin-top: 10rem;
	padding: 7rem 8rem 6rem;
	background: rgba(37,221,188,.12);
	position: relative;
}
.Event-active__title{
	color: var(--gradcolor2);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	position: absolute;
	left: 0;
	top: -.5em;
	right: 0;
	text-align: center;
}
.Event-active__inner{
	width: 100%;
	gap: 3.5rem 5.5rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
.Event-active__inner::after{
	content: "";
	display: block;
	width: calc((100% - (5.5rem * 2)) / 3);
	order: 9999;
}
.Event-active__inner:has(.Event-block__no-data)::after{
	display: none;
}

/* 終了の表示 */
.Event-block.-end .Event-block__image{
    position: relative;
}
.Event-block.-end .Event-block__image::before,
.Event-block.-end .Event-block__image::after{
    content: "";
    width: 100%;
    height: 10rem;
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.Event-block.-end .Event-block__image::before{
    background: rgba(0,0,0,.6);
    mix-blend-mode: multiply;
}
.Event-block.-end .Event-block__image::after{
    content: "終了しました";
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1380px) and (min-width: 769px){

	.Event__body{
		gap: 3.5rem 3rem;
	}
	.Event__body::after{
		width: calc((100% - (3rem * 2)) / 3);
	}
	.Event-block{
		width: calc((100% - (3rem * 2)) / 3);
	}
	.Event-active__inner{
		gap: 3.5rem 3rem;
	}
	.Event-active__inner::after{
		width: calc((100% - (3rem * 2)) / 3);
	}

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Event{
		padding-top: 8rem;
		padding-bottom: 15rem;
	}
	.Event__button-wrap{
		width: 100%;
		flex-direction: column;
	}
	.Event__button:not(:last-child){
		margin-bottom: 2rem;
	}
	.Event__body{
		gap: 5.5rem 0;
		flex-direction: column;
	}
	.Event__body::after{
		display: none;
	}
	.Event-block{
		width: 100%;
	}
	/* .Event-block:nth-child(n+4){
		display: none;
	} */
	.Event-block a{
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.Event-block__image{
		width: 30rem;
		height: 20rem;
		margin-bottom: 0;
	}
	.Event-block__body{
		width: calc(100% - 30rem);
		padding-left: 4rem;
	}
	.Event-block__title{
		font-size: 3.2rem;
		margin-bottom: 1.8rem;
		line-height: calc(4.8 / 3.2);
	}
	.Event-block__schedule{
		font-size: 2.8rem;
		padding-left: 0;
		line-height: calc(4.2 / 2.8);
	}
	.Event-block__schedule::before{
		line-height: calc(4.2 / 2.8);
		margin-right: .8rem;
		position: static;
	}

	.Event-active{
		width: calc(100% + (3.5rem * 2));
		margin-bottom: 6rem;
		padding: 8.5rem 3.5rem 5.5rem;
	}
	.Event-active__title{
		font-size: 4.8rem;
	}
	.Event-active__inner{
		gap: 5.5rem 0;
	}
	.Event-active__inner::after{
		display: none;
	}

}



/*-------------------------------
	常設展示のご紹介
-------------------------------*/

.Freshwater{
	padding-top: 22.5rem;
	position: relative;
}
.Freshwater::before{
	content: "";
	display: block;
	width: 100%;
	height: 18rem;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	background-image: url(../images/index/obj_freshwater.png);
	background-image: image-set(url(../images/index/obj_freshwater.png) 1x, url(../images/index/obj_freshwater@2x.png) 2x);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}
.Freshwater__title{
	width: 100%;
	font-size: 6.4rem;
	margin-bottom: 6.8rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: #fff;
	position: relative;
}
.Freshwater__title::after{
	content: "";
	display: block;
	width: 83.8rem;
	height: 17.2rem;
	position: absolute;
	right: -61.2rem;
	top: -22.5rem;
	background-image: url(../images/index/obj_freshwater-sakana.png);
	background-image: image-set(url(../images/index/obj_freshwater-sakana.png) 1x, url(../images/index/obj_freshwater-sakana@2x.png) 2x);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.Freshwater-tab{
	width: 100%;
	margin-bottom: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Freshwater-tab__item{
	border: 2px solid var(--subcolor);
	color: var(--subcolor);
	font-family: var(--en);
	width: 12rem;
	height: 6rem;
	font-weight: 500;
	font-size: 2.8rem;
	letter-spacing: .03em;
	border-radius: 3rem;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.Freshwater-tab__item:not(:last-child){
	margin-right: 1.4rem;
}
.Freshwater-tab__item.-current{
	background: var(--subcolor);
	color: #fff;
	border-color: #fff;
}

.Freshwater-block-wrap{
	width: 100%;
}
.Freshwater-block{
	visibility: hidden;
	height: 0;
	border-radius: 4rem;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
}
.Freshwater-block::before{
	transition: var(--transition);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	opacity: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.Freshwater-block__inner{
	width: 100%;
	padding: 10.5rem 4.5rem 4rem 6rem;
	position: relative;
}
.Freshwater-block__floor{
	background: var(--subcolor);
	font-family: var(--en);
	width: 20rem;
	height: 6rem;
	font-size: 3.2rem;
	font-weight: 600;
	border-bottom-left-radius: 2rem;
	border-bottom-right-radius: 2rem;
	color: #fff;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.Freshwater-block__body{
	width: 100%;
	margin-bottom: 1.8rem;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}
.Freshwater-block__content{
	width: calc(100% - 36.4rem);
}
.Freshwater-block__title{
	color: var(--maincolor);
	font-size: 4rem;
	margin-bottom: 2.2rem;
	font-weight: 700;
	line-height: calc(6 / 4);
}
.Freshwater-block__image{
	width: 36.2rem;
}
.Freshwater-block__image img{
	width: 100%;
}
.Freshwater-block__button{
	margin-left: auto;
	margin-right: auto;
}

.Freshwater-block.-current{
	visibility: visible;
	height: auto;
}
.Freshwater-block.-current::before{
	opacity: 1;
}

.Freshwater-block.-floor2 .Freshwater-block__image img{
	width: calc(100% + 3.6rem);
	transform: translateX(-1.3rem);
}
.Freshwater-block.-floor4::before{
	background-image: url(../images/index/bg_freshwater-4f.jpg);
	/* background-image: image-set(url(../images/index/bg_freshwater-4f.jpg) 1x, url(../images/index/bg_freshwater-4f@2x.jpg) 2x); */
}
.Freshwater-block.-floor3::before{
	background-image: url(../images/index/bg_freshwater-3f.jpg);
	/* background-image: image-set(url(../images/index/bg_freshwater-3f.jpg) 1x, url(../images/index/bg_freshwater-3f@2x.jpg) 2x); */
}
.Freshwater-block.-floor2::before{
	background-image: url(../images/index/bg_freshwater-2f.jpg);
	/* background-image: image-set(url(../images/index/bg_freshwater-2f.jpg) 1x, url(../images/index/bg_freshwater-2f@2x.jpg) 2x); */
}
.Freshwater-block.-floor1::before{
	background-image: url(../images/index/bg_freshwater-1f.jpg);
	/* background-image: image-set(url(../images/index/bg_freshwater-1f.jpg) 1x, url(../images/index/bg_freshwater-1f@2x.jpg) 2x); */
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

	.Freshwater-block__body{
		flex-direction: column;
	}
	.Freshwater-block__content{
		width: 100%;
		margin-bottom: 2.5rem;
		text-align: center;
	}
	.Freshwater-block__image{
		margin-left: auto;
		margin-right: auto;
	}

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

	.Freshwater{
		padding-top: 14rem;
		padding-bottom: 7.5rem;
	}
	.Freshwater::before{
		height: 5.8rem;
		top: -1px;
		background-image: url(../images/index/sp_obj_freshwater.png);
		background-image: image-set(url(../images/index/sp_obj_freshwater.png) 1x, url(../images/index/sp_obj_freshwater@2x.png) 2x);
	}
	.Freshwater__title{
		margin-bottom: 5.6rem;
	}
	.Freshwater__title::after{
		width: 65rem;
		height: 13.3rem;
		right: -17rem;
		top: -21.8rem;
	}
	.Freshwater-tab{
		max-width: 54rem;
		margin-bottom: 4.8rem;
		margin-left: auto;
		margin-right: auto;
	}
	.Freshwater-tab__item{
		width: calc((100% - (2rem * 3)) / 3);
		height: 8rem;
		font-size: 3.7rem;
		letter-spacing: .03em;
		border-radius: 4rem;
	}
	.Freshwater-tab__item:not(:last-child){
		margin-right: 2rem;
	}

	.Freshwater-block-wrap{
		max-width: 56rem;
		margin-left: auto;
		margin-right: auto;
	}
	.Freshwater-block__inner{
		padding: 12.5rem 4.5rem 4rem 4.5rem;
	}
	.Freshwater-block__floor{
		width: 18rem;
		height: 9rem;
		font-size: 4.8rem;
		border-bottom-left-radius: 3rem;
		border-bottom-right-radius: 3rem;
	}
	.Freshwater-block__body{
		margin-bottom: 4rem;
		flex-direction: column;
	}
	.Freshwater-block__content{
		width: 100%;
		margin-bottom: 4rem;
	}
	.Freshwater-block__title{
		font-size: 4.2rem;
		margin-bottom: 2.5rem;
		line-height: calc(6.3 / 4.2);
		text-align: center;
	}
	.Freshwater-block__text{
		font-size: 2.6rem;
		line-height: calc(3.9 / 2.6);
		text-align: center;
	}
	.Freshwater-block__image{
		width: 44.7rem;
		height: 25.5rem;
		margin-left: auto;
        margin-right: auto;
	}
	.Freshwater-block__button{
		width: 40rem;
		margin-left: auto;
		margin-right: auto;
	}
	.Freshwater-block__button a{
		font-size: 2.8rem;
		padding-right: 1.5rem;
	}
	.Freshwater-block__button a::after{
		width: 3.6rem;
		height: 3.6rem;
	}


	.Freshwater-block.-floor2 .Freshwater-block__image img{
		width: calc(100% + 2.6rem);
		transform: translateX(0);
	}
	.Freshwater-block.-floor4::before{
		background-image: url(../images/index/sp_bg_freshwater-4f.jpg);
		/* background-image: image-set(url(../images/index/sp_bg_freshwater-4f.jpg) 1x, url(../images/index/sp_bg_freshwater-4f@2x.jpg) 2x); */
	}
	.Freshwater-block.-floor3::before{
		background-image: url(../images/index/sp_bg_freshwater-3f.jpg);
		/* background-image: image-set(url(../images/index/sp_bg_freshwater-3f.jpg) 1x, url(../images/index/sp_bg_freshwater-3f@2x.jpg) 2x); */
	}
	.Freshwater-block.-floor2::before{
		background-image: url(../images/index/sp_bg_freshwater-2f.jpg);
		/* background-image: image-set(url(../images/index/sp_bg_freshwater-2f.jpg) 1x, url(../images/index/sp_bg_freshwater-2f@2x.jpg) 2x); */
	}
	.Freshwater-block.-floor1::before{
		background-image: url(../images/index/sp_bg_freshwater-1f.jpg);
		/* background-image: image-set(url(../images/index/sp_bg_freshwater-1f.jpg) 1x, url(../images/index/sp_bg_freshwater-1f@2x.jpg) 2x); */
	}

}



/*-------------------------------
	企画展
-------------------------------*/

.Exhibition{
	padding-top: 10rem;
	padding-bottom: 28rem;
	margin-bottom: 7rem;
	position: relative;
	z-index: 6000;
}
.Exhibition::before,
.Exhibition::after{
	background: var(--gradcolor_light);
	content: "";
	display: block;
	width: 160rem;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	margin-left: auto;
	margin-right: auto;
}
.Exhibition::after{
	mix-blend-mode: multiply;
}
.Exhibition__inner-wrap{
	position: relative;
}
.Exhibition__inner-wrap::after{
	content: "";
	display: block;
	width: 100%;
	height: 18rem;
	position: absolute;
	left: 0;
	bottom: -28rem;
	right: 0;
	background-image: url(../images/index/obj_exhibition.png);
	background-image: image-set(url(../images/index/obj_exhibition.png) 1x, url(../images/index/obj_exhibition@2x.png) 2x);
	background-size: 100%;
	background-position: bottom center;
	background-repeat: no-repeat;
}
.Exhibition__title{
	color: var(--maincolor);
	font-size: 4.8rem;
	margin-bottom: 4.5rem;
	line-height: 1;
	font-weight: 700;
	text-align: center;
}
.Exhibition__image a{
	display: block;
}
.Exhibition__image img{
	width: 100%;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Exhibition{
		padding-top: 7.4rem;
		padding-bottom: 14rem;
		margin-bottom: 6rem;
	}
	.Exhibition::before{
		width: 100%;
	}
	.Exhibition__inner-wrap::after{
		height: 5.6rem;
		bottom: calc(-14rem - 1px);
		background-image: url(../images/index/sp_obj_exhibition.png);
		background-image: image-set(url(../images/index/sp_obj_exhibition.png) 1x, url(../images/index/sp_obj_exhibition@2x.png) 2x);
	}
	.Exhibition__title{
		color: var(--maincolor);
		font-size: 4.8rem;
		margin-bottom: 4.5rem;
		line-height: 1;
		font-weight: 700;
		text-align: center;
	}
	.Exhibition__image a{
		display: block;
	}
	.Exhibition__image img{
		width: 100%;
	}

}



/*-------------------------------
	年間パスポートのご案内
-------------------------------*/

.Freshwater + .Yearpass{
	margin-top: 15rem;
}
.Yearpass-block{
	background: var(--maincolor);
	width: 100%;
	border-radius: 2rem;
	padding: 3.2rem 2.5rem 4.2rem;
	text-align: center;
	position: relative;
}
.Yearpass-block::before,
.Yearpass-block::after{
	content: "";
	display: block;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 4000;
}
.Yearpass-block::before{
	width: 24rem;
	height: 17.7rem;
	left: 1.5rem;
	top: 9.8rem;
	background-image: url(../images/index/obj_webpass-left.png);
	background-image: image-set(url(../images/index/obj_webpass-left.png) 1x, url(../images/index/obj_webpass-left@2x.png) 2x);
}
.Yearpass-block::after{
	width: 32.4rem;
	height: 40.4rem;
	right: -6.5rem;
	top: -4.5rem;
	background-image: url(../images/index/obj_webpass-right.png);
	background-image: image-set(url(../images/index/obj_webpass-right.png) 1x, url(../images/index/obj_webpass-right@2x.png) 2x);
}
.Yearpass-block__inner{
	position: relative;
	z-index: 6000;
}
.Yearpass-block__copy{
	width: 36.4rem;
	margin-bottom: 2.6rem;
	margin-left: auto;
	margin-right: auto;
}
.Yearpass-block__copy img{
	width: 100%;
}
.Yearpass-block__title{
	font-size: 5.1rem;
	margin-bottom: 3.4rem;
	line-height: 1;
	font-weight: 700;
	color: #fff;
}
.Yearpass-block__button{
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Freshwater + .Yearpass{
		margin-top: 7.5rem;
	}
	.Yearpass-block{
		padding: 3rem 2.5rem 5.5rem;
	}
	.Yearpass-block::before{
		width: 24rem;
		height: 17.7rem;
		left: -6rem;
		bottom: 6rem;
		top: unset;
		background-image: url(../images/index/sp_obj_webpass-left.png);
		background-image: image-set(url(../images/index/sp_obj_webpass-left.png) 1x, url(../images/index/sp_obj_webpass-left@2x.png) 2x);
	}
	.Yearpass-block::after{
		width: 27rem;
		height: 33.7rem;
		right: -10rem;
		top: unset;
		bottom: -5rem;
		background-image: url(../images/index/sp_obj_webpass-right.png);
		background-image: image-set(url(../images/index/sp_obj_webpass-right.png) 1x, url(../images/index/sp_obj_webpass-right@2x.png) 2x);
	}
	.Yearpass-block__copy{
		margin-bottom: 1.5rem;
	}
	.Yearpass-block__title{
		font-size: 6.4rem;
		margin-bottom: 3.2rem;
		line-height: calc(8 / 6.4);
	}
	.Yearpass-block__button{
		width: 32rem;
		margin-left: auto;
		margin-right: auto;
	}
	.Yearpass-block__button a{
		padding-right: 5.4rem;
	}
	.Yearpass-block__button a::after{
		right: 3rem;
	}

}



/*-------------------------------
	おもしろ飼育コラム
-------------------------------*/

.Column{
	padding-bottom: 15rem;
	position: relative;
	z-index: 4000;
}
.Column__inner{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	z-index: 5000;
}
.Column__inner::before,
.Column__inner::after{
	content: "";
	display: block;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
}
.Column__inner::before{
	width: 41.8rem;
	height: 44.5rem;
	left: calc(-48.6rem + var(--padding-leftright));
	top: -11.8rem;
	background-image: url(../images/index/obj_column-kawauso.png);
	background-image: image-set(url(../images/index/obj_column-kawauso.png) 1x, url(../images/index/obj_column-kawauso@2x.png) 2x);
}
.Column__inner::after{
	width: 53.3rem;
	height: 44.9rem;
	right: calc(-49.2rem + var(--padding-leftright));
	top: 5.2rem;
	background-image: url(../images/index/obj_column-dojo.png);
	background-image: image-set(url(../images/index/obj_column-dojo.png) 1x, url(../images/index/obj_column-dojo@2x.png) 2x);
}
.Column__header{
	width: 29.5rem;
}
.Column-title{
	margin-bottom: 5rem;
}
.Column-title__en{
	background: var(--gradcolor);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.Column__text{
	margin-bottom: 3.5rem;
}
.Column__body{
	width: calc(100% - 29.5rem);
	padding-right: 1.5rem;
	max-width: 73.5rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.Column-block{
	width: calc((100% - 6rem) / 2);
}
.Column-block__image{
	width: 100%;
	height: 22rem;
	margin-bottom: 3rem;
	border-radius: 2rem;
	overflow: hidden;
}
.Column-block__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.Column-block__data{
	width: 100%;
	margin-bottom: 1rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: column;
}
.Column-block__category{
	width: auto;
	padding-right: 1.4rem;
}
.Column-block__time{
	font-family: var(--en);
	font-size: 1.8rem;
	margin-bottom: 1rem;
	line-height: 1;
	color: #666;
}
.Column-block__title{
	font-size: 2.2rem;
	font-weight: 700;
	line-height: calc(3.3 / 2.2);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1800px) and (min-width: 769px){

	.Column__inner::before{
		left: calc(-25vw + var(--padding-leftright));
	}
	.Column__inner::after{
		right: calc(-30vw + var(--padding-leftright));
	}

}
@media screen and (max-width:1660px) and (min-width: 769px){

	.Column__inner::before{
		left: calc(-22.5vw + var(--padding-leftright));
        top: 10rem;
	}
	.Column__inner::after{
		right: calc(-27.5vw + var(--padding-leftright));
		top: 9.5rem;
	}

}
@media screen and (max-width:1520px) and (min-width: 769px){

	.Column__inner::before{
		left: calc(-20vw + var(--padding-leftright));
        top: 10rem;
	}
	.Column__inner::after{
		right: calc(-25vw + var(--padding-leftright));
		top: 9.5rem;
	}
	
}
@media screen and (max-width:1240px) and (min-width: 769px){

	.Column__inner::before{
		left: calc(-20rem + var(--padding-leftright));
        top: 12.5rem;
		transform: scale(0.75);
	}
	.Column__inner::after{
		right: calc(-22.5rem + var(--padding-leftright));
		top: 15rem;
		transform: scale(0.75);
	}
}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Column__body{
		padding-right: 0;
	}
	.Column-block{
		width: calc((100% - 3rem) / 2);
	}
	.Column-block__body{
		padding-left: 0;
		padding-right: 0;
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

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

	.Column{
		padding-top: 11rem;
		padding-bottom: 33.5rem;
	}
	.Column__inner{
		flex-direction: column;
	}
	.Column__inner::before{
		width: 24rem;
		height: 19.7rem;
		left: unset;
		right: calc(-3.2rem + var(--padding-leftright));
		top: 8rem;
		background-image: url(../images/index/sp_obj_column-kawauso.png);
		background-image: image-set(url(../images/index/sp_obj_column-kawauso.png) 1x, url(../images/index/sp_obj_column-kawauso@2x.png) 2x);
	}
	.Column__inner::after{
		width: 75.4rem;
		height: 34.7rem;
		right: calc(-1.2rem + var(--padding-leftright));
		top: unset;
		bottom: -33.5rem;
		background-image: url(../images/index/sp_obj_column-dojo.png);
		background-image: image-set(url(../images/index/sp_obj_column-dojo.png) 1x, url(../images/index/sp_obj_column-dojo@2x.png) 2x);
	}
	.Column__header{
		width: 100%;
		margin-bottom: 5.5rem;
	}
	.Column-title{
		margin-bottom: 4rem;
	}
	.Column__text{
		font-size: 2.8rem;
		margin-bottom: 0;
		line-height: calc(4.2 / 2.8);
	}
	.Column__body{
		width: 100%;
		max-width: 100%;
		margin-bottom: 6rem;
		padding-right: 0;
		row-gap: 6rem;
		flex-direction: column;
	}
	.Column-block{
		width: 100%;
	}
	.Column-block a{
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.Column-block__image{
		width: 30rem;
		height: 20rem;
		margin-bottom: 0;
	}
	.Column-block__body{
		width: calc(100% - 30rem);
		padding-left: 4rem;
		padding-right: 0;
	}
	.Column-block__data{
		margin-bottom: 0;
		flex-direction: column;
		align-items: flex-start;
	}
	.Column-block__category{
		margin-bottom: 1rem;
		padding-right: 0;
	}
	.Column-block__time{
		font-size: 2.8rem;
		margin-bottom: 2rem;
	}
	.Column-block__title{
		font-size: 3.2rem;
		line-height: calc(4.8 / 3.2);
	}
	.Column__button{
		margin-left: auto;
		margin-right: auto;
	}

}



/*-------------------------------
	お知らせ
-------------------------------*/

.News{
	padding-top: 0;
	padding-bottom: 20rem;
	position: relative;
	z-index: 6000;
}
.News__inner{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.News__header{
	width: 24rem;
}
.News-title__en{
	background: var(--gradcolor);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.News__button{
	margin-top: 5.8rem;
}
.News__body{
	width: calc(100% - 24rem);
	padding-left: 8rem;
}
.News-block:not(:last-child){
	border-bottom: 1px solid var(--graycolor);
}
.News-block a{
	width: 100%;
	padding: 3.5rem 2.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.News-block__data{
	width: 21.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.News-block__time{
	font-family: var(--en);
	font-size: 1.8rem;
	line-height: 1;
	color: #666;
}
.News-block__category{
	min-width: 10rem;
	justify-content: flex-end;
}
.News-block__category-item{
	margin-bottom: 0;
}
.News-block__title{
	width: calc(100% - 21.5rem);
	line-height: calc(3 / 2);
	padding-left: 2.5rem;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.News__body{
		padding-left: 5rem;
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

	.News-block a{
		padding-left: 0;
		padding-right: 0;
		flex-direction: column;
		align-items: flex-start;
	}
	.News-block__data{
		width: 100%;
		margin-bottom: 1rem;
		justify-content: flex-start;
	}
	.News-block__title{
		width: 100%;
		padding-left: 0;
	}

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

	.News{
		padding-top: 10rem;
		padding-bottom: 0;
	}
	.News__inner{
		flex-direction: column;
	}
	.News__header{
		width: 100%;
		margin-bottom: 2.2rem;
	}
	.News__body{
		width: 100%;
		max-width: 53rem;
		padding-left: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.News-block:not(:last-child){
		border-bottom-width: 2px;
	}
	.News-block a{
		padding: 3.8rem 0 4.2rem;
		flex-wrap: wrap;
	}
	.News-block__data{
		width: 100%;
		margin-bottom: 2rem;
		justify-content: flex-start;
	}
	.News-block__time{
		font-size: 3rem;
		margin-right: 4.2rem;
	}
	.News-block__title{
		width: 100%;
		line-height: calc(4.5 / 3);
		padding-left: 0;
	}
	.News-block__category{
		justify-content: flex-start;
	}
	.News__button{
		margin-top: 3.8rem;
		margin-left: auto;
		margin-right: auto;
	}

}