@charset "utf-8";
/* ----------------------------------------------------------------------
base
---------------------------------------------------------------------- */

#wrapper{
	padding: 0;
	background: none!important;
}

.container{
	padding: 0 0 100px;
}

#navbar{background-image: none;}

/* ----------------------------------------------------------------------
background
---------------------------------------------------------------------- */
#page_background{
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:1;
	position:absolute;
	background: #fff;
}

#page_background .background_wrapper{
	position:absolute;
    height:100%;
    left:50%;
	width:2500px;
	height: 1250px;
	margin-left:-1250px;
	top:-65px;z-index:1;
}
.background_image{opacity: 1!important;}

/* ----------------------------------------------------------------------
header
----------------------------------------------------------------------*/
#header{
	height: 1180px;
	width: 1140px;
	position: relative;
	margin: 0 auto;
}

#headerlogo,#headertext{display: none;}
#headercatch{	bottom: 20px;left: 0px;position: absolute;}

@media only screen and (max-width:1400px){
	#page_background .background_wrapper{margin-left: -1100px;}
	#page_background .background_wrapper,
	#page_background .background_wrapper img{
		height:1100px;
		width: auto;
	}
	#header{height:1030px;}
}

/* ヘッダーダウンロードボタン */
#header .banner_store{
	text-align: center;
	width: 320px;
	padding: 15px;
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	background-color: #ff50a0;
	position: absolute;right: 0;bottom: 48px;
}

#header .youtube_link{
	text-align: center;
	width: 339px;
	height: 125px;
	position: absolute;right: 810px;bottom: 48px;
}
#header .youtube_link2{
	text-align: center;
	width: 339px;
	height: 125px;
	position: absolute;right: 810px;bottom: 48px;
}
#header .end_info{
	text-align: center;
	width: 410px;
	height: 125px;
	padding: 40px 8px 15px;
	font-size: 20pt;
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	background-color: #ff0000;
	color: #FFF;
	text-decoration: none;
	position: absolute;right: 360px;bottom: 48px;
}
#header .end_info span{
	border: solid 1px #FFF;
	-webkit-border-radius: 8px;
    -moz-border-radius: 20px;
    padding: 33px 62px;
}

#header .memoria_info{
	text-align: center;
	width: 320px;
	height: 125px;
	padding: 44px 8px 15px;
	font-size: 17pt;
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	background-color: #000;
	color: #FFF;
	text-decoration: none;
	position: absolute;right: 0px;bottom: 48px;
}
#header .memoria_info span{
	border: solid 1px #FFF;
	-webkit-border-radius: 8px;
    -moz-border-radius: 20px;
    padding: 36px 2px;
}

#header .banner_store .imgidol,
#header .banner_store .imgdolls{margin:-35px 0 10px;}
#header .banner_store .fadeeffect{display: block;}


#top_minibannerlist{
	text-align: center;
	padding: 50px 0 40px;
}

#top_minibannerlist li{
	display: inline-block;
	margin: 0 6px 14px;
}

h4{margin: 0px 0 10px;}

#sec_info .button_more{
	padding: 0 22px 0 10px;
	height: 20px;
	background-color: #221815;
	right: 0;top: 2px;position: absolute;
	vertical-align:middle;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	font-size: 11px;
	line-height: 20px;
	text-decoration: none;
	color: #fff!important;
	letter-spacing: 0.06em;
	background-image: url(../images/top/idol/button_more.png);
	background-position: 50px center;
	background-repeat: no-repeat;
}
#sec_info #panel_twitter .button_more{
	background-color: #29baf0!important;
	background-image: url(../images/top/idol/button_twitter.png)!important;
	background-position: 10px center;
	padding: 0 10px 0 28px;
}

/* panel_information */
#panel_information{
    width: 420px;
    float: right;
    margin-right: 40px;
    position: relative;
}

#panel_informationinner{
	width: 100%;
	height: 370px;
	background: #fff;
	padding: 15px 0 15px 15px;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	margin-right: 40px;
}

.device_ipad #panel_informationinner{
    padding-right: 15px;
    overflow: scroll;
    -webkit-overflow-scrolling:touch;
}

#panel_information iframe{
	width: 100%;
	height: 340px;
}

#news {padding-right: 15px!important;}


#panel_information #panel_informationinner.mg10top{	height: 310px;}
#panel_information #panel_informationinner.mg10top iframe{	height: 280px;}

