@charset "utf-8";
/* CSS Document */

/*ラジオボタンを非表示に*/
#r01, #r02, #r03, #r04, #r05,#r06,#r07,#r08,#r09,#r10,#r11,#r12,#r13,#r14,#r15,#r16,#r17,#r18,#r19,#r20,#r21 {
	display: none;
}
/*全サムネイルのコンテナー*/
#thumbs {
	position: relative;
	width: 680px;
	left: 20px;
	margin:0 auto;
}
/*サムネイルのマウスオーバーでポインターを手のひら*/
#thumbs label img {
	cursor: pointer;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
#mask01, #mask02, #mask03, #mask04, #mask05, #mask06, #mask07, #mask08, #mask09, #mask10, #mask11, #mask12, #mask13, #mask14, #mask15, #mask16, #mask17, #mask18, #mask19 {
	position: absolute;
	top:0;
	margin:5px 5px 0 5px;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/* サムネイルがクリックされたら#frame を表示 */
#r01:checked ~ #frame,#r02:checked ~ #frame,#r03:checked ~ #frame,#r04:checked ~ #frame,#r05:checked ~ #frame,#r06:checked ~ #frame,#r07:checked ~ #frame,#r08:checked ~ #frame,#r09:checked ~ #frame,#r10:checked ~ #frame,#r11:checked ~ #frame,#r12:checked ~ #frame,#r13:checked ~ #frame,#r14:checked ~ #frame,#r15:checked ~ #frame,#r16:checked ~ #frame,#r17:checked ~ #frame,#r18:checked ~ #frame,#r19:checked ~ #frame {
	opacity:1;
	z-index:95;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r01:checked ~ #frame #mask01, #r02:checked ~ #frame #mask02, #r03:checked ~ #frame #mask03, #r04:checked ~ #frame #mask04, #r05:checked ~ #frame #mask05, #r06:checked ~ #frame #mask06, #r07:checked ~ #frame #mask07, #r08:checked ~ #frame #mask08, #r09:checked ~ #frame #mask09, #r10:checked ~ #frame #mask10, #r11:checked ~ #frame #mask11, #r12:checked ~ #frame #mask12, #r13:checked ~ #frame #mask13, #r14:checked ~ #frame #mask14, #r15:checked ~ #frame #mask15, #r16:checked ~ #frame #mask16, #r17:checked ~ #frame #mask17, #r18:checked ~ #frame #mask18, #r19:checked ~ #frame #mask19 {
	opacity: 1;
	z-index:100;
}
/* サムネイルがクリックされたら#darkscreen を表示 */
#r01:checked ~ label #darkscreen,#r02:checked ~ label #darkscreen,#r03:checked ~ label #darkscreen,#r04:checked ~ label #darkscreen,#r05:checked ~ label #darkscreen,#r06:checked ~ label #darkscreen,#r07:checked ~ label #darkscreen,#r08:checked ~ label #darkscreen,#r09:checked ~ label #darkscreen,#r10:checked ~ label #darkscreen,#r11:checked ~ label #darkscreen,#r12:checked ~ label #darkscreen,#r13:checked ~ label #darkscreen,#r14:checked ~ label #darkscreen,#r15:checked ~ label #darkscreen,#r16:checked ~ label #darkscreen,#r17:checked ~ label #darkscreen,#r18:checked ~ label #darkscreen,#r19:checked ~ label #darkscreen {
	opacity:0.6;
	z-index:90;
}
/* #frame */
#frame {
	position:fixed !important;
	position:absolute;
	background:#fff;
	width:690px;
	height:550px;
	left:50%;
	top:50%;
	margin-left:-350px;
	margin-top:-280px;
	opacity:0;
	z-index:-11;
}
/* 写真の下に表示するタイトル */
.title {
	position:absolute;
	left:10px;
	top:520px;
	font-size:12px;
}
/* 右下に表示する閉じるボタン */
#close_btn label {
	position:absolute;
	left:620px;
	top:520px;
	font-size:14px;
	font-weight:bold;
	cursor:pointer;
}
/*写真表示時の画面遮蔽スクリーン*/
#darkscreen {
	position:fixed !important;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#000;
	opacity:0;
	z-index:-5;
}