@charset "utf-8";

/**/
#Container {
	overflow:hidden;
}

#Intro {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:8000;
}
#Intro .inner {
	width:100%;
	background-color:rgba(0,0,0,0.78);
	position:relative;
	display:block;
}
#Intro .inner .wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	min-width:700px;
}
#Intro .inner .wrap .wrapInner {
	position:relative;
}
#Intro .inner .balloon {
	position:absolute;
	left:50%;
	top:-25px;
	margin-left:250px;
	opacity:1;
	transition: 0.6s;
}

#Intro p {
	text-align:center;
	color:#FFF;
	opacity:1;
	transition: 0.6s;
	margin-bottom:20px;
	font-weight:200;
	position:relative;
	top:-0
}
#Intro .default {
	opacity:0 !important;
	transition: 0.6s !important;
	top:-30px !important;
}
#Intro p.btn{
	margin-top:30px;
}

#Intro .main	{
	transition-delay:0s;
	margin-bottom:0;
}
#Intro .description	{
	transition-delay:0.3s;
}
#Intro .present	{
}
#Intro .btn	{
	transition-delay:0.9s;
}
#Intro .inner .balloon	{
	transition-delay:1.2s;
}

#Intro p.btn{
	margin-top:30px;
}
#Intro p.btn a {
	border:1px solid #CCC;
	line-height:1;
	padding:16px;
	font-size:120%;
	width:250px;
	display:inline-block;
	text-align:center;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	transition: 0.3s;
	background-color:#fff;
	color:#000;
}
#Intro p.btn a:hover {
	transition: 0.3s;
	background-color:#000;
	color:#FFF;
}
#Intro .present.default {
	opacity:0 !important;
	top:-30px !important;
}
#Intro .present {
	opacity:1;
	transition: 0.6s;
	transition-delay:0.6s;
	position:relative;
	top:-0;
	display:block;
}
#Intro .present p {
	text-align:center;
	margin-bottom:5px;
	line-height:1.4;
	color:#000;
	font-weight:300;
}
#Intro .present p.tx2 {
	font-size:112%;
	color:#F00;
	font-weight:400;
}

#PresentInfo {
	
}

#DraemItemWrap {
	overflow:hidden;
}
.itemWrap:after {	 content: ".";	display: block;	height: 0;	font-size:0;	 clear: both;	visibility:hidden;}
.itemWrap {	display: inline-block;} 
* html .itemWrap {	height: 1%;	}
.itemWrap {	display:block;	}

#DraemItem .itemWrap {
	margin:0 auto;
	background:url(../img/dream_logo_bg.jpg) center 100px no-repeat;
	background-attachment: fixed;
}
#DraemItem .item {
	float:left;
	display:block;
	vertical-align:top;
	line-height:1;
	position:relative;
}
#DraemItem .item .inner {
	display:block;
	overflow:hidden;
}
#DraemItem .item .frame {
	display:block;
	overflow:hidden;
}
#DraemItem .item .ph {
	display:block;
	overflow:hidden;
	width:100%;
}
#DraemItem .item.flR {
	float:right;
}

#DraemItem .item .ph {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
#DraemItem .item:hover .ph {
	-webkit-transition: all .3s ease-in-out !important;
	transition: all .3s ease-in-out !important;
}

#DraemItem .item img.main {
	width:100%;
	vertical-align:top;
	border:0px solid #FFF;
	opacity:0;
	position:relative;
}

#DraemItem .item.start img.main {
	transition: 1.0s;
	opacity:1;
}

#DraemItem .item .spBtn {
	opacity:0;
}

#DraemItem .item.start .spBtn {
	transition: 1.0s;
	opacity:1;
}

@media screen and (min-width: 561px)  {
	
	#DraemItem .item.start:nth-child(9n+1) img.main {	 transition-delay:0.3s;	}
	#DraemItem .item.start:nth-child(9n+2) img.main {	 transition-delay:0.4s;	}
	#DraemItem .item.start:nth-child(9n+3) img.main {	 transition-delay:0.5s;	}
	#DraemItem .item.start:nth-child(9n+4) img.main {	 transition-delay:0.6s;	}
	#DraemItem .item.start:nth-child(9n+5) img.main {	 transition-delay:0.7s;	}
	#DraemItem .item.start:nth-child(9n+6) img.main {	 transition-delay:0.8s;	}
	#DraemItem .item.start:nth-child(9n+7) img.main {	 transition-delay:0.9s;	}
	#DraemItem .item.start:nth-child(9n+8) img.main {	 transition-delay:1.0s;	}
	#DraemItem .item.start:nth-child(9n+9) img.main {	 transition-delay:1.1s;	}
	
	#DraemItem .item.start:nth-child(10) img.main {	 transition-delay:1.2s;	}
	#DraemItem .item.start:nth-child(11) img.main {	 transition-delay:1.3s;	}
	#DraemItem .item.start:nth-child(12) img.main {	 transition-delay:1.4s;	}
	#DraemItem .item.start:nth-child(13) img.main {	 transition-delay:1.5s;	}
	#DraemItem .item.start:nth-child(14) img.main {	 transition-delay:1.6s;	}
	#DraemItem .item.start:nth-child(15) img.main {	 transition-delay:1.7s;	}
	#DraemItem .item.start:nth-child(16) img.main {	 transition-delay:1.8s;	}
	#DraemItem .item.start:nth-child(17) img.main {	 transition-delay:1.9s;	}
	#DraemItem .item.start:nth-child(18) img.main {	 transition-delay:2.0s;	}
}

