@charset "UTF-8";
html{
	background: #efefef url(/common/images/bg_01.gif);
}
body {
	font: 85% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #666666;
	height: auto;
	}

h1	{
	margin:20px 0;
	padding:0;
	text-align: left;
	width: 820px;
	}

/* contents box -------------------------------------------------------*/
#box {
	margin: 0px auto;
	padding: 0;
	width: 820px;
	height: 100%;
	text-align: center;
	}
#contents{
	width: 820px;
	margin: 0px auto;
	padding: 0px;
	}

#site_name { display: none; }

/* header 		-------------------------------------------------------*/

#header {
	margin: 0px;
	padding: 10px;
	}

/* Groval Navi 	-------------------------------------------------------*/
#g_menu{
	margin:5px 0px;
	text-align: right;
	}
#g_menu ul{
	width:680px;
	padding:0px;
	margin:0px;
	list-style-type:none;
	}
#g_menu li{
	display:inline;
	}
#g_menu a,#g_menu a:link,#g_menu a:hover,#g_menu a:visited{
	padding-left:20px;
	}
	
#topics {
	margin: 10px auto;
	text-align: left;
	padding-right: 10px;
	padding-left: 10px;
	}

#topics dl { 
	margin: 5px auto;
	}

#topics dl dt {
	float: left;
	margin: 0px 10px 0px 0px;
	padding: 0px;
	}

#topics dl dd {
	margin: 0px 0px 0px 5px;
	padding: 0px;
	}

#bCrumb{
	margin:0 0 20px 10px;
	}
#bCrumb ul li{
	float: left;
	display:inline;
	}

/*


/* パンくずリスト -------------------------------------------------------*/
 div#bCrumb{
	margin: 0px auto;
	width: 810px;
	height:1.2em;
	padding: 5 5px 15px;
	background: #FFF;
	text-align: left;
	}

div#bCrumb :after{
	content:"";
	display:block;
	clear:both;
	}

div#bCrumb ul{
	margin-top:-10px;
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	/*float:right;*/
}
div#bCrumb li{
	float:left;
	padding-left:12px;
	margin-right:5px;
	margin-top:10px;
	background:url(/img/bcrumb.png) no-repeat left 0.4em;
	font-size:90%;
	}
div#bCrumb li:first-child{
	background:none;
	margin-left:0;
	padding-left:0;
	}

/* --------------------------------------------------------------------*/
.fig {
	margin: 5px;
	float: left;
	}
#container {
	width:800px;
	margin: 0px auto;
	padding: 5px 10px;
	text-align:center;
	}

.copy {
	margin:10px auto 0px auto;
	color: #999;
	height:auto;
	padding:0px 10px;
	text-align: left;
	}
.comment {
	color: #999;
	background-color: #FFF;
	padding: 0px;
	text-align: left;
	margin: 10px;
	}

/* footer -------------------------------------------------------*/
#footer{
	clear:both;
	height:60px;
	margin:0 auto;
	padding:10px;
	text-align:center;
	background:#F9F9F9;
	color:#999;
	overflow: hidden;
	}
#footer ul {
	margin:0;
	padding-top:10px;
	}

#footer ul li{
	display:inline;
	list-style-type:none;
	margin:10px;
	padding:2px 10px;
	border-right:1px #dddddd solid;
	}

.photo_sum img{
	margin:1px;}

div.mnu{
	padding:10px;
}
div.mnu dt{
	float:left;
	width:12em;
}
div.mnu dd{
	margin-left:12em;
	margin-bottom:1em;
}
img{
	border:0px;
}

.j_txt {
	margin:10px auto;
	padding:20px;
	width:600px;
	text-align:left;
	font: 16px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #999;
	background: url(/images/line_t.gif) ;
	line-height:1.9em;
	letter-spacing:1px;
}

/* Photo menu -------------------------------------------------------*/

#p_menu ul{
	border:0;
	padding:0px;
	width:820px;
	height:60px;
	margin:0px auto;
	text-align:center;
	list-style-type:none;
	}
#p_menu li{
	display:inline;
	padding:0px;
	}

	
#sub{
	float:left;
	width:250px;
	margin-left:-250px;
}

li#menuLast{
	border-right:none;
}

