@charset "UTF-8";/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
html{}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;}

table{
	border-collapse:collapse;
	border-spacing:0;}

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:normal;}

li{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;}

q:before,q:after{content:"";}

abbr,acronym{
	border:0;
	font-variant:normal;}

sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}

input,textarea,select{
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;}

input,textarea,select{
	*font-size:100%;}

legend{color:#000000;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　RESET_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMONlayout_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*----basicsetting_start----*/
html{
    font-size:62.5%;}
body{
	background:#fff;
	color:#333;
    font-size:1.4rem; /*default14px*/
	line-height:2.3rem;
	font-family:Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif; /*ゴシックセット*/
	/*font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;*/ /*明朝セット*/
	text-align:left;
	-webkit-text-size-adjust:100%; /*viewport*/}
body{
	font-size:1.2rem; /*defaultOverRide*/
	line-height:1.8rem;
	word-wrap:break-word;
	word-break:break-all;}
/*----basicsetting_end----*/



/*----clear_start----*/
/*--clearfix--*/
.clearfix:after {
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;}
.clearfix {
	min-height:1px;}
* html .clearfix {
	height:1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/}
/*--clear--*/
.cf{
	clear:both;
	height:0;}
/*----clear_end----*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　COMMONlayout_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






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



.contentswrapper{
	/*width:320px;*/
	margin:0 auto;
	overflow:hidden;}
	


/*----vis----*/
.vis{
	position:relative;
	text-align:center;
	width:100%;
	height:295px;
	margin:0;}
.vis h1{
	background:url(../../gudetama2016/images/sp_gudetama_main_vis.jpg) top center no-repeat;
	background-size:500px 267.5px;
	height:267px;
	text-indent:-9999px;}
.vis p{
    background: #FFF url(../../gudetama2016/images/gudetama_day.jpg) no-repeat;
	background-size:300px 18px;
    background-position: center;
    width: 100%;
    height: 24px;
    position: absolute;
    bottom: 0;
    border-top: 2px solid #a47014;
    border-bottom: 2px solid #a47014;
    text-indent: -9999px;}



/*----download----*/
.download{
	position: relative;
    background: #FFF url(../../gudetama2016/images/sp_gudetama_download.jpg) center top no-repeat;
    background-size: 500px 108px;
    width: 100%;
    height: 108px;
    margin: 0 auto;}
.download a{
	position:absolute;
	top:48px;
	display:block;
	height:27px;
	text-indent:-9999px;
	outline:none;}
/*AppStore*/
.download .appstore a{
	left:10px;
	width:90px;}
/*GooglePlay*/
.download .googleplay a{
	left:102px;
	width:93px;}
/*Android APK*/
.download .androidapk a{
	left:198px;
	width:62px;}
	
.download .spec{
	color:#c5151e;
	font-size:0.8rem;
	width:250px;
	margin:0 auto;
	text-indent:-9999px;}
	
	
	
/*----collaboration----*/
.collaboration{
	background:#FFF url(../../gudetama2016/images/sp_gudetama_collaboration.jpg) center top no-repeat;
	background-size:500px 280px;
	width:100%;
	height:280px;
	margin:0 auto 3px;
	text-indent:-9999px;}
	
	
	
/*----movie----*/
.movie{
	background:#FFF url(../../gudetama2016/images/sp_gudetama_movie.jpg) center top no-repeat;
	background-size:500px 272px;
	width:100%;
	height:272px;
	margin:0 auto 3px;
	text-indent:-9999px;}
.movie .about{
	position:relative;
	width:300px;
	height:272px;
	margin:0 auto;}
.movie .about .fancybox_movie a{
	position: absolute;
    display: block;
    width: 260px;
    height: 155px;
    top: 54px;
    left: 19px;}	
	
	
	
/*----quest_1----*/
.quest_1{
	width:100%;
	margin:0 auto 3px;
	background:url(../../gudetama2016/images/gudetama_quest_bg_bottom.jpg) repeat-x bottom left;
	background-size:17px 80px;}
.quest_1 h2{
	display:block;
	height:100px;
	background:url(../../gudetama2016/images/gudetama_quest_1_bg.jpg) repeat-x top left;
	background-size:28px 100px;
	text-indent:-9999px;}
.quest_1 h2 span{
	display:block;
	height:100px;
	background:url(../../gudetama2016/images/gudetama_quest_1_title.png) no-repeat top center;
	background-size:480px 100px;
	text-indent:-9999px;}
.quest_1 .about{
	width:100%;
	background:url(../../gudetama2016/images/gudetama_quest_foot.png) no-repeat bottom center;
	background-size:320px 58px;
	margin:0 auto;
	padding:0 0 52px 0;}
.quest_1 .about p{
	width:275px;
	margin:10px auto 0;
	text-align:center;}
.quest_1 .about p.banner{
	background:url(../../gudetama2016/images/quest_1.png) no-repeat top center;
	background-size:300px 80px;
	width:300px;
	height:80px;
	text-indent:-9999px;}
.quest_1 .about p.detail_3{
	background:url(../../gudetama2016/images/sp_gudetama_evolution.jpg) no-repeat top center;
	background-size:500px 445px;
	width:100%;
	height:445px;
	text-indent:-9999px;}
.quest_1 .about ul.btn_list{
	position:relative;
	display:block;
	background:url(../../gudetama2016/images/gudetama_detail_btn_1.jpg) no-repeat top center;
	background-size:500px 230px;
	width:300px;
	height:230px;
	margin:0 auto;}
.quest_1 .about ul.btn_list li{
	position:absolute;
	width:250px;
	height:62px;}
.quest_1 .about ul.btn_list li.btn_1{
	top: 15px;
    left: 25px;}
.quest_1 .about ul.btn_list li.btn_2{
	top: 87px;
    left: 25px;}
