@charset "utf-8";

/* -----photo garally css ------- */
/*ギャラリー全体のコンテナー*/
#stageg {
	position: relative;
	width: 545px;
	height: 647px;
	margin: 0 auto;
	margin-top: 5px;
	/* background-color: red; */
}

#frameg {
	position: relative;
	 width: 545px;
	height: 445px;
	margin: 0 auto;
	/* background-color: blue; */
}
/*初期画面*/
#screen1 {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 545px;
	height: 409px;
}
/*初期画面上の文字*/
#screen1 #title1 {
 	position: absolute;
	top: 102px;
	left: 64px;
	color: white;
	opacity: 1;
}
#screen1 p #title1  {
	font-size: 32px;
}

/*初期画面上のコメント文字*/
#screen1 #come {
	position:absolute;
	top: 417px;
	left: -8px;
	margin-top: 0px;
	margin-left: 10px;
	padding: 0;
	line-height: 1em;
}
#screen1 img {
	margin-bottom: 0;
	padding: 0;
	width: 545px;
	height: 409px;
	border-radius: 4px;
}
#mask {
	display: block;
	position:absolute;
	width: 545px;
	height: 409px;
	top: 0px;
	left: 0px;
	background-color: black;
	opacity: 0.4;
	border-radius: 4px;
}

/*表示写真用divを画面下部に125px間隔でサムネイルとして一列に並べる*/
#photog0,#photog1,#photog2,#photog3,#photog4,#photog5,#photog6,#photog7,#photog8,#photog9 {
	position:absolute;
	top: 445px;
	float:left;
	background-color: white;
}
#photog0 {left: 0px;}
#photog1 {left: 110px;}
#photog2 {left: 220px;}
#photog3 {left: 330px;}
#photog4 {left: 440px;}
#photog5 {top: 531px; left: 0px;}
#photog6 {top: 531px; left: 110px;}
#photog7 {top: 531px; left: 220px;}
#photog8 {top: 531px; left: 330px;}
#photog9 {top:531px; left: 440px;}
/*写真をサムネイルサイズにセット*/
#photog0 img, #photog1 img,#photog2 img,#photog3 img,#photog4 img,#photog5 img,#photog6 img,#photog7 img,#photog8 img,#photog9 img {
	width:105px;
	height:81px;
	cursor: pointer;
	margin-bottom: 0;
	padding: 0;
	background: none;
	vertical-align:bottom; /* 画像の下に余白が出ないように */
	border-radius: 4px;
}
.open_photos {
	position: absolute;
	width: 545px;
	height: 409px;
	margin: 0;
	padding: 0;
	left: 0px;
	top: 0px;
}
.open_photos img {
	width: 545px;
	height: 409px;
	margin: 0;
	padding: 0;
	border-radius: 4px;
}

/* 大きい画像のコメント */
#coment1,#coment2,#coment3,#coment4,#coment5,#coment6,#coment7,#coment8,#coment9,#coment10 {
	position:absolute;
	top:411px;
	left:0px;
	margin-top: 0;
	margin-left: 5px;
	padding: 0;
	line-height: 1em;
	opacity: 0;
}

/* いずれかのサムネイルにマウスオーバーされたら、サムネールの下コメントを表示する */
#photog0:hover ~ #coment11,#photog1:hover ~ #coment12,#photog2:hover ~ #coment13,#photog3:hover ~ #coment14,#photog4:hover ~ #coment15,#photog5:hover ~ #coment16,#photog6:hover ~ #coment17,#photog7:hover ~ #coment18,#photog8:hover ~ #coment19,#photog9:hover ~ #coment20 {
	opacity: 1;
}

/* サムネールの下コメント */
#coment11,#coment12,#coment13,#coment14,#coment15,#coment16,#coment17,#coment18,#coment19,#coment20 {
	position:absolute;
	display: block;
	top: 616px;
	margin-top: 0;
	line-height: 1em;
	opacity: 0;
	left: 2em;
	width: auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #666;
	color: #eee;
	text-align: left;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	transition: all .5s ease;
}