#panel_information .banner{
	font-size: 20px;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	display: block;
	height: 50px;
	line-height: 46px;
	padding: 0px 15px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background:-webkit-linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
	background:-o-linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
	background:linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
	-webkit-box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
	-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
	background-color: #ff50a0;
	border: solid 2px #ff50a0;
	text-shadow: 1px 1px rgba(0,0,0,0.2);
	position: relative;
}

#panel_information .banner.yamada{
	background-color: #56c2de;
	border: solid 2px #56c2de;
}


#panel_information .banner::before{
	content: "";
	position: absolute;
	top: 4px;
	right: -8px;
	height: 50px;
	width: 50px;
	display: block;
	background: url(../images/movie/playicon.png) left top no-repeat;
	-moz-background-size:auto 75%;
	background-size: auto 75%;
}


/* panel_twitter */
#panel_twitterinner{
	height: 370px;
	background: #fff;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#panel_movie{height: 310px;}
#panel_movie,#panel_twitter{
	width: 320px;
	position: relative;
}

/* panel_movie */
.wrapthumbnail,.wrapthumbnail .movienone{
    width: 320px;
	height: 218px;
	margin: 0;
}

.wrapthumbnail a.button_movie_play{height: 180px;}

.wrapthumbnail.fl_left,
.wrapthumbnail.fl_right{
	width: 154px;
	height: 142px;
}

.wrapthumbnail.fl_left a.button_movie_play,
.wrapthumbnail.fl_right a.button_movie_play{height: 87px;}


.wrapthumbnail .thumbnail_title{
	padding: 9px 10px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 2px;
}

/* ----------------------------------------------------------------------
#sec_info
----------------------------------------------------------------------*/
#sec_info{
	height: auto;
	background-image:url(../images/top/idol/bg_info.png);
	background-color: #ffdcec;
	padding: 50px 0 0px;
}
#sec_info .container{padding-bottom: 50px;}

#sec_info .topbanner .fl_left{margin-right: 20px;}
#sec_info .topbanner .mg30top:nth-child(3){margin-left: 290px;}

/* ----------------------------------------------------------------------
#sec_story
----------------------------------------------------------------------*/
#sec_story{
	background: url(../images/top/idol/sec_story.jpg) center top no-repeat;
	background-attachment: fixed;
}
.device_ipad #sec_story,.device_ipad #sec_system{background-attachment: inherit;}

/* ----------------------------------------------------------------------
#sec_system
----------------------------------------------------------------------*/
#sec_system{
	background: url(../images/top/idol/sec_system.jpg) center top no-repeat;
	background-attachment: fixed;
}

#sec_system .wrapimage{position: relative;}

#sec_system .wrapimage img{
	box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.2),4px 4px 10px rgba(0, 0, 0, 0.4);
}

#sec_system .wrapimage .img2{left:0 ;bottom:-30px;position:absolute;}
#sec_system .wrapimage .img3{right:0 ;bottom:30px;position:absolute;}


/* ----------------------------------------------------------------------
#sec_character
----------------------------------------------------------------------*/
#sec_character{	background:url(../images/common/bg.png) repeat center top;}

#sec_character .container{padding-bottom: 50px;}

#characterlist{
	width: 1060px;
	margin:  0 auto;
}
#characterlist li .charatab,
#characterlist a{
	width:184px;
	display: block;
	background-image:url(../images/character/idol/character_tabs_sp.png);
	background-repeat: no-repeat;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
}

#characterlist li{
	width: 184px;
	margin: 0px 35px 45px 0;
	float: left;
}

#characterlist a{
	height:184px;
}

#characterlist .charatab1 .charatab,#characterlist .charatab1 a{background-position:0px 0px;}
#characterlist .charatab1:hover a{background-position: 0 -184px;}
#characterlist .charatab2 .charatab,#characterlist .charatab2 a{background-position:-200px 0px;}
#characterlist .charatab2:hover a{background-position: -200px -184px;}
#characterlist .charatab3 .charatab,#characterlist .charatab3 a{background-position:-400px 0px;}
#characterlist .charatab3:hover a{background-position: -400px -184px;}
#characterlist .charatab4 .charatab,#characterlist .charatab4 a{background-position:-600px 0px;}
#characterlist .charatab4:hover a{background-position: -600px -184px;}
#characterlist .charatab5 .charatab,#characterlist .charatab5 a{background-position:-800px 0px;}
#characterlist .charatab5:hover a{background-position: -800px -184px;}
#characterlist .charatab6 .charatab,#characterlist .charatab6 a{background-position:-1000px 0px;}
#characterlist .charatab6:hover a{background-position: -1000px -184px;}
#characterlist .charatab7 .charatab,#characterlist .charatab7 a{background-position:-1200px 0px;}
#characterlist .charatab7:hover a{background-position: -1200px -184px;}
#characterlist .charatab8 .charatab,#characterlist .charatab8 a{background-position:-1400px 0px;}
#characterlist .charatab8:hover a{background-position: -1400px -184px;}
#characterlist .charatab9 .charatab,#characterlist .charatab9 a{background-position:-1600px 0px;}
#characterlist .charatab9:hover a{background-position: -1600px -184px;}

