@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: #0092a5;
	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: #0092a5;
	margin: 0px;
	padding-right: 4%;
}

#workswater {
	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;
}
#workswater li{
	list-style-type: none;
	}
#workswater 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));
	}

#workswater 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));
}

/* A Stream 2008 */
#water01 {
	z-index: 1;
	position: absolute;
	width:	15.8%;
	height:	30%;
	left:	0.8%;
	top:	1.2%;
	}

/* 吹き割の滝 */
#water02 {
	z-index: 1;
	position: absolute;
	width:	32.6%;
	height: 25.2%;
	left:	16.7%;
	top:	2.3%;
	}

/* 南限大山峯 */
#water03 {
	z-index: 3;
	position: absolute;
	width:	30.9%;
	height:	21.3%;
	left:	48.5%;
	top:	0.8%;
	}

/* 映月 */
#water04 {
	z-index: 10;
	position: absolute;
	width:	11.9%;
	height: 32.8%;
	left:	0%;
	top:	35.6%;
	}

/* 北限猪鼻瀧 */
#water05 {
	z-index: 5;
	position: absolute;	
	width:	11.8%;
	height:	64.3%;
	left:	8.8%;
	top:	19%;
	}

/* " The Stream " インスタレーション（五條市・栗山家住宅） */
#water06 {
	z-index: 1;
	position: absolute;
	width:	32.2%;
	height:	41.7%;	
	left:	19.2%;
	top:	29.2%;
	}

/* "The Mountain Stream" 2008 */
#water07 {	
	z-index: 20;	
	position: absolute;	
	width:	16.4%;
	height:	24.8%;	
	left:	44.7%;
	top:	21.7%;
	}

/* 8-water02b */
#water08 {
	z-index: 12;
	position: absolute;	
	width:	11.8%;
	height:	30.2%;	
	left:	52.7%;
	top:	41.2%;
	}

/* "The Waterfall " 2008 */
#water09 {
	z-index: 9;
	position: absolute;
	width:	13.4%;
	height:	47.9%;	
	left:	62.4%;
	top:	17.8%;
	}

/* 西限板浪瀧 */
#water10 {
	z-index: 10;
	position: absolute;	
	width:	11.2%;
	height: 64.3%;	
	left:	76.4%;
	top:	6%;
	}

/* 蜻蛉の滝 */
#water11 {
	z-index: 5;
	position: absolute;
	width:	12.2%;
	height:	70%;	
	left:	86.6%;
	top:	3.8%;
	}

/* 東限塩匂 */
#water12 {
	z-index: 12;	
	position: absolute;
	width:	30.9%;
	height:	21.5%;	
	left:	0.9%;
	top:	75%;
	}

/* 13-water06b-stream */
#water13 {	
	z-index: 10;	
	position: absolute;
	width:	17.9%;
	height:	24%;	
	left:	28.5%;
	top:	61.5%;
	}

/* 14-water07b-stream */
#water14 {
	z-index: 1;	
	position: absolute;
	width:	40.3%;
	height:	32%;	
	left:	33.3%;
	top:	66.8%;
	}

/* 流 */
#water15 {
	z-index: 4;	
	position: absolute;
	width: 24.6%;
	height: 29.9%;	
	left: 75.1%;
	top: 68.4%;
	}


@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));
	}
#workswater {
	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: #59b200;
	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));
	}
#workswater {
	position: relative;
	aspect-ratio: 16/9;
	list-style-position: inside;
	list-style-type: none;
	background-color: #fff;
	margin: auto;
	}

.toplink{
	color : #fff;
	background-color:  #0092a5;
	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;
	}

/* A Stream 2008 スマホ*/
#water01 {
	z-index: 2;
	position: absolute;
	width:	24.2%;
	height:	15.2%;
	left:	1.8%;
	top:	0.8%;
	}

/* 吹き割の滝 スマホ*/
#water02 {
	z-index: 1;
	position: absolute;
	width:	59.9%;
	height: 15.3%;
	left:	25.4%;
	top:	1.4%;
	}

/* 南限大山峯 スマホ*/
#water03 {
	z-index: 3;
	position: absolute;
	width:	47.4%;
	height:	10.8%;
	left:	11.1%;
	top:	14.5%;
	}

/* 映月 スマホ*/
#water04 {
	z-index: 15;
	position: absolute;
	width:	18.2%;
	height: 16.5%;
	left:	80.7%;
	top:	0.3%;
	}

/* 北限猪鼻瀧 スマホ*/
#water05 {
	z-index: 5;
	position: absolute;	
	width:	18.9%;
	height:	33.9%;
	left:	77.1%;
	top:	14.5%;
	}

/* " The Stream "インスタレーション（五條市・栗山家住宅）2016 　スマホ*/
#water06 {
	z-index: 1;
	position: absolute;
	width:	76.8%;
	height:	32.8%;	
	left:	3.3%;
	top:	18.3%;
	}

/* "The Mountain Stream" 2008 スマホ */
#water07 {	
	z-index: 7;	
	position: absolute;	
	width:	32.8%;
	height:	16.3%;	
	left:	18.4%;
	top:	46.3%;
	}

/* 8-water02b　スマホ */
#water08 {
	z-index: 8;
	position: absolute;	
	width:	18.4%;
	height:	15.4%;	
	left:	52.6%;
	top:	42.3%;
	}

/* The Waterfall スマホ */
#water09 {
	z-index: 9;
	position: absolute;
	width:	20.4%;
	height:	24.2%;	
	left:	55.5%;
	top:	56.8%;
	}

/* 10-西限板浪瀧 スマホ */
#water10 {
	z-index: 10;
	position: absolute;	
	width:	17.2%;
	height: 32.3%;	
	left:	0.5%;
	top:	44%;
	}

/* 蜻蛉の滝 スマホ */
#water11 {
	z-index: 0;
	position: absolute;
	width:	24.9%;
	height:	46.7%;	
	left:	74.1%;
	top:	43.4%;
	}

/* 12-東限塩匂 スマホ */
#water12 {
	z-index: 16;	
	position: absolute;
	width:	47.3%;
	height:	10.8%;	
	left:	3.9%;
	top:	75.6%;
	}

/* 13-water06b-stream スマホ */
#water13 {	
	z-index: 20;	
	position: absolute;
	width:	35.9%;
	height:	15.9%;	
	left:	23.7%;
	top:	61.7%;
	}

/* 14-water07b-streamスマホ */
#water14 {
	z-index: 3;	
	position: absolute;
	width:	64.3%;
	height:	16.9%;	
	left:	1.3%;
	top:	82.3%;
	}

/* 流 */
#water15 {
	z-index: 4;	
	position: absolute;
	width:	36.5%;
	height:	14.7%;	
	left:	61.7%;
	top:	83.5%;
	}

}