.info {
	width:800px;
	height:120px;
	color: #999;
	background-color: #FFF;
	padding:0px;
	text-align: center;
	margin:10px auto;
}
.info_l{
	float:left;
	width: 360px;
	height:120px;
	text-align: left;
	padding: 0px;
	margin: 0px;
}
.info_r{
	float:right;
	width: 360px;
	height:120px;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
.crear {
	clear: both;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
li#menuLast{
	border-right:none;
	}

#site_name { display: none; }
@charset "UTF-8";
html{
	background: #efefef url(/common/images/bg_01.gif);
}
body {
	font: 85% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #666666;
	height: auto;
	}

h1	{
	margin:20px 0;
	padding:0;
	text-align: left;
	width: 820px;
	}

/* contents box -------------------------------------------------------*/
#box {
	margin: 0px auto;
	padding: 0;
	width: 820px;
	height: 100%;
	text-align: center;
	}
#contents{
	width: 820px;
	margin: 0px auto;
	padding: 0px;
	}

#site_name { display: none; }

/* header 		-------------------------------------------------------*/

#header {
	margin: 0px;
	padding: 10px;
	}

/* Groval Navi 	-------------------------------------------------------*/
#g_menu{
	margin:5px 0px;
	text-align: right;
	}
#g_menu ul{
	width:680px;
	padding:0px;
	margin:0px;
	list-style-type:none;
	}
#g_menu li{
	display:inline;
	}
#g_menu a,#g_menu a:link,#g_menu a:hover,#g_menu a:visited{
	padding-left:20px;
	}
	
#topics {
	margin: 10px auto;
	text-align: left;
	padding-right: 10px;
	padding-left: 10px;
	}

#topics dl { 
	margin: 5px auto;
	}

#topics dl dt {
	float: left;
	margin: 0px 10px 0px 0px;
	padding: 0px;
	}

#topics dl dd {
	margin: 0px 0px 0px 5px;
	padding: 0px;
	}

#bCrumb{
	margin:0 0 20px 10px;
	}
#bCrumb ul li{
	float: left;
	display:inline;
	}

/*


/* パンくずリスト -------------------------------------------------------*/
 div#bCrumb{
	margin: 0px auto;
	width: 810px;
	height:1.2em;
	padding: 5 5px 15px;
	background: #FFF;
	text-align: left;
	}

div#bCrumb :after{
	content:"";
	display:block;
	clear:both;
	}

div#bCrumb ul{
	margin-top:-10px;
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	/*float:right;*/
}
div#bCrumb li{
	float:left;
	padding-left:12px;
	margin-right:5px;
	margin-top:10px;
	background:url(/img/bcrumb.png) no-repeat left 0.4em;
	font-size:90%;
	}
div#bCrumb li:first-child{
	background:none;
	margin-left:0;
	padding-left:0;
	}

/* --------------------------------------------------------------------*/
.fig {
	margin: 5px;
	float: left;
	}
#container {
	width:800px;
	margin: 0px auto;
	padding: 5px 10px;
	text-align:center;
	}

.copy {
	margin:10px auto 0px auto;
	color: #999;
	height:auto;
	padding:0px 10px;
	text-align: left;
	}
.comment {
	color: #999;
	background-color: #FFF;
	padding: 0px;
	text-align: left;
	margin: 10px;
	}

/* footer -------------------------------------------------------*/
#footer{
	clear:both;
	height:60px;
	margin:0 auto;
	padding:10px;
	text-align:center;
	background:#F9F9F9;
	color:#999;
	overflow: hidden;
	}
#footer ul {
	margin:0;
	padding-top:10px;
	}

#footer ul li{
	display:inline;
	list-style-type:none;
	margin:10px;
	padding:2px 10px;
	border-right:1px #dddddd solid;
	}

.photo_sum img{
	margin:1px;}

div.mnu{
	padding:10px;
}
div.mnu dt{
	float:left;
	width:12em;
}
div.mnu dd{
	margin-left:12em;
	margin-bottom:1em;
}
img{
	border:0px;
}

.j_txt {
	margin:10px auto;
	padding:20px;
	width:600px;
	text-align:left;
	font: 16px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #999;
	background: url(/images/line_t.gif) ;
	line-height:1.9em;
	letter-spacing:1px;
}

/* Photo menu -------------------------------------------------------*/

#p_menu ul{
	border:0;
	padding:0px;
	width:820px;
	height:60px;
	margin:0px auto;
	text-align:center;
	list-style-type:none;
	}
#p_menu li{
	display:inline;
	padding:0px;
	}

	
#sub{
	float:left;
	width:250px;
	margin-left:-250px;
}

li#menuLast{
	border-right:none;
}