#characterlist .charatab10 .charatab,#characterlist .charatab10 a{background-position:-1800px 0px;}
#characterlist .charatab10:hover a{background-position: -1800px -184px;}
#characterlist .charatab11 .charatab,#characterlist .charatab11 a{background-position:-2000px 0px;}
#characterlist .charatab11:hover a{background-position: -2000px -184px;}

#characterlist .charatab12 .charatab,#characterlist .charatab12 a{background-position:-2200px 0px;}
#characterlist .charatab12:hover a{background-position: -2200px -184px;}
#characterlist .charatab13 .charatab,#characterlist .charatab13 a{background-position:-2400px 0px;}
#characterlist .charatab13:hover a{background-position: -2400px -184px;}
#characterlist .charatab14 .charatab,#characterlist .charatab14 a{background-position:-2600px 0px;}
#characterlist .charatab14:hover a{background-position: -2600px -184px;}
#characterlist .charatab15 .charatab,#characterlist .charatab15 a{background-position:-2800px 0px;}
#characterlist .charatab15:hover a{background-position: -2800px -184px;}

#characterlist li .charaname img.mg10top{float: right;}
#characterlist li:nth-child(n+10) .charaname img.mg10top{float: left;margin-right: 54px;}
#characterlist li:nth-child(n+10){display: none;}

#characterlist .charatab5{	margin-right: 0px;}
#characterlist .charatab6{	margin-left: 100px;}

.charaname{margin-top: 6px;}


/* ----------------------------------------------------------------------
smartphone
---------------------------------------------------------------------- */
@media only screen and (max-width:640px){
    /* ----------------------------------------------------------------------
    background
	----------------------------------------------------------------------*/
	#page_background .background_wrapper{
    	left:0;
		width:640px;
		height: 590px;
		margin-left:0;
	}
	
	#page_background .background_wrapper,
	#page_background .background_wrapper img{
		width: 640px;
		height:590px;
		top: -30px;
	}
	
	/* ----------------------------------------------------------------------
	header
	----------------------------------------------------------------------*/
	#header{
		width: 640px;
		height:auto;
		margin-bottom: 30px;
	}

	#headerlogo {
		display: block;
		padding: 400px 0 0 20px;
	}

	#headercatch {
		bottom: inherit;
		top: 25px;
		left: 78px;
	}

	#headertext {
		display: block;
		margin: 0px auto 0;
	}

	
	/* ヘッダーダウンロードボタン */
	#header .youtube_link {
	    text-align: center;
	    width: 339px;
	    height: 125px;
	    position: absolute;
	    right: 270px;
	    top: 890px;
	}
	#header .youtube_link2 {
	    text-align: center;
	    width: 339px;
	    height: 125px;
	    position: absolute;
	    right: 270px;
	    top: 1020px;
	}
	#header .end_info{
	text-align: center;
	width: 580px;
	height: 125px;
	padding: 40px 8px 15px;
	font-size: 20pt;
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	background-color: #ff0000;
	color: #FFF;
	text-decoration: none;
	position: absolute;right: 30px;top: 740px;
}
#header .end_info span{
	border: solid 1px #FFF;
	-webkit-border-radius: 8px;
    -moz-border-radius: 20px;
    padding: 33px 146px;
}

