@charset "utf-8";
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
	フッターと、トップMV以降 の記述があります（日本語以外のページ用）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* NotoSansSC（簡体字） NotoSansTC（繁体字） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

/* 各言語フォントファミリー設定 */
:root{
		/* 中国語（簡体字） */
		--cs: "Noto Sans SC", SimSun, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		/* 台湾語（繁体字） */
		--ct: "Noto Sans TC", PMingLiU, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

#en{
	font-family: var(--en);/* common.css参照 */
}
#cs{
	font-family: var(--cs);
}
#ct{
	font-family: var(--ct);
}
#tw{
	font-family: var(--ct);
}

/************************************************************************
	フッター
**************************************************************************/
footer{
	color: #fff;
	background-color: var(--blue);
	position: relative;
	z-index: 2;
}

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

/* バナー
-------------------------------------------------------- */
.ft_bnr_list li{
	width: 32.6%;
	margin-right: 1.1%;
	margin-bottom: 1.2%;
}
.ft_bnr_list li:nth-of-type(3n){
	margin-right: 0;
}
.ft_bnr_list li:nth-of-type(n+4){
	margin-bottom: 0;
}

.ft_bnr_list li a{
	display: block;
}
.ft_bnr_list li a:hover{
	-webkit-filter: var(--a_brightness);
	filter: var(--a_brightness);
}
.ft_bnr_list li a img{
	width: 100%;
}


@media screen and (max-width: 768px) {
	.ft_bnr_list li{
		width: 49.2%;
		margin-right: 1.6%;
		margin-bottom: 1.4%;
	}
	.ft_bnr_list li:nth-of-type(3n){
		margin-right: 1.6%;
	}
	.ft_bnr_list li:nth-of-type(n+4){
		margin-right: 1.6%;
	}
	.ft_bnr_list li:nth-of-type(2n){
		margin-right: 0;
	}
}

/* ロゴ
-------------------------------------------------------- */
.ft_logo{
	max-width: 8.5rem;
	margin: 0 auto 1.5rem;
}

@media screen and (max-width: 768px) {
	.ft_logo{
		max-width: 5rem;
		margin: 0 auto 1.5rem;
	}
}


/************************************************************************
	多言語 金魚とアートの世界
**************************************************************************/
#top_intro{
	padding: 31rem 0;
}

#top_intro .flex_container .wrapper{
	width: 46%;
}
#top_intro .flex_container .wrapper .img{
	margin-bottom: 4rem;
}

@media screen and (max-width: 768px) {
	#top_intro{
		padding: 12rem 0 6rem;
	}

	#top_intro .flex_container .wrapper{
		width: 100%;
		margin-bottom: 6rem;
	}
	#top_intro .flex_container .wrapper:nth-last-of-type(1){
		margin-bottom: 0;
	}

	#top_intro .flex_container .wrapper .img{
		margin-bottom: 1.75rem;
	}
}


/************************************************************************
	トップ　ZONE
**************************************************************************/
#top_zone{
	margin-top: -7rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
#top_zone::after{
	content: "";
	display: block;
	width: 100%;
	height: calc(100% - 7rem);
	background-color: var(--green);
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}

#top_zone .inner,
#top_zone .more_inner{
	position: relative;
}

.deco{
	position: absolute;
}

#top_zone .cloud01{
	width: 36rem;
	left: -15rem;
	top: 1rem;
	z-index: 1;
}
#top_zone .cloud02{
	width: 38rem;
	right: -11.5rem;
	top: 0;
	z-index: 1;
}

#top_zone .goldfish01{
	width: 20.6rem;
	left: -3.5rem;
	top: 9%;
}
#top_zone .cloud03{
	width: 30.5rem;
	right: -13rem;
	top: 15%;
}
#top_zone .goldfish02{
	width: 23.1rem;
	right: -2rem;
	top: 24%;
}
#top_zone .goldfish03{
	width: 22.8rem;
	left: -5rem;
	top: 28.2%;
}
#top_zone .cloud04{
	width: 33rem;
	right: 3%;
	top: 36.3%;
}
#top_zone .goldfish04{
	width: 20.6rem;
	right: 2%;
	top: 43%;
}
#top_zone .cloud05{
	width: 23.3rem;
	left: -2rem;
	top: 49%;
}
#top_zone .goldfish05{
	width: 25rem;
	left: 2%;
	top: 55%;
}
#top_zone .cloud06{
	width: 35.5rem;
	right: 1%;
	top: 59%;
}
#top_zone .cloud07{
	width: 30.8rem;
	left: 2%;
	top: 71.5%;
}
#top_zone .goldfish06{
	width: 21rem;
	right: -4rem;
	top: 70.5%;
}
#top_zone .goldfish07{
	width: 21rem;
	left: -11rem;
	top: 82%;
}
#top_zone .cloud08{
	width: 30.5rem;
	right: -17rem;
	top: 83%;
}
#top_zone .cloud09{
	width: 25.2rem;
	left: 3%;
	top: 93%;
}
#top_zone .goldfish08{
	width: 21.9rem;
	right: 7%;
	top: 94.8%;
}
#top_zone .goldfish09{
	display: none;
}

