@charset "UTF-8";

/* ----------------------------------------------------
作成日: 2017.07.07
最終更新日: 

common.css： 共通設定
---------------------------------------------------- */

body {
	position: relative;
	min-width: 320px;
	font-size: 41.6875%;
	/*font-size:62.5%;10px*/
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
	line-height: 1.6;
	background-image: url("../image/bg01.jpg");
	background-position: top center;
	background-repeat:no-repeat;
	background-size:100% auto;
	height: 100%;
}

@media screen and (max-width:980px) {
	body {
		background-size:126% auto;}
	}




img {
	max-width: 100%;
	height: auto;
}

a:link, a:hover, a:active { color: #ff0000; }

a:visited { color: #ff0000; }

a:focus { outline: none; }

/*clearfix*/
.cf:before, .cf:after {
	content: "";
	display: table;
}

.cf:after, .clear { clear: both; }

cf::after {
	content: " ";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	line-height: 0;
}

ul { list-style: none; }

#wrapper {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.tc { text-align: center !important;}
.tr { text-align: right !important;}
.tl { text-align: left !important;}

.mb1 { margin-bottom:1% !important;}
.mb2 { margin-bottom:2% !important;}
.mb3 { margin-bottom:3% !important;}
.mb4 { margin-bottom:4% !important;}
.mb5 { margin-bottom:5% !important;}
.mt1 { margin-top:1% !important;}
.mt2 { margin-top:2% !important;}
.mt3 { margin-top:3% !important;}
.mt4 { margin-top:4% !important;}
.mt5 { margin-top:5% !important;}

.sd {
	filter: drop-shadow(0 2px 0px rgba(0, 0, 0, .5));
	-webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, .5));
}

#bg01 {
	min-width: 320px;
	width: 100%;
	height: 100%;
	background-image: url("../image/bg02.png");
	background-position: top center;
	background-size:100% auto;
}


#bg02 {
	min-width: 320px;
	width: 100%;
	height: 100%;
	background:url(../image/bg03.png) top center;
	background-size:100% auto;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
}

.att {
	padding-left: 1em;
	text-indent: -1em;
}

hr.blue {
	display:block;
	width:86.93%;
	max-height: 69px;
    padding-top: 7%;
	margin:0 auto;
	background:url(../image/line_b.png) no-repeat;
	background-size:100%;
}

hr.green {
	display:block;
	width:86.93%;
	max-height: 69px;
    padding-top: 7%;
	margin:0 auto;
	background:url(../image/line_g.png) no-repeat;
	background-size:100%;
}

/*==================================
header
===================================*/

header { position: relative; }

.snsBtn {
	width: 100%;
	max-width: 820px;
	min-width: 320px;
	right: 0;
	top: 0.5%;
	text-align: right;
	margin:0 auto;
}

.snsBtn0301 {
	width: 100%;
	max-width: 1021px;
	min-width: 320px;
	right: 0;
	top: 0.5%;
	text-align: right;
	margin:1% auto 0 auto;
}

.snsBtn li {
	display: inline-block;
	width: 7.56%;
	margin: 0.5%;
	vertical-align:top;
}

.snsBtn0301 li {
	display: inline-block;
	width: 7.56%;
	vertical-align:top;
}

.snsBtn0301 li.music_btn {
	display: inline-block;
	width: 40.82%;
}

.snsBtn0301 li.music_btn img {
	width:100%;
	max-width:425px;
	}

.snsBtn.is-foot, .snsBtn0301.is-foot{
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: 980px;
	min-width: 320px;
	margin: 2% auto 0 auto;
	text-align: center;
}

.snsBtn.is-foot li, .snsBtn0301.is-foot li {
	display: inline-block;
	width: 6.32%;
	margin: 1%;
}

.mainImg {
	width: 100%;
	max-width: 980px;
	min-width: 320px;
	position: relative;
	margin: 0 auto;
}

.mainImg0301 {
	width: 100%;
	max-width: 1288px;
	min-width: 320px;
	position: relative;
	margin: 0 auto;
}

.logo {
	position: relative;
	z-index: 2;
	float: right;
	margin-top: 6.5%;
}

.logoAnime {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.5s;
	-ms-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	visibility: visible !important;
}

h1 {
	width:89.08%;
	position:absolute;z-index: 3;
	left:0;
	right:0;
	bottom:12%;
	margin: 0 auto;
	text-align: center;
	}
	
h1.logo_0301 {
	width:100%;
	max-width:1288px;
	min-width:300px;
	position:absolute;z-index: 3;
	left:0;
	right:0;
	bottom: 14%;
	margin: 0 auto;
	text-align: center;
	}
	
	h1.logo_0301 img {
		width:72.43%;
		}