#header .memoria_info{
	text-align: center;
	width: 580px;
	height: 125px;
	padding: 44px 8px 15px;
	font-size: 17pt;
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	background-color: #000;
	color: #FFF;
	text-decoration: none;
	position: absolute;right: 30px; top: 880px;
}
#header .memoria_info span{
	border: solid 1px #FFF;
	-webkit-border-radius: 8px;
    -moz-border-radius: 20px;
    padding: 36px 132px;
}

	#header .banner_store {
    position: relative;
    padding: 0;
    margin: 70px auto -20px;
    width: 580px;
    top: 300px;
    background: none!important;
}
	.topbanner{margin-top: 320px;}
	.topbanner2{margin-top: 410px;}
	#header .banner_store .icon_apply{display: none;}
	#header .banner_store .fadeeffect{	display: inline-block;}
	#header .banner_store .mg5top{margin: 20px 0 0px 14px;}
	#header .banner_store .imgidol,
	#header .banner_store .imgdolls{	margin:  0px 0 20px;}
	
	h4{
		margin: 0;
		padding: 25px 0 25px 60px;
		color: #fff;
		background-color: #ff50a0;
		background-image: url(../images/common/marker.png)!important;
		background-position: 30px center;
	}
	#panel_twitter h4{background-color: #0db9fa!important;}
	
	#top_minibannerlist{padding-bottom: 80px;}
	#top_minibannerlist li{margin: 0 0px 14px;}
	#top_minibannerlist li:nth-child(2n){margin-left: 10px;}
		
	#top_minibannerlist li img{
		width: 282px;
		height: auto;
	}

	#sec_info{padding: 0;}
	#sec_info .container{ 
		width: 100%;
		padding: 0;}
	
	
	#sec_info .button_more{
		height: 36px;
		line-height: 36px;
		right: 20px;
		top: 19px;
		font-size: 18px;
		background-image: url(../images/top/idol/button_more_sp.png);
		background-position: 80px center;
		padding: 0 38px 0px 15px;
	}
	#sec_info #panel_twitter .button_more{
		color: #29baf0!important;
		background-color: #fff!important;
		background-image: url(../images/top/idol/button_twitter_sp.png)!important;
		background-position: 15px center;
		padding: 0px 15px 0 48px;
	}
	

	/* panel_information */	
	#panel_information,
	#panel_movie,
	#panel_twitter{
		width: 640px;
		float: none;
		padding: 0;
		margin: 0 auto 0;
		height: auto;
	}
	
	#panel_twitterinner,
	#panel_informationinner{
		border-radius: 0px;
    	-webkit-border-radius: 0px;
    	-moz-border-radius: 0px;
	}
	
	/* panel_information */
	#panel_informationinner{
		padding: 30px 20px;
		overflow:scroll;
  		-webkit-overflow-scrolling:touch;
	}
	
    #panel_information iframe{
		display:block;
		width: 300px;
		height: auto;
		transform-origin:left top;
		transform:scale(2.0);
	}
    
	
	/* banner */
	#panel_information{background: #fff;}
	
	#panel_information .banner{
		font-size: 30px;
		line-height: 78px;
		height: 80px;
		margin-bottom: -10px;
		margin: 30px 30px 0;
	}

	#panel_information .banner::before{
		top: 8px;
		right: 5px;
		height: 60px;
		width: 60px;
		-moz-background-size: auto 100%;
		background-size: auto 100%;
	}
	
	
	/* panel_twitter */
	#panel_twitter{		height: 506px;background: #fff;}
	#panel_twitterinner{padding: 30px 0;}
	

	/* panel_movie */
	.wrapthumbnail{
		width: 580px!important;
		height: 380px!important;
		height: auto;
		margin: 30px 30px 0;
	}
	.wrapthumbnail.mg10top{margin-top: 30px!important;margin-bottom: 30px;}
	
	.wrapthumbnail.fl_left,
	.wrapthumbnail.fl_right{float: none;}
	
	#sec_story,#sec_system{background-attachment: inherit;}
	
	/* ----------------------------------------------------------------------
    #sec_character
	----------------------------------------------------------------------*/
	#characterlist{
		width:640px;
		margin: -15px 0 0 -5px;
	}
	#characterlist li{	margin: 0px 20px 45px 0!important;}
	#characterlist .charatab6{margin-left: 0;}
	
	#characterlist li:nth-child(n+10){display: block;}
	
	/* ----------------------------------------------------------------------
	#sec_system
	----------------------------------------------------------------------*/
	#sec_system .wrapimage img{
		width: 580px;
		height: auto;
		position: static!important;
		display: inline-block;
	}
	
	#sec_system .wrapimage .img2,
	#sec_system .wrapimage .img3{
		width: 275px;
		margin-top: 30px;
	}
	#sec_system .wrapimage .img2{margin-right: 24px;}
}