.info {
	width:800px;
	height:120px;
	color: #999;
	background-color: #FFF;
	padding:0px;
	text-align: center;
	margin:10px auto;
}
.info_l{
	float:left;
	width: 360px;
	height:120px;
	text-align: left;
	padding: 0px;
	margin: 0px;
}
.info_r{
	float:right;
	width: 360px;
	height:120px;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
.crear {
	clear: both;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
li#menuLast{
	border-right:none;
	}

#site_name { display: none; }

/* new icon */
.icon_new{
	-webkit-animation:bigger 1s ease-in altarnate infinite;
	color:#fc0;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow:
		1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff,
		-1px -1px 0 #fff;
}
/* animation */

@-webkit-keyframe@ bigger {
	from{ -webkit-transform:scale(1);}
	30%{ -webkit-transform:scale(2.2);}
	50%{ -webkit-transform:scale(1);}
	to{ -webkit-transform:scale(1);}
}


/* CSS Lightbox */

/*全サムネイルのコンテナー*/
#thumbs {
	position: relative;
	width: 630px;
	left: 20px;
	margin:0 auto;
}
/*サムネイルのマウスオーバーでポインターを手のひら*/
#thumbs label img {
	cursor: pointer;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6, #r7,#n1,#n2,#n3,#n4,#b2,#b3,#b4,#b5 {
	display: none;
}
/* 写真表示領域 */
#stage {
	position:fixed !important;
	position:absolute;
	width:1000px;
	height:590px;
	left:50%;
	top:50%;
	margin-left:-500px;
	margin-top:-270px;
	overflow:hidden;
	opacity:0;
	z-index:-20;
}
/* 写真を横並びに格納する帯状DIV */
#photos {
	position:absolute;
	opacity:0;
	width:5000px;
	left:-2000px;
	-webkit-transition: opacity 0.8s ease;
	-moz-transition: opacity 0.8s ease;
	-o-transition: opacity 0.8s ease;
	transition: opacity 0.8s ease;
}
/*表示写真の初期配置（全部透明に）*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
	position:relative;
	float:left;
}
/* 写真表示の白い台紙となるDIV */
#frame {
	position:fixed !important;
	position:absolute;
	background:#fff;
	width:1010px;
	height:600px;
	left:50%;
	top:50%;
	margin-left:-505px;
	margin-top:-275px;
	opacity:0;
	z-index:-11;
}
/* 写真の表題 */
.title {
	position:absolute;
	left:10px;
	top:575px;
	font-size:12px;
}
/* 閉じるボタン */
#close_btn label {
	position:absolute;
	left:900px;
	top:570px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	font-weight:bold;
	background:#fff;
	cursor:pointer;
}
/*写真表示時の画面遮蔽スクリーン*/
#darkscreen {
	position:fixed !important;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#000;
	opacity:0;
	z-index:-5;
}

