@charset "UTF-8";

html{
	/*iPhone,iPadで横向き時20pxほどボディサイズが狂うバグ対策*/
	position:fixed;
	width: 100%;
    height: 100%;
	bottom: 0;
	overflow:hidden;
}

body{
	margin:0;
	padding:0;
	position:absolute;
	width:100%;
	height:100%;
	font-size:15px;
	
    
   /*height: 672px !important;*/

}

html *{
	
	/*-webkit-transform:translate3d(0,0,0);*/
}

section,canvas,article{
	margin:0;
	padding:0;
}

#wrapper{
/*-webkit-transform:translate3D(0,0,0);*/

}

#wrapper.sp{
	opacity:0.99;
}

#front_flame{
	border:solid #fff 5px;
	box-sizing:border-box;
	position:absolute;
	width:100%;
	height:100%;
	-webkit-transition:border-color 0.3s ease-out;
	transition:border-color 0.3s ease-out;
}

#front_flame.dark{
	border:solid #4c4c4c 5px;
}

#content *{
	/*-webkit-transform:translate3D(0,0,0);*/
}

#wrapper,#content{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
	/*box-sizing:content-box;
	box-sizing:border-box;*/
}



#clock{
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.01);
	/*-webtki-backface-visibility:hidden;
	width:97.81%;
	max-width:626px;
	-webkit-transform:translate3D(0,0,0);*/
}	

#canvas_area{
	//background-image:url(main_back-1.jpg)/*tpa=http://www.funnyfunny.jp/img/index/main_back.jpg*/;
	background-size:cover;
	background-position:center;
	//position:absolute;
	width:100%;
	height:100%;
	
	z-index:0;
	
	/*z-index:1;	*/
	/*opacity:0.99;*/
}

#clock.front{
	z-index:1;	
}

#content .box{
	/*max-width:740px;
	max-height:830px;*/
	width:100%;
	height:100%;
	/*border:solid #f00 1px;
	background-color:rgba(255,255,0,0.2);*/
	position:absolute;
	text-align:center;
	
}





h1.logo{
	width:29.86%;
	display:inline-block;	
	margin-top:45%;
	margin-bottom:1.6%;
	position:relative;
	opacity:0;
	-webkit-transition:opacity 0.5s ease-out;
	transition:opacity 0.5s ease-out;
}

h1.logo.show{
	opacity:1;
}

#degital>div{
	width:5.11%;
	width:12%;
	/*float:left;*/
	display:inline-block;
	position:relative;
	margin-right:-0.8%;
	/*background-color:rgba(0,255,0,0.5);*/
}

#degital>div img{
	display:inline-block;	
}
#degital .dot{
	margin-left:-2%;
	margin-right:-2%;
}
#degital .s_2{
	margin-right:0%;
}
#degital .m_1{

}
#degital{
	width:37%;
	height:7.3%;
	display:block;
	position:relative;
	/*background-color:rgba(255,0,0,0.5);*/
	margin-left:auto;
	margin-right:auto;
	visibility:hidden;
	opacity:0;
	-webkit-transition:opacity 0.5s ease-out;
	transition:opacity 0.5s ease-out;
	/*border:solid red 1px;*/
}

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

#content .btns{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	visibility:hidden;
}

#content.show .btns{
	visibility:visible;
	z-index: -1;
}
#content .btns img{
	position:absolute;
	opacity:0;
	
	cursor:pointer;	
	z-index:1;
	-webkit-transition:-webkit-transform 0.3s ease-out;
	transition:transform 0.3s ease-out;
}

#content .btns img.zoom{
	-webkit-transform:scale(2.5);
	transform:scale(2.5);
}

#content .btns .btn1{
	left:45.5%;
	top:20%
}
#content .btns .btn2{
	left:auto;
	right:17.9%;
	top:38%;
}
#content .btns .btn3{
	left:62.7%;
	top:auto;
	bottom:25.1%;
}
#content .btns .btn4{
	left:28.4%;
	top:auto;
	bottom:25.1%;
}
#content .btns .btn5{
	left:17.9%;
	top:38%;
}



