/* body */
body {
	color:#1a1a1a;
	margin:0px;
	padding:0px;
	background:#ffffff url(bg2.gif) repeat-y;
	background-position:center;
}

/* テーブル・段落 */
td { font-size:13px; line-height:140%; }
p  { margin:3px 5px; }

/* リンク */
a       { color:#0000FF; text-decoration:underline; }
a:hover { color:#aa0000; text-decoration:none; background-color:#ffcc99; }

/* コンテンツ */
h1 { color:navy;  font-size:16pt; margin:0px 0px;}
h2 { color:blue;  font-size:11pt; margin:0px 0px;}
h3 { color:black; font-size:11pt; margin:0px 0px;}

/*ギャラリー全体のコンテナー*/
#stage {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#thumbs {
    position: absolute;
    width: 450px;   
    top: 320px;
    left: -10px;
}
/*サムネイルのマウスオーバーでポインターを手のひらに*/
#thumbs label img {
    cursor: pointer;
}
/*初期画面*/
#screen {
    position: absolute;
    left: 50px;
    top: 10px;
    width: 300px;
    height: 300px;
    background-color: skyblue;
}
/*初期画面上の文字*/
#screen span {
    position:absolute;
    top:130px;
    left:50px;
    font-size:20px;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8 {
    display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
#photo1, #photo2, #photo3, #photo4, #photo5, #photo6, #photo7, #photo8 {
    position: absolute;
    left: 30px;
    top: 10px;
    opacity: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1, #r2:checked ~ #photo2, #r3:checked ~ #photo3, #r4:checked ~ #photo4, #r5:checked ~ #photo5, #r6:checked ~ #photo6, #r7:checked ~ #photo7, #r8:checked ~ #photo8 {
    opacity: 1;
}
/*どれかがチェックされたらスクリーン上の文字を非表示に*/
#r1:checked ~ #screen, #r2:checked ~ #screen, #r3:checked ~ #screen, #r4:checked ~ #screen, #r5:checked ~ #screen, #r6:checked ~ #screen, #r7:checked ~ #screen, #r8:checked ~ #screen {
    opacity: 0;
}