@charset "UTF-8";






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Layout_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
html,body{
	width:100%;
	height:100%;
	background:#FFF;}

.contentswrapper{
	/*width:940px;*/
	margin:0 auto;}
	
p{
	color: #222;
    font-weight: bold;
    line-height: 2;}

a{color:#b10f18;}
	
	

/*----vis----*/
.vis{
	background: #82dbec url(../../gudetama2016/images/main_vis_bg.png) repeat-x;
    background-position: center 420px;
    position: relative;
    text-align: center;
    width: 100%;
    height: 740px;
    margin: 0;}
	
.vis h1{
    display: block;
    background: url(../../gudetama2016/images/gudetama_main_vis.png) top center no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    margin: 0 auto;}
	
.vis p{
    background: #FFF url(../../gudetama2016/images/gudetama_day.jpg) no-repeat;
    background-position: center 0px;
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    border-top: 3px solid #a47014;
    border-bottom: 3px solid #a47014;
    text-indent: -9999px;}



/*----download----*/
.download{
    position: relative;
    background: #FFF url(../../gudetama2016/images/gudetama_download.jpg) top center no-repeat;
    width: 100%;
    height: 240px;
    margin: 0 auto;
    padding: 0;}
.download a{
	position:absolute;
	top: 22px;
	display:block;
	height:66px;
	text-indent:-9999px;
	outline:none;}
/*AppStore*/
.download .appstore a{
    left: 393px;
    top: 100px;
    width: 221px;}
/*GooglePlay*/
.download .googleplay a{
    left: 627px;
    top: 100px;
    width: 222px;}
/*Android APK*/
.download .androidapk a{
    left: 862px;
    top: 100px;
    width: 176px;}
	
.download .spec{
    font-size: 10px;
    width: 880px;
    margin: 4px auto 0;
	text-indent:-9999px;}
	
	
	
/*----collaboration----*/
.collaboration{
	width:100%;
	margin:5px auto 0;
	padding:50px 0;
	background:#FFF37C url(../../gudetama2016/images/collaboration_bg.gif);}
.collaboration .about{
	width:1000px;
	height:626px;
	margin:0 auto;
	background:url(../../gudetama2016/images/gudetama_collaboration.png) no-repeat top center;
	background-size:1000px 626px;
	text-indent:-9999px;}
	
	
	
/*----movie----*/
.movie{
	width:100%;
	margin:5px auto 0;
	padding:25px 0;
	background:#FFF37C url(../../gudetama2016/images/movie_bg.gif);}
.movie h2{
	text-indent:-9999px;}
.movie .about{
	position:relative;
	width:1000px;
	height:708px;
	margin:0 auto;
	background:url(../../gudetama2016/images/gudetama_movie.png) no-repeat top center;
	background-size:1000px 708px;
	text-indent:-9999px;}
.movie .about .fancybox_movie a{
	position: absolute;
    display: block;
    width: 800px;
    height: 450px;
    top: 136px;
    left: 96px;}	

	
	
	
/*----quest_1----*/
.quest_1{
	width:100%;
	margin:5px auto 0;
	background:url(../../gudetama2016/images/gudetama_quest_bg_bottom.jpg) repeat-x bottom left;}
.quest_1 h2{
	display:block;
	height:346px;
	background:url(../../gudetama2016/images/gudetama_quest_1_bg.jpg) repeat-x top left;
	text-indent:-9999px;}
.quest_1 h2 span{
	display:block;
	height:346px;
	background:url(../../gudetama2016/images/gudetama_quest_1_title.png) no-repeat top center;
	background-size:1660px 346px;
	text-indent:-9999px;}
.quest_1 .about{
	width:1000px;
	background:url(../../gudetama2016/images/gudetama_quest_foot.png) no-repeat bottom center;
	margin:0 auto;
	padding:0 0 209px 0;}
.quest_1 .about p, .quest_1 .about ul{
	width:1000px;
	margin:15px auto 0;
	text-indent:-9999px;}
.quest_1 .about p.detail_1{
	background:url(../../gudetama2016/images/gudetama_quest_write_1.jpg) no-repeat top center;
	height:176px;}
.quest_1 .about p.detail_2{
	background:url(../../gudetama2016/images/gudetama_quest_write_2.jpg) no-repeat top center;
	height:77px;}
.quest_1 .about p.detail_3{
	background:url(../../gudetama2016/images/gudetama_evolution.jpg) no-repeat top center;
	height:400px;}
.quest_1 .about p.banner{
	background:url(../../gudetama2016/images/quest_1.png) no-repeat top center;
	height:170px;}
.quest_1 .about ul.btn_list{
	position:relative;
	display:block;
	height:460px;
	background:url(../../gudetama2016/images/gudetama_detail_btn_1.jpg) no-repeat top center;}
.quest_1 .about ul.btn_list li{
	position:absolute;
	width:520px;
	height:124px;}
.quest_1 .about ul.btn_list li.btn_1{
	top: 24px;
    left: 242px;}
.quest_1 .about ul.btn_list li.btn_2{
	top: 169px;
    left: 242px;}
.quest_1 .about ul.btn_list li.btn_3{
	top: 312px;
    left: 242px;}
.quest_1 .about ul.btn_list li a{
	display:block;
	width:520px;
	height:124px;}
	
	
	
/*----quest_2----*/
.quest_2{
	width:100%;
	margin:5px auto 0;
	background:url(../../gudetama2016/images/gudetama_quest_bg_bottom.jpg) repeat-x bottom left;}
.quest_2 h2{
	display:block;
	height:346px;
	background:url(../../gudetama2016/images/gudetama_quest_2_bg.jpg) repeat-x top left;
	text-indent:-9999px;}
.quest_2 h2 span{
	display:block;
	height:346px;
	background:url(../../gudetama2016/images/gudetama_quest_2_title.png) no-repeat top center;
	background-size:1660px 346px;
	text-indent:-9999px;}
.quest_2 .about{
	width:1000px;
	background:url(../../gudetama2016/images/gudetama_quest_foot.png) no-repeat bottom center;
	margin:0 auto;
	padding:0 0 209px 0;}
.quest_2 .about p, .quest_2 .about ul{
	width:1000px;
	margin:15px auto 0;
	text-indent:-9999px;}
.quest_2 .about p.detail_1{
	background:url(../../gudetama2016/images/gudetama_quest_write_3.jpg) no-repeat top center;
	height:177px;}
.quest_2 .about p.banner{
	background:url(../../gudetama2016/images/quest_2.png) no-repeat top center;
	height:170px;}
.quest_2 .about ul.btn_list{
	position:relative;
	display:block;
	height:324px;
	background:url(../../gudetama2016/images/gudetama_detail_btn_2.jpg) no-repeat top center;}
.quest_2 .about ul.btn_list li{
	position:absolute;
	width:520px;
	height:124px;}
.quest_2 .about ul.btn_list li.btn_4{
	top: 24px;
    left: 242px;}
.quest_2 .about ul.btn_list li.btn_5{
	top: 169px;
    left: 242px;}
.quest_2 .about ul.btn_list li a{
	display:block;
	width:520px;
	height:124px;}
	
	
	
/*----box----*/
.box{
	width:100%;
	margin:5px auto 0;}
.box h2{
	display:block;
	text-indent:-9999px;}
.box .about{
	position:relative;
	width:1000px;
	margin:0 auto;
	padding:0 0 209px 0;}
.box .about p{
	position:absolute;
	width:1000px;
	margin:15px auto 0;
	text-indent:-9999px;}
/*----quest_3----*/	
.quest_3{
	width:100%;
	height:746px;
	margin:70px auto 0;
	background:url(../../gudetama2016/images/gudetama_quest_3.jpg) no-repeat;
	background-position:center top;}
.quest_3 p.btn_6 a{
	position:absolute;
	display:block;
	width:520px;
	height:124px;
	top: 513px;
    left: 229px;}
/*----quest_4----*/	
.quest_4{
	width:100%;
	height:689px;
	margin:20px auto 0;
	background:url(../../gudetama2016/images/gudetama_quest_4.jpg) no-repeat;
	background-position:center top;}
.quest_4 p.btn_7 a{
	position:absolute;
	display:block;
	width:520px;
	height:124px;
	top: 460px;
    left: 229px;}
/*----quest_5----*/	
.quest_5{
	width:100%;
	height:730px;
	margin:20px auto 0;
	background:url(../../gudetama2016/images/gudetama_quest_5.jpg) no-repeat;
	background-position:center top;}
.quest_5 p.btn_8 a{
	position:absolute;
	display:block;
	width:520px;
	height:124px;
	top: 501px;
    left: 242px;}
	
	
	
/*----link----*/		
.link{}
.link ul{
	position:relative;
	display:block;
	width:1200px;
	height:140px;
	margin:20px auto;
	background:url(../../gudetama2016/images/gudetama_link.png) no-repeat top center;}
.link ul li a{
	position:absolute;
	display:block;
	width:320px;
	height:100px;}
.link ul li.official a{
	top: 20px;
    left: 100px;}
.link ul li.youtube_link a{
	top:20px;
	left:440px;}
.link ul li.facebook a{
	top:20px;
	left:780px;}	
	

/*----footer----*/
.footer{
	background:#e9e9e9;
	color:#ffffff;
	width:100%;
	padding:0 0 50px 0;
	text-align:center;}
	
.footercontents{
	width:100%;
	margin:90px auto 0;}

/*links*/
.footercontents ul.links{
	background:#eee;
	width:100%;
	margin:0 auto 50px !important;
	padding:0;
	text-align:center;}
.footercontents ul.links li{
	display:inline-block;
	margin:2em 0.5em 2em 0.5em;
	padding-right:1em;
	border-right:1px #bbbbbb solid;}
.footercontents ul.links li:last-child{
	padding-right:0;
	border-right:none;}
.footercontents ul.links li a{
	color:#222;
	text-decoration:underline;}
	
/*xflag*/
.footercontents p a{
	display:block;
    background: url(//xflag.com/tw/common/images/promotion_logo_xflag.png) top center no-repeat;
    background-size: 100%;
    width: 100px;
    height: 115px;
    margin: 40px auto 30px auto;
    text-indent: -9999px;}

/*address*/
.footercontents address{
	color:#222;
	font-size:12px;
	line-height:1.8em;}
.footercontents address.sanrio{
	background:url(../../gudetama2016/images/gudetama_copy.png) top center no-repeat;
	width:1000px;
	height:20px;
	margin:0 auto;
	text-indent:-9999px;}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Layout_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PluginOverride_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*---Fancybox_start---*/
#fancybox-outer{
	background:#000000 !important;}
#fancybox-content{
	border-color:#000000 !important;}



/*----Bxslider_start----*/
.lodingbox_optimize{
	position:relative;
	overflow:hidden;}
.library_optimize .loadingcontents{
	position:absolute;}
.library_optimize .bx-wrapper .bx-viewport{
	background:none !important;
	border:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	box-shadow:none !important;
	margin:0 0 0 5px !important;}
.library_optimize .bx-wrapper .bx-pager.bx-default-pager a:hover,
.library_optimize .bx-wrapper .bx-pager.bx-default-pager a.active{}
.bx-controls-direction{}
.bx-controls-direction:hover{
	display:block;}



/*ss*/	
.quest .library .library_optimize{
	width:900px;
	margin:25px auto 0 auto !important;}
	
.quest .library .library_optimize .bx-wrapper{
	margin:0 !important;
	padding:0 !important;}
	
.quest .library .library_optimize li{
	width:260px;
	padding:0 10px 0 10px;}
	
.library span{
	display:block;
	border:none;}
.library li:first-child span{}
.library img{
	-ms-filter:"alpha( opacity=50 )";
	filter:alpha( opacity=50 );
	opacity:0.5;
	width:278px;
	border:1px solid #be1a21;}
.library img:hover{
	-ms-filter:"alpha( opacity=100 )";
	filter:alpha( opacity=100 );
	opacity:1;}
	
.library .bx-pager .bx-default-pager,
.library .bx-pager-item{
	display:none !important;}

.library .bx-wrapper .bx-viewport{
	background:transparent;
	border:none;
	box-shadow:none;}
	
.library .bx-wrapper .bx-prev,
.library .bx-wrapper .bx-next{
	display:none;}
.library .bx-wrapper .bx-viewport,{
	background:none !important;
	border:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	box-shadow:none !important;
	margin:0 0 0 5px !important;}
.library .bx-wrapper .bx-pager.bx-default-pager a:hover,
.library .bx-wrapper .bx-pager.bx-default-pager a.active{
	background:#86e817 !important;}
.bx-controls-direction{}
.bx-controls-direction:hover{
	display:block;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PluginOverride_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/