h2.catch {
	position: absolute;z-index: 3;
	left:0;
	right:0;
	bottom:2%;
	margin: 0 auto;
	text-align: center;
}

h2.catch_0301 {
	position: absolute;z-index: 3;
	left:0;
	right:0;
	bottom:8%;
	margin: 0 auto;
	text-align: center;
}

.date {
	position:absolute; z-index:3;
	width:100%;
	max-width:1288px;
	left:0;
	right:0;
	bottom: 0%;
	text-align:center;
	margin:0 auto;
	}
	
	.date img {
		width:71.42%;
		}
		
/*.music_btn {
	position: absolute;z-index: 3;
	max-width:1021px;
	margin:0 auto;
	top:0;
	right:0;
	left:0;
	margin:0 auto;
	text-align:right;
	}
	
	.music_btn img {
		width:41.62%;
		margin-right: 32%;
		}*/
		
	@media screen and (max-width:782px) {
		.music_btn img {
		margin-right: 34%;
		}
		}

.miku {
	position: relative;z-index: 2;
	width:72.44%;
	left:0;
	right:0;
	margin: -1% auto 0 auto;
	text-align: center;
	}

.puyo {
	position: absolute;z-index: 3;
	left:0;
	right:0;
	top:0;
	margin: 0 auto;
	text-align: center;
	}
	
.main_0301 {
	position: relative;z-index: 2;
	width:100%;
	min-width:320px;
	left:0;
	right:0;
	margin: 2% auto 0 auto;
	text-align: center;
	}
	
.puyo_g {
	position: absolute;z-index: 3;
	width:12.5%;
	right: 21%;
    top: 47%;
	margin: 0 auto;
	text-align: center;
	}
	
.puyo_r {
	position: absolute;z-index: 3;
	width:10.17%;
	left:10%;
	top:48%;
	margin: 0 auto;
	text-align: center;
	}
	
.puyo_b {
	position: absolute;z-index: 3;
	width:7.91%;
	left: 15%;
    top: -2%;
	margin: 0 auto;
	text-align: center;
	}
	
.puyo_p {
	position: absolute;z-index: 3;
	width:5.51%;
	left: 27%;
    top: 1%;
	margin: 0 auto;
	text-align: center;
	}
	
.puyo_y {
	position: absolute;z-index: 3;
	width:6.44%;
	right: 12%;
    top: 5%;
	margin: 0 auto;
	text-align: center;
	}
	

	
.copy {
	width: 95%;
	max-width: 980px;
    text-align: right !important;
    padding-right: 3%;
    margin: 0 auto;
	}
	
	.copy img {
		width:44.18%;
		}
		
	@media screen and (max-width:640px) {
	.copy img {
		width:72.97%;
		}	
		}

h3 {
	width: 90.62%;
	max-width:870px;
	margin: 2% auto;
}

.ab {
	position: absolute;
	z-index: 1;
}

.re { position: relative; }


/*==================================
common
===================================*/

.main {
	width: 100%;
	min-width: 320px;
	margin: 0 auto;
	padding-top: 3%;
	}

/****IE***/	
@media all and (-ms-high-contrast:none) {
}

.nav li.btnS {
	width: 50% !important;
	margin-bottom: 9px;
}

.contents {
	position: relative;
	z-index: 5;
	width: 100%;
	height: 100%;
	max-width: 960px;
	min-width: 320px;
	margin: 0 auto 3% auto;
	padding: 1% 0 2% 0;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	box-sizing: border-box;
	box-shadow: 0px 0px 30px 6px #a8d4f8;
	background-color:rgba(227,244,246,0.80);
	background-image:url(../image/con_bg.png);
	background-position:bottom;
	background-repeat:no-repeat;
	background-size:100%;
}

@media screen and (max-width:640px) {	
.contents {
	box-shadow: 0px 0px 12px 2px #a8d4f8;
}		
	}

h4.tw_cam_sub_title {
	width:35.83%;
	margin:0 auto;
	}
	
.tw_cam01_end {
	position: absolute;z-index: 3;
    width: 83.33%;
    margin: 0 auto;
    top: -7%;
    left: 0;
    right: 0;
	}
	
h4.event01_sub_title {
	width:90.62%;
	margin:0 auto;
	}

.txt {
	width:79.38%;
	margin:0 auto;
	}
	
.event01_star {
	background:url(../image/event_bg.png) no-repeat top;
	background-size:100% auto;
	}

.event01_txt01 {width:92.34%; margin:0 auto;}

.event01_txt02 {width:77.34%; margin:0 auto;}

.event01_multi {
	position:relative; z-index:1;
	width:37.5%;
	left: 23%;
	}
	