/* 
#DraemItem .item.start:nth-child(9n+1) img.main {	 transition-delay:0.縺ゅ≠s;	}
#DraemItem .item.start:nth-child(9n+2) img.main {	 transition-delay:0.縺ゅ≠s;	}
#DraemItem .item.start:nth-child(9n+3) img.main {	 transition-delay:0.縺ゅ≠s;	}
#DraemItem .item.start:nth-child(9n+4) img.main {	 transition-delay:0.縺ゅ≠s;	}
#DraemItem .item.start:nth-child(9n+5) img.main {	 transition-delay:0.縺ゅ≠s;	}
#DraemItem .item.start:nth-child(9n+6) img.main {	 transition-delay:0.縺ゅ≠s;	}
#DraemItem .item.start:nth-child(9n+7) img.main {	 transition-delay:0.縺ゅ≠s;	}
#DraemItem .item.start:nth-child(9n+8) img.main {	 transition-delay:0.縺ゅ≠s;	}
#DraemItem .item.start:nth-child(9n+9) img.main {	 transition-delay:0.縺ゅ≠s;	}
 */
#DraemItem .item img.main.top {	top:250px;}
#DraemItem .item img.main.left {	left:80%;}
#DraemItem .item img.main.bottom {	bottom:250px;}
#DraemItem .item img.main.right {	right:80%;}

#DraemItem .item.start img.main.top {	top:0;}
#DraemItem .item.start img.main.left {	left:0;}
#DraemItem .item.start img.main.bottom {	bottom:0;}
#DraemItem .item.start img.main.right {	right:0;}



/* */

#DraemItem .item {
	position: relative;
	-webkit-perspective: 1500px;
	perspective: 1500px;
	-webkit-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	z-index:99;
}
#DraemItem .item:hover .ph {
	-webkit-transform: rotate(5deg) scale(1.2);
	transform: rotate(5deg) scale(1.2);
}
#DraemItem .item .innerText {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0;
	transform-origin: 0;
	-webkit-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
	opacity: 0;
}
#DraemItem .item.start:hover .innerText.open {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	-webkit-transition: -webkit-transform .5s, opacity .1s;
	transition: transform .5s, opacity .1s;
	opacity: 1;
	color:#FFF;
}
#DraemItem .item.start:hover .innerText.open .inner {
	position:relative;
	height:100%;
	width:100%;
	display:block;
	box-sizing:border-box;
}
#DraemItem .item.start:hover .innerText.open .wrap {
	width:100%;
	padding:20px 5px;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
}
#DraemItem .item.start:hover .innerText.open .wrap p {
	text-align:center;
	line-height:1.3;
}
#DraemItem .item.start:hover .innerText.open .wrap p.name {
	font-weight:700;
	font-size:18px;
	margin-bottom:5px;
	color:#CCC;
	opacity:0.78;
}
#DraemItem .item.start:hover .innerText.open .wrap p.dream {
	opacity:0.95;
	font-size:12px;
	margin-bottom:9px;
}
#DraemItem .item.start:hover .innerText.open .wrap p.btn {
	text-align:center;
}
#DraemItem .item.start:hover .innerText.open .wrap p.btn em {
	width:70%;
	display:inline-block;
	line-height:1;
	text-align:center;
	background-color:rgba(200,200,200,0.75);
	padding:10px 5px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	color:#000;
	position:relative;
}
#DraemItem .item.start:hover .innerText.open .wrap p.btn em:after{
	position: absolute;
	right:7px;
	top: 50%;
	font-size:110%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	content:'\f101';
	font-family: FontAwesome;
	color:#444;
}
#DraemItem .item.start:hover .innerText.open .wrap p.btn em:hover {
	background-color:rgba(255,255,255,0.85);
	transition: 0.3s;
}
#DraemItem .item.start:hover .innerText.open .wrap p.btn em:hover:after {
	right:4px;
	transition: 0.3s;
}
#DraemItem .item .innerText .wrap .content p {
	text-align:center;
	font-size:13px;
	font-weight:400;
	margin-bottom:10px;
}
#DraemItem .item.large .innerText .wrap .content p {
	font-size:17px;
}

.fancybox-close {
	background-size:cover;
	position: absolute;
	top: 50px;
	right: 50px;
	width: 70px;
	height: 70px;
	cursor: pointer;
	z-index: 999994;
	transition: 0.3s;
	opacity:0.8;
	display:block;
}
.fancybox-close:hover {
	transition: 0.3s;
	opacity:1;
	display:block;
}
.fancybox-close {
	transition: 0.3s;
	opacity:1;
	display:block;
}