@charset "UTF-8";


/*  ######基本の色の設定######  */
/*	
	color: #5773b7; メニューの文字の色　青
	color: #5780ec; ちょっと明るい青
	color: #999; マウスをのせたときの色　灰色
	color: #2db772; コンテンツのみどり色 少し濃い
	       #58bca3;コンテンツのみどり色　明るい
	color: #ffcc00;  見出しの黄色
	color: #ddd; アンダーライン　薄い灰色
	color: #ff99cc; ピンク
*/
/* ######### LightBoxタイプ　experiences ギャラリーの設定 ######### */


/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6, #r7 {
	display: none;
}


/*マウスオーバーでポインターを手のひら*/
label img {
	cursor: pointer;
}

/*表示写真の初期配置（全部透明に）とtransition設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
	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 を表示 */
#r1:checked ~ #frame,#r2:checked ~ #frame,#r3:checked ~ #frame,#r4:checked ~ #frame,#r5:checked ~ #frame {
	opacity:1;
	z-index:95;
}

/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #frame #photo1, #r2:checked ~ #frame #photo2, #r3:checked ~ #frame #photo3, #r4:checked ~ #frame #photo4, #r5:checked ~ #frame #photo5 {
	opacity: 1;
	z-index:100;
}

/* サムネイルがクリックされたら#darkscreen を表示 */
#r1:checked ~ label #darkscreen,#r2:checked ~ label #darkscreen,#r3:checked ~ label #darkscreen,#r4:checked ~ label #darkscreen,#r5:checked ~ label #darkscreen {
	opacity:0.6;
	z-index:90;
}

/* #frame */
#frame {
	position:fixed !important;
	position:absolute;
	background:#fff;
	width: 810px;
	height: 650px;
	top: 25%;
	margin: -120px 6% 0 6%;
	opacity: 0;
	z-index:-11;
}

/* 写真の下に表示するタイトル */
.poster_title {
	position:absolute;
	left:10px;
	top: 440px;
	font-size:12px;
}
/* 右上に表示する閉じるボタン */
#close_btn label {
	position:absolute;
	left: 700px;
	top: -30px;
	font-size:18px;
	color: #fff;
	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;
}