.event01_mikudayo {
	position:relative; z-index:1;
	width:37.5%;
	margin:0 auto;
	}
	
.event01_aruru {
	position:absolute; z-index:1;
	width:40.93%;
	left: -13%;
    top: 15%;
	
	}
	
.event01_puyomiku {
	position:absolute; z-index:1;
	width:48.33%;
	right: -13%;
    top: 25%;
	}


.music_bg {
	background:url(../image/music_bg.png) no-repeat bottom;
	background-size:84% auto;
	}
	
.music_img {
	width:79.27%;
	margin:0 auto;
	}
	
.music_txt02 {
	width:41.25%;
	margin:0 auto;
	}
	
.tw_cam02_bg {
	background:url(../image/tw_cam02_bg.png) no-repeat 50% 72%;
	background-size:84% auto;
	}
	
.tw_cam02_mikurisu {
	position:absolute; z-index:3;
	width:32.08%;
	right: 1%;
    bottom: 36%;
	}
	
.tw_cam02_txt02 {
	width:57.39%;
	margin:0 auto;
	}
	
	
.tw_cam03_bg {
	background:url(../image/tw_cam03_bg.png) no-repeat 50% 69%;
	background-size:84% auto;
	}
	
.hacyune {
	position:relative; z-index:1;
	width:32.60%;
	left: 13%;
	}
	
.tw_cam03_item {
	position:absolute; z-index:1;
	width:38.54%;
	right: 15%;
    bottom: 20%;
	}
	
.tw_cam03_item_0309 {
	position:absolute; z-index:1;
	width:38.54%;
	right: 15%;
    bottom: 4%;
	}
	
.tw_cam03_end {
	position: absolute;z-index: 3;
    width: 83.33%;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
	}
	
	

.btn {
	position: relative;
	z-index: 5;
	width: 57.24%;
	margin: 1% auto 5% auto;
}

/*chara*/
.charaPop {
	position: relative;
	width: 100%;
	height:auto;
	max-width: 996px;
	margin: 0 auto;
}

	#miku {
		background:url(../image/chara_bg_miku.png?dummy=20180213) no-repeat center;
		background-size:78.58% auto;
		}
		
	#mikudayo {
		background:url(../image/chara_bg_mikudayo.png?dummy=20180219) no-repeat center;
		background-size:78.58% auto;
		}
		
	#rin {
		background:url(../image/chara_bg_rin.png?dummy=20180221) no-repeat center;
		background-size:78.58% auto;
		}
		
	#len {
		background:url(../image/chara_bg_len.png?dummy=20180222) no-repeat center;
		background-size:78.58% auto;
		}
		
	#luca {
		background:url(../image/chara_bg_luca.png?dummy=20180218) no-repeat center;
		background-size:78.58% auto;
		}

	#meiko {
		background:url(../image/chara_bg_meiko.png?dummy=20180220) no-repeat center;
		background-size:78.58% auto;
		}
		
	#kaito {
		background:url(../image/chara_bg_kaito.png?dummy=20180213) no-repeat center;
		background-size:78.58% auto;
		}
		
	#feli {
		background:url(../image/chara_bg_feli.png?dummy=20180224) no-repeat center;
		background-size:78.58% auto;
		}
	
	#maguro {
		background:url(../image/chara_bg_maguro.png?dummy=20180226) no-repeat center;
		background-size:78.58% auto;
		}
		
	#grace {
		background:url(../image/chara_bg_grace.png?dummy=20180228) no-repeat center;
		background-size:78.58% auto;
		}
		
	
	
.chara {
	width:90.96%;
	margin:0 auto;
	}

.charaPop.is-active .charaImg {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.7s;
	-ms-animation-duration: 0.7s;
	animation-duration: 0.7s;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	visibility: visible !important;
}


.line {
	width: 71.45%;
	margin: 3% auto;
}

.sliderNav {
	width: 95%;
	margin: 2% auto;
	text-align: center;
}

.sliderNav li {
	width: 22.85%;
	display: inline-block;
	margin-bottom: 1.3%;
	margin-right: -5.8%;
}

.sliderNav li:last-child { margin-right: 0; }

.slider li {
	width: 95.10%;
	position: relative;
}

.box { position: relative; }

.eventImg {
	z-index: 2;
	margin: 2% auto;
}


.eventBan {
	position: relative;
	z-index: 50;
}

/**** 注意書き ****/
.caution {
	width: 85%;
	margin: 3% auto 0 auto;
	text-align: left;
	font-size: 2.8rem;
}

/**** リツイートボックス ****/

.twBox {
	width: 80%;
	margin: 0 auto;
}

