@charset "utf-8";


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

#frameg {
	position: relative;
	 width: 533px;
	height: 432px;
	margin: 0 auto;
	/* background-color: blue; */
}
/*初期画面*/
#screen1 {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 533px;
	height: 400px;
	/* background-color: #CCC; */
}
/*初期画面上の文字*/
#screen1 #title1 {
 	position: absolute;
	top: 95px;
	left: 64px;
	color: white;
	opacity: 1;
}
#screen1 p #title1  {
	font-size: 32px;
}
#screen1 #s_title1, .s_comments {
 	display: none;
}

/*初期画面上のコメント文字*/
#screen1 span#come p {
	left: 70px;
	margin-top: 0px;
	margin-left: 10px;
	padding: 0;
	line-height: 1em;
}
#screen1 img {
	left:50px;
	margin-bottom: 0;
	padding: 0;
	width: 533px;
	height: 400px;
	border-radius: 4px;
}
#mask {
	display: block;
	position:absolute;
	width: 533px;
	height: 400px;
	top: 0;
	left: 0px;
	background-color: black;
	opacity: 0.4;
	border-radius: 4px;
	/* z-index: 99999; */
}
#dammy {
	display: none;
}


/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10 {
	display: none;
}
/*表示写真用divを画面下部に125px間隔でサムネイルとして一列に並べる*/
#photog1,#photog2,#photog3,#photog4,#photog5,#photog6,#photog7,#photog8,#photog9,#photog10 {
	position:absolute;
	top: 440px;
	float:left;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	background-color: white;
}
#photog1 {left: 1px;}
#photog2 {left: 108px;}
#photog3 {left: 215px;}
#photog4 {left: 322px;}
#photog5 {left: 429px;}
#photog6 {top: 523px; left: 1px;}
#photog7 {top: 523px; left: 108px;}
#photog8 {top: 523px; left: 215px;}
#photog9 {top: 523px; left: 322px;}
#photog10 {top:523px; left: 429px;}
/*写真をサムネイルサイズにし、transitionをセット*/
#photog1 img,#photog2 img,#photog3 img,#photog4 img,#photog5 img,#photog6 img,#photog7 img,#photog8 img,#photog9 img,#photog10 img {
	width:103px;
	height:79px;
	cursor: pointer;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	margin-bottom: 0;
	padding: 0;
	background: none;
	vertical-align:bottom; /* 画像の下に余白が出ないように */
	border-radius: 4px;
}

/*サムネイルがクリックされたら、該当する写真の大きさを元のサイズに拡大する*/
#r1:checked ~ #photog1 img,#r2:checked ~ #photog2 img,#r3:checked ~ #photog3 img,#r4:checked ~ #photog4 img,#r5:checked ~ #photog5 img,#r6:checked ~ #photog6 img,#r7:checked ~ #photog7 img,#r8:checked ~ #photog8 img,#r9:checked ~ #photog9 img,#r10:checked ~ #photog10 img {
	width: 533px;
	height: 400px;
	margin: 0;
	padding: 0;
}
/*クリックに該当する写真が画面中央にくるようにする*/
#r1:checked ~ #photog1,#r2:checked ~ #photog2,#r3:checked ~ #photog3,#r4:checked ~ #photog4,#r5:checked ~ #photog5,#r6:checked ~ #photog6,#r7:checked ~ #photog7,#r8:checked ~ #photog8,#r9:checked ~ #photog9,#r10:checked ~ #photog10 {
	position:absolute;
	left:0px;
	top:0px;
}
/*いずれかのサムネイルがクリックされたら、背景の文字を非表示にする*/
#r1:checked ~ #screen1 span, #r2:checked ~ #screen1 span, #r3:checked ~ #screen1 span, #r4:checked ~ #screen1 span, #r5:checked ~ #screen1 span,#r6:checked ~ #screen1 span, #r7:checked ~ #screen1 span, #r8:checked ~ #screen1 span, #r9:checked ~ #screen1 span, #r10:checked ~ #screen1 span {
	opacity: 0;
}
#r1:checked ~ #screen1 span p, #r2:checked ~ #screen1 span p, #r3:checked ~ #screen1 span p, #r4:checked ~ #screen1 span p, #r5:checked ~ #screen1 span p,#r6:checked ~ #screen1 span p, #r7:checked ~ #screen1 span p, #r8:checked ~ #screen1 span p, #r9:checked ~ #screen1 span p, #r10:checked ~ #screen1 span p {
	opacity: 0;
}
/* いずれかのサムネイルがクリックされたら、大きい画像のコメントを表示する */
#r1:checked ~ #m_coment1,#r2:checked ~ #m_coment2,#r3:checked ~ #m_coment3,#r4:checked ~ #m_coment4,#r5:checked ~ #m_coment5,#r6:checked ~ #m_coment6,#r7:checked ~ #m_coment7,#r8:checked ~ #m_coment8,#r9:checked ~ #m_coment9,#r10:checked ~ #m_coment10 {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	opacity: 1;
}
/* 大きい画像のコメント */
#m_coment1,#m_coment2,#m_coment3,#m_coment4,#m_coment5,#m_coment6,#m_coment7,#m_coment8,#m_coment9,#m_coment10 {
	position:absolute;
	top:408px;
	left:0px;
	margin-top: 0;
	margin-left: 5px;
	padding: 0;
	line-height: 1em;
	opacity: 0;
}

/* いずれかのサムネイルにマウスオーバーされたら、サムネールの下コメントを表示する */
#photog1:hover ~ #m_coment11,#photog2:hover ~ #m_coment12,#photog3:hover ~ #m_coment13,#photog4:hover ~ #m_coment14,#photog5:hover ~ #m_coment15,#photog6:hover ~ #m_coment16,#photog7:hover ~ #m_coment17,#photog8:hover ~ #m_coment18,#photog9:hover ~ #m_coment19,#photog10:hover ~ #m_coment20 {
	opacity: 1;
}

/* サムネールの下コメント */
#m_coment11,#m_coment12,#m_coment13,#m_coment14,#m_coment15,#m_coment16,#m_coment17,#m_coment18,#m_coment19,#m_coment20 {
	position:absolute;
	display: block;
	top: 605px;
	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;
}

/* いずれかのサムネイルがクリックされたら、サムネールの下コメントを非表示にする */
#r1:checked ~ #m_coment11,#r2:checked ~ #m_coment12,#r3:checked ~ #m_coment13,#r4:checked ~ #m_coment14,#r5:checked ~ #m_coment15,#r6:checked ~ #m_coment16,#r7:checked ~ #m_coment17,#r8:checked ~ #m_coment18,#r9:checked ~ #m_coment19,#r10:checked ~ #m_coment20 {
	opacity: 0;
}