/*

********************************************/

#pages_box{
	position:absolute;
	width:100%;
	height:100%;
	/*background-color:rgba(255,0,0,0.1);*/
	z-index:1;
	
	visibility:hidden;
	
}

#pages_box.on{
	cursor:pointer;
}

#pages_box.tb{
	-webkit-transform:translate3D(0,0,0);
}

#pages_box.show{
	visibility:visible;
}

#pages_box.hide{
	visibility:visible;
	opacity:0;
}
#pages_box .main_images{
	border-top: 1px solid transparent;
}
#pages_box .main_img{
	width:75.4%;
	margin:6% auto auto;
	position:relative;
	opacity:0.0;
}

#pages_box .main_img .img{
	position:absolute;
	top:0;
	left:0;
}

#play{
	position:relative;
}

#learn,#celebrate{
	position:absolute;
	top:0;
	width:100%;
}

#pages_box .main_images .text{
	position:absolute;
	/*top:11%;*/
	top: 7.31%;
	min-width:50%;
	max-width:63%;
	/*height:19.87%;*/
	height: 29.2%;
	left:50%;
	text-align:right;
	z-index:1;
	opacity:0;
	-webkit-transform:translateX(100px);
	-webkit-transition:opacity 0.3s ease-out,-webkit-transform 0.5s ease-out;
	transform:translateX(100px);
	transition:opacity 0.3s ease-out,transform 0.5s ease-out;
	
	/*-webkit-transform:translate3D(0,0,0);*/
}

#pages_box .main_images #learn .text,
#pages_box .main_images #celebrate .text{
	top: 15.5%;
}


#pages_box .main_images .text.show{
	opacity:1;
	-webkit-transform:translateX(0px);
	transform:translateX(0px);
	cursor:pointer;	
}

#pages_box .main_images .text.hideleft{
	opacity:0;
	-webkit-transform:translateX(-100px);
	transform:translateX(-100px);
}

#pages_box .main_images .text.hideright{
	opacity:0;
	-webkit-transform:translateX(100px);
	transform:translateX(100px);	
}

#pages_box .main_images .text img{
	display:block;
	position:absolute;
	height:100%;
	right:6%;
}

#pages_box .link_btn{
	max-width:38px;
	/*min-width:22px;*/
	width:5.14%;
	right:14.3%;
	bottom:-7.6%;
	position:absolute;
	cursor:pointer;
}

#pages_box .link_btn.disactive{
	cursor:default;
}

#page_pointers{
	width:33.5%;
	margin:5% auto 0;
	position: relative;
	max-width:248px;
}

#page_pointers>div{
	position:absolute;
	width:10%;
	max-width:20px;
	min-width:10px;
}

#page_pointers>div img{
	display:block;
	cursor:pointer;
	user-select:none;
}

#page_pointers>div img.front{
	position:absolute;
	top:0;left:0;
	opacity:0;
	-webkit-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
}

#page_pointers>div:hover img{
	-webkit-animation:pagepointers_hover 0.6s ease-in-out;
	animation:pagepointers_hover 0.6s ease-in-out;
	opacity:1;
}

#page_pointers>div:hover img.front{
	
	
}

body.mob #page_pointers>div:hover img{
	-webkit-animation:none;
}
body.mob #page_pointers>div:hover img.front{
	opacity:0;	
}

#page_pointers>div.active img{
	opacity:1 !important;	
}

@-webkit-keyframes pagepointers_hover{
	0%{-webkit-transform:scale(1);}
	50%{-webkit-transform:scale(1.2);}
	100%{-webkit-transform:scale(1);}
}
@keyframes pagepointers_hover{
	0%{transform:scale(1);}
	50%{transform:scale(1.2);}
	100%{transform:scale(1);}
}



