@charset "utf-8";
/* CSS Document */
body{
	background-color : #dddddd;
	text-align : center;
	color : #333333;
	margin: 0px auto;
	padding: 0px;
	font-family: sans-serif;
}

.galleryindex{
	height: auto;
	background: white;
	width: fit-content(<length-percentage>);
	width: 80%; 
	margin-top:	0px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
	padding: 0px;
	position:relative;
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.6));
	}
	
.topnavi{
	background-color: white;
	text-align:left;
	margin-top: 0px;
	margin-left: 4%;
	margin-right: 4%;
	margin-bottom: 0px;
	width:92%;
	padding:0px;
	display: flex;
	justify-content: space-between;
	bottom; 0px;
	}
	
.topnavi #toplinkimg{
	width:80%;
	height: 7.6%;
}
.topnavi #toplinkimg a img{
	width:100%;
}
.topnavi div.baselink {
	display:inline-block;
	width:20%;
	margin-top:auto;
	margin-bottom:auto;
	padding: 0px;
	}
.topnavi div.baselink  ul{
	width:100%;
	margin: 0px;
	padding: 0px;
	}
.topnavi div ul li{
	color : #333333;
	text-align:right;
	font-size:75%;
	list-style-position: inside;
	list-style-type: none;
	}
.topnavi div ul li a{
	color : #333333;
	}
.topnavi div ul li a:hover{
	color : #ef877b;
	text-decoration: underline;
	}
	
.toplink{
	color : #fff;
	background-color: #25BC65;
	font-weight: bold;
	width: auto;
	height: 3.5%;
	margin-top:	0px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
	padding-left:4%;
	padding-right:4%;
	display: flex;
	justify-content: space-between;
	}
	
.toplink h2{
	text-align: left;
	font-color : #fff;
	margin-top:	0px;
	margin-left:0px;
	margin-bottom: 0px;
	width:30%;
	height:auto;
	float:left;
	}
	
.toplink p{
	text-align: right;
	font-color: #fff;
	font-size:75%;
	display:block;
	}
.toplink p a{
	color: #fff;
	}
.toplink p a:hover{
	color: #333;
	}
.toplink span{
	color:#333;}

#copylight{
	position: relative;
	text-align:right;
	background-color: #25BC65;
	margin: 0px;
	padding-right: 4%;
}

#worksasia {
	position: relative;
	width: 95%;
	height: 83%;
	max-height:968px;
	list-style-position: inside;
	list-style-type: none;
	background-color: #FFF;
	margin-top:	0px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
	padding: 0px;
}
#worksasia li{
	list-style-type: none;
	}
#worksasia li a:hover img{
	filter: 
		drop-shadow(1px 1px 1px rgba(0,0,0,0.6))
		drop-shadow(0 0 10px rgba(255,237,81,0.6));
	}

#worksasia li a img{
	position: relative;
	height: auto;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: none;
	filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.6));
}

/* 昼下がり */
#asia01 {
	z-index: 1;
	position: absolute;
	width:	11.2%;
	height:	13.8%;
	left:	1.1%;
	top:	1.5%;
	}
	
/* バンティアイ・スレイ */
#asia02 {
	z-index: 2;
	position: absolute;	
	width:	38.8%;
	height:	33.2%;
	left:	19.5%;
	top:	2.5%;
	}

/* 樹 */
#asia03 {
	z-index: 5;
	position: absolute;
	width:	18.6%;
	height: 27.3%;
	left:	59.6%;
	top:	2.5%;
	}
	
/* 明居１ */
#asia04 {
	z-index: 10;
	position: absolute;
	width:	12.1%;
	height: 18.2%;
	left:	77.8%;
	top:	6.1%;
	}

/* 平原 */
#asia05 {
	z-index: 1;	
	position: absolute;
	width:	8.8%;
	height:	12.0%;	
	left:	89.8%;
	top:	2.5%;
	}

/* 観世音菩薩 */
#asia06 {
	z-index: 1;
	position: absolute;
	width:	22.2%;
	height:	64.1%;	
	left:	1.9%;
	top:	17.9%;
	}
	
/* 回廊 */
#asia07 {
	z-index: 12;	
	position: absolute;
	width:	11.4%;
	height:	17.0%;	
	left:	21.6%;
	top:	30.7%;
	}
	
/* 運河 */
#asia08 {
	z-index: 3;
	position: absolute;	
	width:	56.0%;
	height:	29.1%;	
	left:	33.9%;
	top:	26.8%;
	}
	
/* 村 */
#asia09 {
	z-index: 9;
	position: absolute;
	width:	10.6%;
	height:	18.7%;	
	left:	89.0%;
	top:	17.9%;
	}
	
/* 石橋２ */
#asia10 {
	z-index: 5;
	position: absolute;
	width:	9.1%;
	height:	21.3%;	
	left:	89.7%;
	top:	38.6%;
	}
		
/* 家路 */
#asia11 {	
	z-index: 10;	
	position: absolute;
	width:	7.6%;
	height:	11.9%;	
	left:	1.9%;
	top:	86.2%;
	}
		
/* ポプラのある村 */
#asia12 {	
	z-index: 20;	
	position: absolute;	
	width:	14.8%;
	height:	17.0%;	
	left:	10.8%;
	top:	80.3%;
	}
	
/* 石橋４ */
#asia13 {
	z-index: 2;	
	position: absolute;
	width: 53.8%;
	height: 49.0%;	
	left: 22.6%;
	top: 50.1%;
	}

