@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: #FFB973;
	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:45%;
	height:auto;
	float:left;
	}
	
.toplink p{
	text-align: right;
	font-color: #fff;
	font-size:55%;
	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: #FFB973;
	margin: 0px;
	padding-right: 4%;
}

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

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

/*木香茨*/
#door01 {
	z-index: 2;
	position: absolute;
	width:	16.9%;
	height:	15.4%;
	left:	2.3%;
	top:	7%;
	}

/* 松と竹 (襖絵) 清岩院 */
#door02 {
	z-index: 1;
	position: absolute;
	width:	23.2%;
	height: 20.8%;
	left:	19.9%;
	top:	1.7%;
	}

/* 鉄線 (襖絵) */
#door03 {
	z-index: 3;
	position: absolute;
	width:	17.7%;
	height:	14.9%;
	left:	74%;
	top:	1.8%;
	}

/* 紅白梅 京濱伏見稲荷神 */
#door04 {
	z-index: 0;
	position: absolute;
	width:	40.7%;
	height: 26%;
	left:	5.6%;
	top:	23.3%;
	}

/* 桜 （天井画）地蔵院本堂 */
#door05 {
	z-index: 5;
	position: absolute;	
	width:	24.5%;
	height:	40%;
	left:	44.6%;
	top:	5.9%;
	}

/* 老松 （能舞台・鏡板) */
#door06 {
	z-index: 1;
	position: absolute;
	width:	29.3%;
	height:	30.1%;	
	left:	69.7%;
	top:	17.7%;
	}

/* 白梅（襖絵）清岩院 */
#door07 {	
	z-index: 7;	
	position: absolute;	
	width:	47.7%;
	height:	21.5%;	
	left:	1.5%;
	top:	50.1%;
	}

/* 渓流 羽村市 */
#door08 {
	z-index: 8;
	position: absolute;	
	width:	38.1%;
	height:	21.5%;	
	left:	52.4%;
	top:	48.5%;
	}

/* 牡丹 出雲大社 大阪分祠*/
#door09 {
	z-index: 9;
	position: absolute;
	width:	13.9%;
	height:	23.3%;	
	left:	10.1%;
	top:	74.5%;
	}

/* 桜（襖絵）出雲大社　大阪分祠 */
#door10 {
	z-index: 0;
	position: absolute;	
	width:	42%;
	height: 30.1%;	
	left:	28.5%;
	top:	67.6%;
	}

/* 竹林 羽村市 */
#door11 {
	z-index: 0;
	position: absolute;
	width:	25.3%;
	height:	21.8%;	
	left:	71.4%;
	top:	72.3%;
	}


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

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


/*木香茨*/
#door01 {
	z-index: 2;
	position: absolute;
	width:	29%;
	height:	8.7%;
	left:	0%;
	top:	3.5%;
	}

/* 松と竹 (襖絵) 清岩院 */
#door02 {
	z-index: 1;
	position: absolute;
	width:	36.8%;
	height: 10.9%;
	left:	29.9%;
	top:	2.4%;
	}

/* 鉄線 (襖絵) */
#door03 {
	z-index: 3;
	position: absolute;
	width:	30.7%;
	height:	8.4%;
	left:	68.2%;
	top:	3.6%;
	}

/* 紅白梅 京濱伏見稲荷神 */
#door04 {
	z-index: 0;
	position: absolute;
	width:	77.3%;
	height: 16.3%;
	left:	9.8%;
	top:	14.1%;
	}

/* 桜 （天井画）地蔵院本堂 */
#door05 {
	z-index: 5;
	position: absolute;	
	width:	44.9%;
	height:	24.1%;
	left:	1.8%;
	top:	31%;
	}

/* 老松 （能舞台・鏡板) */
#door06 {
	z-index: 1;
	position: absolute;
	width:	50.8%;
	height:	17.2%;	
	left:	48.2%;
	top:	34.5%;
	}

/* 白梅（襖絵）清岩院 */
#door07 {	
	z-index: 7;	
	position: absolute;	
	width:	86.5%;
	height:	12.8%;	
	left:	11.1%;
	top:	56%;
	}

/* 渓流 羽村市 */
#door08 {
	z-index: 8;
	position: absolute;	
	width:	71.5%;
	height:	13.3%;	
	left:	23.2%;
	top:	69.7%;
	}

/* 牡丹 出雲大社 大阪分祠*/
#door09 {
	z-index: 9;
	position: absolute;
	width:	19.8%;
	height:	11%;	
	left:	1.8%;
	top:	69.7%;
	}

/* 桜（襖絵）出雲大社　大阪分祠 */
#door10 {
	z-index: 10;
	position: absolute;	
	width:	61.1%;
	height: 14.4%;	
	left:	1.8%;
	top:	84.2%;
	}

/* 竹林 羽村市 */
#door11 {
	z-index: 0;
	position: absolute;
	width:	33.1%;
	height:	9.3%;	
	left:	64.8%;
	top:	84.1%;
	}