@media screen and (max-width: 768px) {
	#top_zone{
		margin-top: -4rem;
	}
	#top_zone::after{
		height: calc(100% - 4rem);
	}

	#top_zone .inner{
		padding: 7.5rem 0 5rem;
	}
	#top_zone .more_inner{
		width: 100%;
	}

	#top_zone .cloud01{
		width: 14.3rem;
		left: -4rem;
	}
	#top_zone .cloud02{
		width: 15rem;
		right: -3rem;
	}

	#top_zone .goldfish01{
		width: 10rem;
		left: auto;
		right: 10%;
		top: 7%;
	}
	#top_zone .cloud04{
		width: 16.5rem;
		right: 3%;
		top: 25.4%;
	}
	#top_zone .goldfish05{
		width: 10rem;
		left: 10%;
		top: 34.7%;
	}
	#top_zone .goldfish07{
		width: 8.5rem;
		left: auto;
		right: 10%;
		top: 46.2%;
	}
	#top_zone .cloud05{
		width: 12.6rem;
		left: 41%;
		top: 55%;
	}
	#top_zone .goldfish03{
		width: 9rem;
		left: 17%;
		top: 69.4%;
	}
	#top_zone .cloud09{
		width: 11.6rem;
		left: auto;
		right: 9%;
		top: 82.2%;
	}
	#top_zone .cloud06{
		width: 17.7rem;
		right: auto;
		left: -9rem;
		top: 96.6%;
	}
	#top_zone .goldfish09{
		display: block;
		width: 12.6rem;
		right: -4rem;
		top: 93.8%;
	}

	#top_zone .cloud03,
	#top_zone .goldfish02,
	#top_zone .goldfish04,
	#top_zone .cloud07,
	#top_zone .goldfish06,
	#top_zone .cloud08,
	#top_zone .goldfish08{
		display: none;
	}


}

/* サムネイル
-------------------------------------------------------- */
.zone_container{
	--zone_color: #008e8e;
	margin-bottom: 6rem;
}
#zone02{
	--zone_color: #b5004a;
}
#zone03{
	--zone_color: #b76981;
}
#zone04{
	--zone_color: #ad9c00;
}
#zone05{
	--zone_color: #9b5cff;
}
#zone06{
	--zone_color: #771100;
}
#zone07{
	--zone_color: #333;
}
#zone08{
	--zone_color: #004584;
	margin-bottom: 10rem;
}

.zone_container .thumb_wrapper{
	padding: 0 23%;
	margin-bottom: 1rem;
	border-top: #ca9249 solid min(7px, .5vw);
    border-bottom: #ca9249 solid min(7px, .5vw);
	position: relative;
}
.zone_container .thumb_wrapper::before,
.zone_container .thumb_wrapper::after{
	content: "";
	display: block;
	width: 23%;
	height: 100%;
	background: url(../img/cmn/shoji_big.png) no-repeat center/cover;
	position: absolute;
	top: 0;
}
.zone_container .thumb_wrapper::before{
	left: 0;
}
.zone_container .thumb_wrapper::after{
	right: 0;
}

.zone_container .thumb{
	position: relative;
}
.zone_container .thumb::before{
	content: "";
	display: block;
	padding-top: 81.6%;
}
.zone_container .thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

@media screen and (max-width: 768px) {
	.zone_container{
		margin-bottom: 2.5rem;
	}
	#zone08{
		margin-bottom: 5rem;
	}

	.zone_container .thumb_wrapper{
		padding: 0 18%;
		margin-bottom: .5rem;
		border-top: #ca9249 solid 1.2vw;
        border-bottom: #ca9249 solid 1.2vw;
	}
	.zone_container .thumb_wrapper::before,
	.zone_container .thumb_wrapper::after{
		width: 18%;
		background-image: url(../img/cmn/shoji.png);
	}
	.zone_container .thumb::before{
		padding-top: 72.5%;
	}

}


