@charset "utf-8";

/*diary.html専用
-----------------------------------------*/
nav ul li a[href="diary.html"] {
	color: #633;
	background-image: url(../img/menu2.png);
}
/*雑記
-----------------------------------------*/
h3 {
	text-align: center;
}
#photos img {
	border: 1px solid #EDB7A5;
	padding: 5px;
	border-radius: 5px;
}
/*全体のコンテナー*/
#stage {
	position: relative;
	width: 612px;
	height: 465px;
	margin: 0 auto;
	overflow:hidden;
}
/*全てのラジオボタンを非表示に*/
#back1,#back2,#back3,#back4,#back5,#back6,#back7,#back8,#back9,#back10 {
	display: none;
}
#next1,#next2,#next3,#next4,#next5,#next6,#next7,#next8,#next9,#next10 {
	display: none;
}
/*全ての写真を水平一列に格納したdiv、#photosにtransitionを設定*/
#photos {
	position:absolute;
	top:0;
    width:6000px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*各写真の並び位置を設定*/
#photo1, #photo2, #photo3, #photo4, #photo5, #photo6, #photo7, #photo8, #photo9, #photo10 {
	float:left;
}
/*ボタン領域の設定*/
.cover_left, .cover_right {
	position:absolute;
	top:0;
	width:200px;
	height:348px;
	display:none;
	cursor:pointer;
	z-index:101;
}
.cover_left {
	left:0;
}
.cover_right {
	left:400px;
}
/*ボタン領域内のボタン文字（＜、＞）の設定*/
.cover_left span, .cover_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 210px;
}
.cover_left span {
	left: 10px;	
}
.cover_right span {
	left: 160px
}
/*ボタン領域hover時文字の設定*/
.cover_right > span,.cover_left > span {
	opacity:1;
	color:#EEE;
}
#right1,#right2,#right3,#right4,#right5,#right6,#right7,#right8,#right9 {
	display:none;
}
#left2,#left3,#left4,#left5,#left6,#left7,#left8,#left9 {
	display:none;
}
/*各ボタン領域がクリックされた時の#photosの行き先位置の設定*/
#back2:checked ~ #photos { left:0; }
#back3:checked ~ #photos,#next1:checked ~ #photos { left:-612px; }
#back4:checked ~ #photos,#next2:checked ~ #photos { left:-1224px; }
#back5:checked ~ #photos,#next3:checked ~ #photos { left:-1836px; }
#back6:checked ~ #photos,#next4:checked ~ #photos { left:-2448px; }
#back7:checked ~ #photos,#next5:checked ~ #photos { left:-3060px; }
#back8:checked ~ #photos,#next6:checked ~ #photos { left:-3672px; }
#back9:checked ~ #photos,#next7:checked ~ #photos { left:-4284px; }
#next8:checked ~ #photos { left:-4284px; }
/*ボタン領域クリック時に前表示域を消し切り替え後の表示域を表示*/
#back2:checked ~ #n_btn label #right1 { display:block; }
#back3:checked ~ #b_btn label #left2,#back3:checked ~ #n_btn label #right2 { display:block; }
#back4:checked ~ #b_btn label #left3,#back4:checked ~ #n_btn label #right3 { display:block; }
#back5:checked ~ #b_btn label #left4,#back5:checked ~ #n_btn label #right4 { display:block; }
#back6:checked ~ #b_btn label #left5,#back6:checked ~ #n_btn label #right5 { display:block; }
#back7:checked ~ #b_btn label #left6,#back7:checked ~ #n_btn label #right6 { display:block; }
#back8:checked ~ #b_btn label #left7,#back8:checked ~ #n_btn label #right7 { display:block; }
#back9:checked ~ #b_btn label #left8,#back9:checked ~ #n_btn label #right8 { display:block; }
#next1:checked ~ #b_btn label #left2,#next1:checked ~ #n_btn label #right2 { display:block; }
#next2:checked ~ #b_btn label #left3,#next2:checked ~ #n_btn label #right3 { display:block; }
#next3:checked ~ #b_btn label #left4,#next3:checked ~ #n_btn label #right4 { display:block; }
#next4:checked ~ #b_btn label #left5,#next4:checked ~ #n_btn label #right5 { display:block; }
#next5:checked ~ #b_btn label #left6,#next5:checked ~ #n_btn label #right6 { display:block; }
#next6:checked ~ #b_btn label #left7,#next6:checked ~ #n_btn label #right7 { display:block; }
#next7:checked ~ #b_btn label #left8,#next7:checked ~ #n_btn label #right8{ display:block; }
#next8:checked ~ #b_btn label #left9 { display:block; }