twitterwidget, iframe[id^="twitter-widget-"] {
	margin-left: auto;
	margin-right: auto;
}

.linkArea {
	width: 100%;
	max-width: 980px;
	min-width: 320px;
	margin: 0 auto;
	padding-bottom: 3%;
}

@media screen and (max-width:640px) {


.snsBtn.is-foot li, .snsBtn li {
	display: inline-block;
	width: 10.32%;
	margin: 1%;
}

.btn {
	width: 84.24%;
	margin: 1% auto 3% auto;
}

.sliderNav {
	width: 93%;
	margin: 2% auto;
	text-align: center;
}

.sliderNav li:last-child { margin-right: 0; }

.sliderNav li:nth-child(5) { clear: both; }

}

/*==================================
banner
===================================*/

.siteBtn {
	display: block;
	width: 57.24%;
	margin: 5% auto;
}

@media screen and (max-width:640px) {

.siteBtn {
	display: block;
	width: 87.24%;
	margin: 5% auto;
}
}

.banner {
	width: 100%;
	max-width: 970px;
	min-width: 310px;
	margin: 0 auto;
	text-align: center;
}

.banner li {
	display: inline-block;
	margin-right: 1%;
	margin-bottom: 1%;
}

.banner li.portalBanner {
	margin-top: 1%;
	border: 1px solid #0086d1;
}

/*==================================
appDl
===================================*/

.appDl {
	width: 100%;
	padding: 3% 0;
	background: #0d1049;
	color: #FFFFFF;
	font-size: 2rem;
}

.appDl .box {
	width: 100%;
	max-width: 980px;
	min-width: 320px;
	margin: 0 auto;
}

.appDl .box h3 {
	width: 79.68%;
	margin: 0 auto;
}

.appDl .dl { text-align: center; }

.appDl .dl li {
	display: inline-block;
	width: 24.37%;
	background: url(../image/appDL-bg.png) no-repeat center top;
	background-size: 79%;
}

@media screen and (max-width:640px) {

.appDl .dl li { width: 39.37%; }
}

.appDl .dl li a img {
	width: 90%;
	margin: 3% 0 25% 0;
}

.appDl .box .txt {
	width: 50.31%;
	margin: 0 auto;
}

.appDl .box p {
	margin: 0 auto;
	font-size: 3.0rem;
}

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

#top_scroll_btn {
	position: fixed;
	z-index: 9999;
	width: 15.93%;
	height: auto;
	bottom: 10px;
	right: 10px;
	visibility: visible;
}

.tcb-is-active {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.5s;
	-ms-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-name: bounceInUp;
	animation-name: bounceInUp;
	visibility: visible !important;
}

.tcb-is-inactive {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.5s;
	-ms-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-name: bounceOutDown;
	animation-name: bounceOutDown;
	visibility: visible !important;
}

#top_scroll_btn img:hover {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.5s;
	-ms-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	visibility: visible !important;
}

@media screen and (max-width:640px) {

#top_scroll_btn { width: 23%; }
}

/*==================================
footer
===================================*/

footer {
	position: relative;
	width: 100%;
	min-width: 960px;
	background: #ffffff;
	font-size: 3.0rem;
	color: #111111;
}

.footer {
	width: 90%;
	max-width: 970px;
	min-width: 310px;
	margin: 0 auto;
	padding-bottom: 5%
}

#footerContents, #footer_text { padding: 10px; }

#footer_text { padding-top: 0; }

#footerContents {
	width:100%;
	}

#footerContents li {
	float: left;
	margin-right: 10px;
}

/****IE***/	
@media all and (-ms-high-contrast:none) {
	
	#footerContents li {
		float: left;
		margin-right: 10px;
		}
}

#footerContents li p { margin-top: 3%; }

@media screen and (max-width: 790px) {
    #footerContents li p { margin-top: 1%; }
}

/****IE***/	
@media all and (-ms-high-contrast:none) {
	
	#footerContents li p { margin-top: 0%; }
}

.sega-logo {
	display: inline-block;
    width: 104px;
    height: 36px;
    padding-top: 38px;
}

@media all and (-ms-high-contrast:none) {
.cero {
	display: inline-block;
    width: 60px;
    height: 74px;
}}

.copyFooter {
	width:653px;
	display: inline-block;
	padding-top:6%;
	}

	
@media screen and (max-width:960px) {
	
.copyFooter {
	width:653px;
	display: inline-block;
	padding-top:0;
	}
	}

#footer_text a {
	display: inline-block;
	margin-right: 10px;
}

@media screen and (max-width:960px) {

footer { min-width: 320px !important; }
}

@media screen and (max-width:640px) {

footer { font-size: 3.0rem; }

.footer { padding-bottom: 28% }
}