#page_pointers .pointer1{
	left:0;
}

#page_pointers .pointer2{
	left:50%;
}

#page_pointers .pointer2 img{
	margin-left:-50%;
}

#page_pointers .pointer3{
	right:0;
}

#page_comment{
	-webkit-transform:translate3d(0,0,0);
	width:72.24%;
	position:relative;
	margin:12% auto 0;
	color:#fff;
	font-size:0.9em;
	letter-spacing:0.15em;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#page_comment p{
	line-height: 2em;
	position:absolute;
	top:0;left:0;
	-webkit-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
	opacity:0;
	/*visibility:hidden;*/
}

#page_comment p.show{
	opacity:1;	
	/*visibility:visible;*/
}


.copyright{
	position:absolute;
	left:50%;
	font-size:0.9333em;
	bottom:2%;
	visibility:hidden;
}

.copyright.show{
	visibility:visible;
}

small{
	position:relative;
	margin-left:-50%;
	display:block;
	/*margin-left:-4.5em;*/
	
	color:#fff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#modal_back{
	/*background-color: #8CD4B5;*/
	background-image:url(black70.png)/*tpa=http://www.funnyfunny.jp/img/index/black70.png*/;
	
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	visibility:hidden;
	opacity:0;
	-webkit-transition:opacity 1s ease-out;
	transition:opacity 1s ease-out;
	/*-webkit-transform:translate3D(0,0,0);
	z-index:1;*/
}

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

#modal_back.hide{
	visibility:visible;
	opacity:0;
}

#menu_btn_box{
	width:31px;
	height:31px;
	position:absolute;
	right:40px;
	top:35px;
	cursor:pointer;
	z-index:1;
	background-image:url(transparent.png)/*tpa=http://www.funnyfunny.jp/img/index/transparent.png*/;
}



#ie_btn{display: none;}
#menu_btn_box .lines>div{
	position:absolute;
	height:9.6%;
	background-color:#fff;
	width:100%;
	opacity: 1;
	-webkit-transition:opacity 0.2s ease-out,-webkit-transform 0.2s ease-out;
	transition:opacity 0.2s ease-out,transform 0.2s ease-out;
}
#menu_btn_box .lines .line1{
	top:13.1%;
}
#menu_btn_box .lines .line2,
#menu_btn_box .lines .line3{
	top:45.2%;
	width: 100%;
}
#menu_btn_box .lines .line2{
	-webkit-transform-origin: center;
	transform-origin:center;
}
#menu_btn_box .lines .line3{
	right:0;
	-webkit-transform-origin: center;
	transform-origin: center;
}

#menu_btn_box .lines .line4{
	top:77.3%;
}

#menu_btn_box.on .lines .line1,
#menu_btn_box.on .lines .line4{
	opacity:0;
}

#menu_btn_box.on .lines .line2{
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg) ;
}

#menu_btn_box.on .lines .line3{
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);

}

#menu_btn_box.on .lines .line2,
#menu_btn_box.on .lines .line3{
	opacity:1;

}

#index_page{
	position:absolute;
	width:100%;height:100%;
	background-color:transparent;
	background-image: url(menu_back.jpg)/*tpa=http://www.funnyfunny.jp/img/index/menu/menu_back.jpg*/;
	background-size:cover; 
	visibility:hidden;
	/*display:none;*/
	-webkit-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
	opacity:0;
}

#index_page.show{
	visibility:visible;
	display:block;
	opacity:1;
}

#index_page.hide{
	visibility:visible;
	opacity:0;
}

#index_page .dummy_squar{
	position:absolute;
	width:50%;height:30%;
	border:solid red 1px;
	left:50%;
	margin-left:-25%;
	top:35%;
	
}

.clear_fix{
	zoom:1;
}

.clear_fix:after{
	content:"";
	display:block;
	clear:both;
	font-size:0;
	line-height:0;
	visibility:hidden;
}