@charset "UTF-8";

/*
下層ページ共通
***************************/
header{
	z-index:3!important;
	-webkit-transition:none !important;
	-ms-transition:none !important;
	transition:none !important;
	-webkit-transform: translateY(0px) !important;
	-ms-transform: translateY(0px) !important;
	transform: translateY(0px) !important;
}

#wrapper{
	min-height:inherit;background-image:url(../img/common/bg_cont3.jpg);
	background-size: inherit;
	background-position: center -5px;
	background-repeat: no-repeat;
}

#main_image{
	width:100%;
	height: 1180px;
	padding-top: 904px;
	background-image:url(../img/common/main_bg2.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 91px;
	line-height: 0;
	position:absolute;
	overflow: hidden;
	box-sizing:border-box;
}

#main_image .center{
	position:absolute;
	left:50%;top:50%;
	
}

#main_image .center img{
	margin-left:-50%;
	/*margin-top:-50%;*/
}

#bread{
	height: 50px;
	background-image:url(../img/common/bread_back.png);
	font-size:12px;
	color:#fff;
	position: absolute;
	width: 100%;
	top: -86px;
	z-index: 3;
}

#information{
	min-height:inherit;
	margin-top: 296px;
	position:relative;
}

#information .content_wrap{
	/*position: relative;
	top: 555px;*/
}

#bread .content_wrap{
	line-height: 4.2;
	height: 100%;
	position: relative;
	top:0px;
}

#bread .content_wrap a{
	text-decoration:underline;
	color:#fff;
}
#bread .content_wrap a:link,
#bread .content_wrap a:hover,
#bread .content_wrap a:visit,
#bread .content_wrap a:active{
	text-decoration:underline;
	color:#3C3846;
}
#bread .content_wrap a:hover{
	-webkit-animation:blink 1s ease-out;
	animation:blink 1s ease-out;
}

#information{
	/*padding-top:29px;
	background-color:#000;*/
	margin-bottom:-20px;
}

#information .content_wrap #block1{
	background-image:url(../img/gallery/bg_cont.png);
	padding-top: 40px;
}

body{
	/*background-color:#000;	*/
	background-image:none;
}

h1{
	margin-bottom: 177px;
}

h1 img{
	margin-top: 32px;
}

h2{
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size:24px;
	color:#e0d093;
}


/*
pic_box
*****************************/
	
	
#pic_box_block{
	width: 978px;
	margin: 0 auto 40px;
	position:relative;
	z-index:2;
}

.picbox{
	width:297px;
	height:297px;
	border:solid #b966ff 2px;
	position:relative;
	float:left;
	margin-right: 37px;
	margin-bottom: 40px;
	cursor:pointer;
	/*z-index:1;*/
}

.picbox:nth-child(3n){
	margin-right:0;
}

.picbox .thumbnail img{
	display:block;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	visibility:hidden;
	/*-webkit-transition:-webkit-transform 0.3s ease-out,opacity 0.3s ease-out;
	transition:transform 0.3s ease-out,opacity 0.3s ease-out;*/
	-webkit-transform:scale(0.7);
	transform:scale(0.7);
	box-shadow:	0 0 10px rgba(0,0,0,1);
	-webkit-box-shadow:	0 0 10px rgba(0,0,0,1);
	-ms-box-shadow:	0 0 10px rgba(0,0,0,1);
	z-index:2;
}
.picbox:hover .thumbnail img{
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1);
	visibility:visible;border:solid #b966ff 1px;
	-webkit-animation:picboxUp 0.5s ease-in-out;
	animation:picboxUp 0.5s ease-in-out;
}

.picbox.popup .thumbnail img{
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1);
	visibility:visible;
	
	-webkit-animation:picboxUp 0.5s ease-in-out;
	animation:picboxUp 0.5s ease-in-out;
}

.noscroll2 .picbox:hover .thumbnail img{
	visibility:hidden;
}


.picbox .thumbnail{
	background-size:cover;
	width:297px;
	height:297px;
}

@-webkit-keyframes picboxUp{
	0%{-webkit-transform:scale(0.7);opacity:0}
	1%{-webkit-transform:scale(0.7);opacity:0}
	25%{-webkit-transform:scale(1.05);opacity:1}
	50%{-webkit-transform:scale(0.975);opacity:1}
	100%{-webkit-transform:scale(1);opacity:1}
}