/* 石橋１ */
#asia14 {
	z-index: 11;
	position: absolute;
	width:	12.4%;
	height:	18.6%;
	left:	75.1%;
	top:	58.7%;
	}
			
/* 明居３ */
#asia15 {
	z-index: 12;	
	position: absolute;
	width: 11.6%;
	height: 17.4%;	
	left: 86.0%;
	top: 61.3%;
	}


/* 明居２ */
#asia16 {
	z-index: 10;
	position: absolute;	
	width:	14.6%;
	height: 21.8%;	
	left:	72.4%;
	top:	76.3%;
	}


/* ラオ属の娘 */
#asia17 {
	z-index: 10;	
	position: absolute;
	width: 9.4%;
	height: 20.9%;	
	left: 88.9%;
	top: 77.2%;
	}


@media screen and (orientation: landscape) and (max-width:1024px){

.galleryindex{
	background: white;
	width: 80%;
	aspect-ratio: 16/9;
	margin-top:	0px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
	padding: 0px;
	position:relative;
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.6));
	}
#worksasia {
	position: relative;
	aspect-ratio: 16/9;
	list-style-position: inside;
	list-style-type: none;
	background-color: #FFF;
	margin-left: auto;
    margin-right: auto;
	}

.toplink{
	color : #fff;
	background-color: #25BC65;
	font-weight: bold;
	width: auto;
	vertical-align:central;
	height: 4%;
	margin-top:	0px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
	padding-left:4%;
	padding-right:4%;
	display: flex;
	justify-content: space-between;
	}
}

@media screen and (orientation: portrait) and (max-width:480px){

.galleryindex{
	background: white;
	width: fit-content(<length-percentage>);
	width: 100%;
	height: 100%;
	margin-top:	0px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
	padding: 0px;
	position:relative;
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.6));
	}
#worksasia {
	position: relative;
	aspect-ratio: 16/9;
	list-style-position: inside;
	list-style-type: none;
	background-color: #fff;
	margin: auto;
	}

.toplink{
	color : #fff;
	background-color: #25BC65;
	font-weight: bold;
	width: auto;
	vertical-align:central;
	height: 4%;
	margin-top:	0px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;
	padding-left:4%;
	padding-right:4%;
	display: flex;
	justify-content: space-between;
	}

/* 昼下がり */
#asia01 {
	z-index: 1;
	position: absolute;
	width:	18.6%;
	height:	7.5%;
	left:	3.6%;
	top:	1.1%;
	}
	
/* バンティアイ・スレイ */
#asia02 {
	z-index: 2;
	position: absolute;	
	width:	64.8%;
	height:	18.4%;
	left:	33.1%;
	top:	1.2%;
	}

/* 樹 */
#asia03 {
	z-index: 12;
	position: absolute;
	width:	30.9%;
	height: 14.9%;
	left:	38.8%;
	top:	18.7%;
	}
	
/* 明居１ */
#asia04 {
	z-index: 10;
	position: absolute;
	width:	26.4%;
	height: 13.0%;
	left:	71.5%;
	top:	21.4%;
	}

/* 平原 */
#asia05 {
	z-index: 13;	
	position: absolute;
	width:	21.2%;
	height:	9.5%;	
	left:	35.5%;
	top:	34.8%;
	}

/* 観世音菩薩 */
#asia06 {
	z-index: 1;
	position: absolute;
	width:	37.8%;
	height:	35.8%;	
	left:	2.6%;
	top:	9.3%;
	}
	
/* 回廊 */
#asia07 {
	z-index: 10;	
	position: absolute;
	width:	21.5%;
	height:	10.6%;	
	left:	75.7%;
	top:	37.5%;
	}
	
/* 運河 */
#asia08 {
	z-index: 3;
	position: absolute;	
	width:	97.5%;
	height:	16.8%;	
	left:	1.2%;
	top:	45.8%;
	}
	

/* ポプラのある村 */
#asia09 {
	z-index: 11;	
	position: absolute;	
	width:	20.8%;
	height:	12.2%;	
	left:	59.1%;
	top:	32.1%;
	}
	
/* 石橋２ */
#asia10 {
	z-index: 5;
	position: absolute;
	width:	18.6%;
	height:	14.4%;	
	left:	78.5%;
	top:	60.3%;
	}
		
/* 家路 */
#asia11 {	
	z-index: 10;	
	position: absolute;
	width:	16.0%;
	height:	8.3%;	
	left:	3.8%;
	top:	60.3%;
	}
		
/* 村 */
#asia12 {	
	z-index: 3;
	position: absolute;
	width:	30.1%;
	height:	11.4%;	
	left:	15.9%;
	top:	61.8%;
		}
	
/* 石橋４ */
#asia13 {
	z-index: 2;	
	position: absolute;
	width:	96.6%;
	height:	29.2%;	
	left:	1.8%;
	top:	69.7%;
	}

/* 石橋１ */
#asia14 {
	z-index: 13;
	position: absolute;
	width:	22.5%;
	height:	11.1%;
	left:	49.1%;
	top:	60.3%;
	}
			
/* 明居３ */
#asia15 {
	z-index: 11;	
	position: absolute;
	width:	24.2%;
	height:	11.9%;	
	left:	61.5%;
	top:	78.8%;
	}


/* 明居２ */
#asia16 {
	z-index: 12;
	position: absolute;	
	width:	21.9%;
	height: 10.7%;	
	left:	56.8%;
	top:	70.7%;
	}


/* ラオ属の娘 */
#asia17 {
	z-index: 10;	
	position: absolute;
	width:	14.2%;
	height:	10.7%;	
	left:	82.8%;
	top:	88.3%;
	}