/*ボタン領域の設定*/
.cover_left, .cover_right {
	position:absolute;
	top:0;
	width:400px;
	height:563px;
	cursor:pointer;
	z-index:1000;
}
.cover_left {
	left:0;
}
.cover_right {
	left:600px;
}
/*ボタン領域内のボタン文字（＜、＞）の設定*/
.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: 260px;
}
.cover_left span {
	left: 20px;
}
.cover_right span {
	left: 330px
}
/*ボタン領域hover時文字の設定*/
.cover_right:hover > span, .cover_left:hover > span {
	opacity:1;
	color:#EEE;
}
/*サムネイル、送りボタンチェックで#frameを表示*/
#r1:checked ~ #frame, #r2:checked ~ #frame, #r3:checked ~ #frame, #r4:checked ~ #frame, #r5:checked ~ #frame, #n1:checked ~ #frame, #n2:checked ~ #frame, #n3:checked ~ #frame, #n4:checked ~ #frame, #b2:checked ~ #frame, #b3:checked ~ #frame, #b4:checked ~ #frame, #b5:checked ~ #frame {
 z-index:95;
 opacity:1;
}
/* サムネイル、送りボタンチェックで#stageを表示 */
#r1:checked ~ #stage,#r2:checked ~ #stage,#r3:checked ~ #stage,#r4:checked ~ #stage,#r5:checked ~ #stage, #n1:checked ~ #stage, #n2:checked ~ #stage, #n3:checked ~ #stage, #n4:checked ~ #stage, #b2:checked ~ #stage, #b3:checked ~ #stage, #b4:checked ~ #stage, #b5:checked ~ #stage {
	z-index:100;
	opacity:1;
}
/* サムネイル、送りボタンチェックで#photosを表示 */
#r1:checked ~ #stage #photos,#r2:checked ~ #stage #photos,#r3:checked ~ #stage #photos,#r4:checked ~ #stage #photos,#r5:checked ~ #stage #photos, #n1:checked ~ #stage #photos, #n2:checked ~ #stage #photos, #n3:checked ~ #stage #photos, #n4:checked ~ #stage #photos, #b2:checked ~ #stage #photos, #b3:checked ~ #stage #photos, #b4:checked ~ #stage #photos, #b5:checked ~ #stage #photos {
	opacity:1;
}
/* サムネイル、送りボタンチェックで#darkscreenを表示 */
#r1:checked ~ label #darkscreen, #r2:checked ~ label #darkscreen, #r3:checked ~ label #darkscreen, #r4:checked ~ label #darkscreen, #r5:checked ~ label #darkscreen, #n1:checked ~ label #darkscreen, #n2:checked ~ label #darkscreen, #n3:checked ~ label #darkscreen, #n4:checked ~ label #darkscreen, #b2:checked ~ label #darkscreen, #b3:checked ~ label #darkscreen, #b4:checked ~ label #darkscreen, #b5:checked ~ label #darkscreen {
 opacity:0.6;
 z-index:90;
}
/* 各サムネイルがチェックされた時の#photos の位置 */
#r1:checked ~ #stage #photos {
	margin-left:2000px;
}
#r2:checked ~ #stage #photos {
	margin-left:1000px;	
}
#r3:checked ~ #stage #photos {
	margin-left:0px;	
}
#r4:checked ~ #stage #photos {
	margin-left:-1000px;	
}
#r5:checked ~ #stage #photos {
	margin-left:-2000px;	
}
/* 各送りボタンがクリックされた時のスライド送りのanimationの設定とanimationの定義 */
#n1:checked ~ #stage #photos {
	margin-left:2000px;
	-webkit-animation:passphotos2 1s ease;
	-moz-animation:passphotos2 1s ease;
	animation:passphotos2 1s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#n2:checked ~ #stage #photos {
	margin-left:1000px;
	-webkit-animation:passphotos3 1s ease;
	-moz-animation:passphotos3 1s ease;
	animation:passphotos3 1s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#n3:checked ~ #stage #photos {
	margin-left:0px;
	-webkit-animation:passphotos4 1s ease;
	-moz-animation:passphotos4 1s ease;
	animation:passphotos4 1s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#n4:checked ~ #stage #photos {
	margin-left:-1000px;
	-webkit-animation:passphotos5 1s ease;
	-moz-animation:passphotos5 1s ease;
	animation:passphotos5 1s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#b2:checked ~ #stage #photos {
	margin-left:1000px;
	-webkit-animation:passphotos1 1s ease;
	-moz-animation:passphotos1 1s ease;
	animation:passphotos1 1s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#b3:checked ~ #stage #photos {
	margin-left:0px;
	-webkit-animation:passphotos2 1s ease;
	-moz-animation:passphotos2 1s ease;
	animation:passphotos2 1s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#b4:checked ~ #stage #photos {
	margin-left:-1000px;
	-webkit-animation:passphotos3 1s ease;
	-moz-animation:passphotos3 1s ease;
	animation:passphotos3 1s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
#b5:checked ~ #stage #photos {
	margin-left:-2000px;
	-webkit-animation:passphotos4 1s ease;
	-moz-animation:passphotos4 1s ease;
	animation:passphotos4 1s ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes passphotos1 {
	100% { margin-left:2000px; }
}
@-moz-keyframes passphotos1 {
	100% { margin-left:2000px; }
}
@keyframes passphotos1 {
	100% { margin-left:2000px; }
}
@-webkit-keyframes passphotos2 {	
	100% { margin-left:1000px; }
}
@-moz-keyframes passphotos2 {	
	100% { margin-left:1000px; }
}
@keyframes passphotos2 {	
	100% { margin-left:1000px; }
}
@-webkit-keyframes passphotos3 {
	100% { margin-left:0px; }
}
@-moz-keyframes passphotos3 {
	100% { margin-left:0px; }
}
@keyframes passphotos3 {
	100% { margin-left:0px; }
}
@-webkit-keyframes passphotos4 {	
	100% { margin-left:-1000px; }
}
@-moz-keyframes passphotos4 {	
	100% { margin-left:-1000px; }
}
@keyframes passphotos4 {	
	100% { margin-left:-1000px; }
}
@-webkit-keyframes passphotos5 {
	100% { margin-left:-2000px; }
}
@-moz-keyframes passphotos5 {
	100% { margin-left:-2000px; }
}
@keyframes passphotos5 {
	100% { margin-left:-2000px; }
}