/* テキスト
-------------------------------------------------------- */
.zone_container .text_box{
	color: #fff;
	padding: 2.75rem 2.7% 3.5rem;
	position: relative;
	z-index: 1;
}
.zone_container .text_box::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--zone_color);
	opacity: .7;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.zone_container .text_box hgroup{
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-align: end;
	align-items: flex-end;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: .5em;
}
.zone_container .text_box hgroup .sub{
	font-size: .6em;
	text-transform: uppercase;
	margin-right: 1em;
}
.zone_container .text_box hgroup h3{
	line-height: 1.2;
}

.zone_container .text_box .text{
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: -.025em;
}


@media screen and (max-width: 768px) {
	.zone_container .text_box{
		padding: 1.75rem 4% 1.5rem;
	}

	.zone_container .text_box hgroup{
		display: block;
		font-size: 1.7rem;
	}
	.zone_container .text_box hgroup .sub{
		font-size: .66em;
	}

	.zone_container .text_box .text{
		font-size: 1.3rem;
		font-weight: 400;
		letter-spacing: 0;
	}


}


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


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


/************************************************************************
	トップ ACCESS
**************************************************************************/
.hidden_wrap{
	overflow: hidden;
}

#top_access{
	background-color: var(--blue);
}
#top_access .inner{
	position: relative;
}

#top_access .cloud01{
	width: 34rem;
	top: 6rem;
	left: -15rem;
}
#top_access .cloud02{
	width: 32rem;
	bottom: -6rem;
	right: -15rem;
}

#top_access .map{
	width: 100%;
	height: 50rem;
	position: relative;
}
#top_access .map iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


@media screen and (max-width: 768px) {
	#top_access .cloud01{
		display: none;
	}
	#top_access .cloud02{
		width: 17rem;
		bottom: -2.5rem;
		right: 0;
	}

	#top_access .map{
		height: 35rem;
	}
}


/************************************************************************
	トップ PRICE
**************************************************************************/
#top_price{
	background-color: var(--green);
}
#top_price .inner{
	position: relative;
}

#top_price .goldfish01{
	width: 16rem;
	top: 5rem;
	left: -15rem;
}
#top_price .goldfish02{
	width: 22.3rem;
	top: 50%;
	right: -12rem;
}
#top_price .cloud01{
	width: 39rem;
	bottom: -2rem;
	left: -15rem;
}

@media screen and (max-width: 768px) {
	#top_price .goldfish01{
		width: 7.5rem;
		top: 5.5rem;
		left: 0;
	}
	#top_price .goldfish02{
		display: none;
	}
	#top_price .cloud01{
		width: 19rem;
		bottom: -2rem;
		left: -6rem;
	}
}

/* 料金・チケット
-------------------------------------------------------- */
.clip_container{
	--container_clip: polygon(0 2rem, 2rem 0, calc(100% - 2rem) 0, 100% 2rem, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 2rem 100%, 0 calc(100% - 2rem));

	padding: 4rem 7.25% 4.5rem;
	background-color: #fff;
	-webkit-clip-path: var(--container_clip);
	clip-path: var(--container_clip);
}

.clip_container > dl .wrapper{
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-align: center;
	align-items: center;
	margin-bottom: 4rem;
}
.clip_container > dl .wrapper:nth-last-of-type(1){
	margin-bottom: 0;
}

.clip_container > dl .wrapper > dt{
	font-size: 1.125em;
	font-weight: 700;
	color: var(--blue);
	text-align: center;
	width: 17rem;
	padding-right: 3.2%;/* （container1100pxのpadding7.25%→.wrapper940px  30/940 */
}
.clip_container > dl .wrapper > dd{
	line-height: 1.5;
	width: calc(100% - 17rem);
	padding-block: .25em;
	padding-left: 4.25%;/* （container1100pxのpadding7.25%→.wrapper940px  40/940 */
	border-left: 1px solid var(--blue);
}
.clip_container table{
	table-layout: fixed;
	margin-bottom: .25em;
}
.clip_container table th,
.clip_container table td{
	text-align: center;
	width: calc((100% - 10rem)/ 4);
	border: 1px solid #fff;
}
.clip_container table.short th,
.clip_container table.short td{
	text-align: center;
	width: calc((100% - 10rem)/ 3);
	border: 1px solid #fff;
}

.clip_container table th,
.clip_container > dl .wrapper > dd dl dt {
	font-weight: 500;
	color: #fff;
	line-height: 1.3;
	padding: .8em 0;
	background-color: #135656;
}
.clip_container table th.title_th{
	width: 10rem;
}

.clip_container table th .small{
	font-size: 0.875em;
}

