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

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

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

/* 花菖蒲 */
#flower01 {
	z-index: 11;
	position: absolute;
	width:	12%;
	height:	17.3%;
	left:	3.4%;
	top:	4.2%;
	}

/* 菖蒲 */
#flower02 {
	z-index: 10;
	position: absolute;
	width:	14.8%;
	height: 11.1%;
	left:	11.7%;
	top:	16.7%;
	}

/* 朧月 */
#flower03 {
	z-index: 3;
	position: absolute;
	width:	7.1%;
	height:	12.6%;
	left:	22.1%;
	top:	2%;
	}

/* 櫻花 */
#flower04 {
	z-index: 12;
	position: absolute;
	width:	8.1%;
	height: 27.6%;
	left:	31.8%;
	top:	5.1%;
	}

/* 梅 */
#flower05 {
	z-index: 3;
	position: absolute;	
	width:	24.1%;
	height:	29.8%;
	left:	43.1%;
	top:	2%;
	}

/* 筍 */
#flower06 {
	z-index: 4;
	position: absolute;
	width:	11.5%;
	height:	18.5%;	
	left:	62.8%;
	top:	15%;
	}

/* 春馨 */
#flower07 {	
	z-index: 4;	
	position: absolute;	
	width:	10.7%;
	height:	28.3%;	
	left:	75.5%;
	top:	2.5%;
	}

/* 紅葉 */
#flower08 li a img{
	box-shadow: none;
	}
	
/* 紅葉 */
#flower08 {
	z-index: 5;
	position: absolute;	
	width:	12.2%;
	height:	23.7%;	
	left:	85.2%;
	top:	12.1%;
	}
	
/* 竹林 */
#flower09 {
	z-index: 1;
	position: absolute;
	width:	32%;
	height:	30.1%;	
	left:	1.9%;
	top:	26.6%;
	}

/* 惑星 Planet Moss */
#flower10 {
	z-index: 2;
	position: absolute;	
	width:	62.8%;
	height: 39.8%;	
	left:	34.9%;
	top:	34%;
	}

/* 椿 */
#flower11 {
	z-index: 2;
	position: absolute;
	width:	16.4%;
	height:	19.6%;	
	left:	15.7%;
	top:	52.7%;
	}

/* 鉄線 */
#flower12 {
	z-index: 7;	
	position: absolute;
	width:	11.9%;
	height:	19.3%;	
	left:	5.6%;
	top:	62%;
	}

/* 惑星 162173 Ryugu */
#flower13 {	
	z-index: 7;	
	position: absolute;
	width:	11.1%;
	height:	14.4%;	
	left:	1.7%;
	top:	82.7%;
	}

/* 紅葉 扇面のインスタレーション */
#flower14 {
	z-index: 1;	
	position: absolute;
	width:	20.3%;
	height:	29.4%;	
	left:	21.1%;
	top:	67.6%;
	}

/* 苔A */
#flower15 {
	z-index: 9;	
	position: absolute;
	width:	13.8%;
	height: 22.4%;	
	left:	43.9%;
	top:	74.7%;
	}

/* 稲荷桜 */
#flower16 {
	z-index: 10;	
	position: absolute;
	width:	16%;
	height:	22.7%;	
	left:	56.2%;
	top:	68.7%;
	}

/* 枝垂桜 */
#flower17 {
	z-index: 7;	
	position: absolute;
	width:	12.1%;
	height:	28.6%;	
	left:	73.9%;
	top:	70.2%;
	}

/* 苔B */
#flower18 {
	z-index: 7;	
	position: absolute;
	width:	9.3%;
	height:	23.1%;	
	left:	89.4%;
	top:	75.5%;
	}

@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));
	}
	
#worksflower {
	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: #ef877b;
	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));
	}

#worksflower {
	position: relative;
	aspect-ratio: 16/9;
	list-style-position: inside;
	list-style-type: none;
	background-color: #fff;
	margin: auto;
	}

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

/* 花菖蒲 */
#flower01 {
	z-index: 11;
	position: absolute;
	width:	22.9%;
	height:	10.9%;
	left:	4.7%;
	top:	1%;
	}

/* 菖蒲 */
#flower02 {
	z-index: 10;
	position: absolute;
	width:	38.4%;
	height: 10.2%;
	left:	29.4%;
	top:	1.8%;
	}

/* 朧月 */
#flower03 {
	z-index: 3;
	position: absolute;
	width:	20.3%;
	height:	11.8%;
	left:	72.9%;
	top:	0.9%;
	}

/* 櫻花 */
#flower04 {
	z-index: 12;
	position: absolute;
	width:	16.5%;
	height: 18.5%;
	left:	3.8%;
	top:	13.4%;
	}

/* 梅 */
#flower05 {
	z-index: 3;
	position: absolute;	
	width:	35%;
	height:	14.3%;
	left:	24.9%;
	top:	15.5%;
	}

/* 筍 */
#flower06 {
	z-index: 4;
	position: absolute;
	width:	24.1%;
	height:	12.8%;	
	left:	52.9%;
	top:	12.7%;
	}

/* 春馨 */
#flower07 {	
	z-index: 4;	
	position: absolute;	
	width:	21.1%;
	height:	18.3%;	
	left:	77.1%;
	top:	14.4%;
	}

/* 紅葉 */
#flower08 li a img{
	box-shadow: none;
	}
	
/* 紅葉 */
#flower08 {
	z-index: 15;
	position: absolute;	
	width:	24.7%;
	height:	15.8%;	
	left:	6.9%;
	top:	31%;
	}
	
/* 竹林 */
#flower09 {
	z-index: 1;
	position: absolute;
	width:	62.1%;
	height:	20.1%;	
	left:	30.9%;
	top:	26.2%;
	}

/* 惑星 Planet Moss */
#flower10 {
	z-index: 2;
	position: absolute;	
	width:	95.4%;
	height: 19.9%;	
	left:	2.3%;
	top:	43.4%;
	}

/* 椿 */
#flower11 {
	z-index: 2;
	position: absolute;
	width:	31.4%;
	height:	12.6%;	
	left:	4.6%;
	top:	60.1%;
	}

/* 鉄線 */
#flower12 {
	z-index: 7;	
	position: absolute;
	width:	25.7%;
	height:	13.8%;	
	left:	30.7%;
	top:	65.9%;
	}

/* 惑星 162173 Ryugu */
#flower13 {	
	z-index: 7;	
	position: absolute;
	width:	26.7%;
	height:	10.4%;	
	left:	0.4%;
	top:	72.5%;
	}

/* 紅葉 扇面のインスタレーション */
#flower14 {
	z-index: 1;	
	position: absolute;
	width:	38.3%;
	height:	20.1%;	
	left:	58.3%;
	top:	61.8%;
	}

/* 苔A */
#flower15 {
	z-index: 10;	
	position: absolute;
	width:	22.8%;
	height:	12.3%;	
	left:	2.2%;
	top:	86.7%;
	}

/* 稲荷桜 */
#flower16 {
	z-index: 9;	
	position: absolute;
	width:	30.9%;
	height:	14.4%;	
	left:	24%;
	top:	83.5%;
	}

/* 枝垂桜 */
#flower17 {
	z-index: 7;	
	position: absolute;
	width:	25.8%;
	height: 19.9%;	
	left:	52.9%;
	top:	79.7%;
	}

/* 苔B */
#flower18 {
	z-index: 7;	
	position: absolute;
	width:	18.4%;
	height: 15.1%;	
	left:	79.8%;
	top:	82.8%;
	}
	
}