.quest_1 .about ul.btn_list li.btn_3{
	top: 159px;
    left: 25px;}
.quest_1 .about ul.btn_list li a{
	display:block;
	width:250px;
	height:62px;
	text-indent:-9999px;}
	
	
	
/*----quest_2----*/
.quest_2{
	width:100%;
	margin:0 auto;
	background:url(../../gudetama2016/images/gudetama_quest_bg_bottom.jpg) repeat-x bottom left;
	background-size:17px 80px;}
.quest_2 h2{
	display:block;
	height:100px;
	background:url(../../gudetama2016/images/gudetama_quest_2_bg.jpg) repeat-x top left;
	background-size:28px 100px;
	text-indent:-9999px;}
.quest_2 h2 span{
	display:block;
	height:100px;
	background:url(../../gudetama2016/images/gudetama_quest_2_title.png) no-repeat top center;
	background-size:480px 100px;
	text-indent:-9999px;}
.quest_2 .about{
	width:100%;
	background:url(../../gudetama2016/images/gudetama_quest_foot.png) no-repeat bottom center;
	background-size:320px 58px;
	margin:0 auto;
	padding:0 0 52px 0;}
.quest_2 .about p{
	width:275px;
	margin:10px auto 0;
	text-align:center;}
.quest_2 .about p.banner{
	background:url(../../gudetama2016/images/quest_2.png) no-repeat top center;
	background-size:300px 80px;
	width:300px;
	height:80px;
	text-indent:-9999px;}
.quest_2 .about ul.btn_list{
	position:relative;
	display:block;
	background:url(../../gudetama2016/images/gudetama_detail_btn_2.jpg) no-repeat top center;
	background-size:500px 162px;
	width:300px;
	height:162px;
	margin:0 auto;}
.quest_2 .about ul.btn_list li{
	position:absolute;
	width:250px;
	height:62px;}
.quest_2 .about ul.btn_list li.btn_4{
	top: 15px;
    left: 25px;}
.quest_2 .about ul.btn_list li.btn_5{
	top: 87px;
    left: 25px;}
.quest_2 .about ul.btn_list li a{
	display:block;
	width:250px;
	height:62px;
	text-indent:-9999px;}
	
	
	
/*----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:300px;
	margin:15px auto 0;
	background:url(../../gudetama2016/images/sp_gudetama_quest_3.jpg) no-repeat;
	background-size:500px 300px;
	background-position:center top;}
.quest_3 p.btn_6 a{
	position: absolute;
    display: block;
    width: 250px;
    height: 62px;
    top: 182px;
    left: 62px;}
/*----quest_4----*/	
.quest_4{
	width:100%;
	height:285px;
	margin:0 auto;
	background:url(../../gudetama2016/images/sp_gudetama_quest_4.jpg) no-repeat;
	background-size:500px 285px;
	background-position:center top;}
.quest_4 p.btn_7 a{
	position: absolute;
    display: block;
    width: 250px;
    height: 62px;
    top: 163px;
    left: 62px;}
/*----quest_5----*/	
.quest_5{
	width:100%;
	height:285px;
	margin:0 auto;
	background:url(../../gudetama2016/images/sp_gudetama_quest_5.jpg) no-repeat;
	background-size:500px 285px;
	background-position:center top;}
.quest_5 p.btn_8 a{
	position: absolute;
    display: block;
    width: 250px;
    height: 62px;
    top: 163px;
    left: 62px;}
	
	
	
/*----link----*/		
.link{}
.link ul{
	position:relative;
	display:block;
	width:300px;
	height:240px;
	margin:10px auto;
	background:url(../../gudetama2016/images/sp_gudetama_link.jpg) no-repeat top center;
	background-size:500px 240px;}
.link ul li a{
	position:absolute;
	display:block;
	width: 217px;
    height: 70px;}
.link ul li.official a{
	top: 9px;
    left: 42px;}
.link ul li.youtube_link a{
	top: 87px;
    left: 42px;}
.link ul li.facebook a{
	top:160px;
	left:42px;}
		
	

/*----footer----*/
.footer{
	background:#e9e9e9;
	color:#ffffff;
	width:100%;
	padding:0 0 50px 0;
	text-align:center;}
	
.footercontents{
	width:100%;
	margin:10px 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: 70px;
    height: 81px;
    margin: 25px auto 15px auto;
    text-indent: -9999px;}

/*address*/
.footercontents address{
	color:#222;
	font-size:1rem;
	line-height:1.8em;}
.footercontents address.sanrio{
    background: url(../../gudetama2016/images/sp_gudetama_copy.png) top -10px center no-repeat;
    background-size: 500px 45px;
    width: 100%;
    height: 13px;
    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;}
.bx-wrapper .bx-viewport{
	border:none;
	box-shadow:none;
	left:auto;}
.bx-controls-direction{
	display:none;}


/*ss*/	
.quest .library .library_optimize{
	width:130px;
	margin:15px auto 0 auto;}
	
.library .hideobj_left,
.library .hideobj_right{
	display:none;}
.library .bx-wrapper .bx-prev,
.library .bx-wrapper .bx-next{
	display:none;}

.library img{
	width:128px;
	border:1px solid #be1a21;}
	
.bx-wrapper .bx-pager.bx-default-pager a{
	background:#000;}

.library .bx-pager-link.active,
.library .bx-wrapper .bx-pager.bx-default-pager a:hover,
.library .bx-wrapper .bx-pager.bx-default-pager a.active {
	background:#FFF;}
	
.library .bx-wrapper .bx-pager {
	background:#be1a21;
	width:100px !important;
	height:10px;
	margin-left:15px !important;
	padding:5px 0 !important;

	/*border-radius*/	
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PluginOverride_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/