.clip_container table td,
	.clip_container > dl .wrapper > dd dl dd {
	font-weight: 700;
	color: var(--red);
	padding: 1.35em 0;
	background-color: #e6e6e6;
}
.clip_container > dl .wrapper > dd dl {
	margin-bottom: .25em;
}
.clip_container > dl .wrapper > dd dl dt,
.clip_container > dl .wrapper > dd dl dd {
	padding: .8em;
}
#top_price .ticket_bnr{
	display: block;
	width: 100%;
	max-width: 49rem;
}
#top_price .ticket_bnr:hover{
	-webkit-filter: var(--a_brightness);
	filter: var(--a_brightness);
}
#top_price .ticket_bnr img{
	width: 100%;
}

@media screen and (max-width: 768px) {
	.clip_container{
		--container_clip: polygon(0 1rem, 1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem));
		padding: 2rem 3%;
	}


	.clip_container > dl .wrapper{
		display: block;
		margin-bottom: 2rem;
	}

	.clip_container > dl .wrapper > dt {
        text-align: left;
        width: 100%;
        padding: 0 3% .5em;
    }

	.clip_container > dl .wrapper > dd {
		width: 100%;
        padding: .75em 3%;
        border-left: none;
        border-top: 1px solid var(--blue);
	}

	.clip_container table.short{
		width: calc(100% - (100% / 4));
	}
	.clip_container table th,
	.clip_container table td{
		width: calc(100%/ 4);
	}
	.clip_container table.short th,
	.clip_container table.short td{
		width: calc(100%/ 3);
	}

	.clip_container table th.title_th{
		display: none;
	}


}

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


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



/************************************************************************
	トップ HOURS
**************************************************************************/
#top_hours{
	background-color: var(--red);
}

#top_hours .inner{
	position: relative;
}

#top_hours .goldfish01{
	width: 15rem;
	bottom: 4rem;
	left: -18rem;
}
#top_hours .cloud01{
	width: 29rem;
	top: 13rem;
	right: -19rem;
}


@media screen and (max-width: 768px) {
	#top_hours .goldfish01{
		width: 9rem;
		bottom: .5rem;
		left: auto;
		right: 5rem;
	}
	#top_hours .cloud01{
		display: none;
	}
	
}

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


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

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


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

/************************************************************************
	トップ　リンク
**************************************************************************/
/* 背景固定 */
#link_area_bg{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100lvh;
}
.arrival_link_area #link_area_bg{
	display: block;
}

#link_area_bg picture,
#link_area_bg img{
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
#link_area_bg img{
	object-fit: cover;
}

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


/* リスト
-------------------------------------------------------- */
#top_link_area{
	background-color: rgba(96,96,96,.3);
}
#top_link_area .list li{
	width: 48%;
	max-width: 50rem;
	position: relative;
}
#top_link_area .list li a{
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 4rem 5%;
	background-color: rgba(255,255,255,.5);
}
#top_link_area .list li a:hover{
	-webkit-filter: var(--a_brightness);
	filter: var(--a_brightness);
}


#top_link_area .list li a::after{
	content: "";
	display: block;
	width: calc(100% - 2rem);
	height: calc(100% - 2rem);
	margin: auto;
	background-color: #fff;
	-webkit-clip-path: polygon(0 2rem, 2rem 0, calc(100% - 2rem) 0, 100% 2rem, 100% calc(100% - 2rem), calc(100% - 2rem) 100% ,2rem 100%, 0  calc(100% - 2rem));
	clip-path: polygon(0 2rem, 2rem 0, calc(100% - 2rem) 0, 100% 2rem, 100% calc(100% - 2rem), calc(100% - 2rem) 100% ,2rem 100%, 0  calc(100% - 2rem));
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

#top_link_area .list li a > *{
	position: relative;
	z-index: 2;
}

#top_link_area .list li a .text{
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	width: fit-content;
	padding-right: 1em;
	position: relative;
}
#top_link_area .list li a .text::after{
	content: "";
	display: block;
	width: .7em;
	height: .7em;
	background: url(../img/cmn/icon_blank_bk.svg) no-repeat center/contain;
	position: absolute;
	right: 0;
	top: calc(50% - .35em);
}

@media screen and (max-width: 768px) {
	#top_link_area .list li{
		width: 100%;
		max-width: none;
		margin-bottom: 2.5rem;
	}
	#top_link_area .list li:nth-last-of-type(1){
		margin-bottom: 0;
	}

	#top_link_area .list li a{
		padding: 2.5rem 5%;
	}
	#top_link_area .list li a::after{
		width: calc(100% - 1rem);
		height: calc(100% - 1rem);
		-webkit-clip-path: polygon(0 1rem, 1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100% ,1rem 100%, 0  calc(100% - 1rem));
		clip-path: polygon(0 1rem, 1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100% ,1rem 100%, 0  calc(100% - 1rem));
	}

	#top_link_area .list li a .text{
		font-size: 1.8rem;
	}
}

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


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