@keyframes picboxUp{
	0%{transform:scale(0.7);opacity:0}
	25%{transform:scale(1.05);opacity:1}
	50%{transform:scale(0.975);opacity:1}
	100%{transform:scale(1);opacity:1}
}

#pic_box_modal{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:fixed;	
	z-index:1;
	visibility:hidden;
	-webkit-transition:opacity 1s ease-out;
	transition:opacity 1s ease-out;
	opacity:0;
}

.noscroll #pic_box_modal{
	visibility:visible;
	opacity:1;
}

/*#front_area {-webkit-transform:none;}
#front_area .front_back{
	background-color:#000;	
}
#front_area h2,
#front_area .front_back img{
	-webkit-transition:opacity 1s ease-out;
	transition:opacity 1s ease-out;
}*/

.noscroll #front_area h2,
.noscroll #front_area .front_back img{
	opacity:0.6;
}



/*
modal_window
*************************/

body.noscroll2{
	overflow:hidden;
	height:100%;
}

#modal_window{
	width:100%;height:100%;
	position:fixed;top:0;left:0;
	
	z-index: 3;
	visibility:hidden;
	-webkit-transition:opacity 0.5s ease-out;
	transition:opacity 0.5s ease-out;
	opacity:0;
}

#modal_back{
	width:100%;height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.85);
}

#modal_window.show{
	visibility:visible;
	opacity:1;
}

#modal_window.hide{
	-webkit-transition:opacity 0.5s ease-out;
	transition:opacity 0.5s ease-out;
	opacity:0;
}

#modal_window .close{
	position:absolute;
	right:-61px;
	top:0px;
	cursor:pointer;
}

#light_box{
	width:900px;height:600px;
	position:absolute;
	top:50%;left:50%;
	margin-left:-450px;
	margin-top:-300px;
	/*border:solid green 1px;*/
}

#light_box_back{
	width:900px;height:600px;
	position:absolute;
	top:0;left:0;
}

#light_box.mintop{
	top:30px;
	margin-top:0px;
}

#light_box .hitarea{
	position:absolute;
	max-width:100%;
	max-height:100%;
}

#light_box .now_img{
	position:absolute;
	opacity:0;
}
#light_box .next_img{
	position:absolute;	
	-webkit-transition:opacity 0.5s ease-out;
	transition:opacity 0.5s ease-out;
	opacity:0;
}

#light_box .now_img.show,
#light_box .next_img.show{
	opacity:1;
}

#light_box .next_img.hide{
	-webkit-transition:none;
	opacity:0;
}

#light_box .left_hitarea,
#light_box .right_hitarea{
	top:0;
	position:absolute;
	width:50%;
	height:100%;
	background-color:rgba(255,255,0,0);
	cursor:pointer;
}

#light_box .right_hitarea{
	right:0;
	background-color:rgba(0,255,0,0);
}

#light_box .left_hitarea img,
#light_box .right_hitarea img{
	position:absolute;
	top:50%;margin-top:-20px;
	visibility:hidden;
}

#light_box .right_hitarea img{
	right:0;	
}

#light_box .left_hitarea img.show,
#light_box .right_hitarea img.show{
	visibility:visible;
}


/*
タブレット対応
****************************/



.tab #light_box{
	width:900px;height:600px;
	max-width:85%;
	top:50%;
	left:50%;
	margin-left:0;
	margin-top:0;
	-webkit-transform:translate(-50%,-50%);
}

.tab #light_box.mintop{
	top:30px;
	margin-top:0px;
	-webkit-transform:translate(-50%,0%);
}

.tab #modal_window .close{
	position:absolute;
	width:40px;
	right:-55px;
	
}

.tab #modal_window .close img{
	width:100%;
	height:auto;
}

.tab body.noscroll2{
	/*overflow:visible;
	height:100%;*/
}

.tab .now_img>img,
.tab .next_img>img{
	-webkit-transition:-webkit-transform 0.3s ease-out;
}

.tab .now_img>img.notransition,
.tab .next_img>img.notransition{
	-webkit-transition:none !important;
}


/*.tb #light_box_back{
	max-width:100%;
}


.tb #light_box .hitarea{
	max-width:100%;
}*/
.tab #light_box .now_img{
	max-width:100%;
}
.tab #light_box .next_img{
	max-width:100%;
}