@charset "UTF-8";

/************************************************************
*
*　白猫×黒猫 大感謝ねこまつり（2014.11.xx）
*
************************************************************/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　MODULE
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

body {
	background-color:#0378ad;
	}

#bg {
	width: 100%;
	min-width:1000px;
	height: 700px;
	background-repeat: no-repeat;
	background-image: url(/shiro-kuro-collabo/img/bg_mainvisual.jpg);
	background-position: center;
	}

a:hover {
	text-decoration: none !important;
	}

.shironeko {
	float:left;
	}
.kuroneko {
	float:right;
	}

#mainContents {
	width: 100%;
	min-width:1000px;
	margin:-30px 0 0 0;
	background-repeat: no-repeat;
	background-image: url(/shiro-kuro-collabo/img/mainContents_bg.jpg);
	background-position: center;
	padding-bottom:100px;
	z-index:0;
	}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　MAIN VISUAL
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#mainvisual {
	text-align:center;
	background-repeat: no-repeat;
	min-width:1000px;
	background-image: url(../../img/mainVisual_bg.jpg);
	background-position: top center;
	}

#mainvisual h1 {
	text-align:center;
	padding-top:580px;
	}

#mainvisual .sumally {
	margin:15px auto 0 auto;
	text-align:center;
	width: 100%;
	height:359px;/*339px*/
	background-image: url(/shiro-kuro-collabo/img/main_sumally.png);
	background-position: top center;
	background-repeat:no-repeat;
	}

#mainvisual .sumally p {
	width:1000px;
	margin:0 auto;
	}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　NEWS
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#news {
	width:1000px;
	height:349px;
	margin:0 auto;
	background-image: url(/shiro-kuro-collabo/img/news_bg.png);
	background-repeat:no-repeat;
	overflow:hidden;
	}

#news h2 {
	display:none;
	}

#news article {
	width:600px;
	height:150px;
	margin:0 auto;
	}

#news article ul {
	margin-top:160px;
	position:absolute;
	}

#news article ul li {
	color:#fff;
	font-size:14px;
	line-height:20px;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
	margin:0 0 5px 0;
	}

#news article ul li span {
	margin-right:10px;
	}

#news article ul li a {
	color:#fff;
	font-size:14px;
	line-height:20px;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　TWITTER
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#twitter {
	width:1000px;
	margin:0 auto;
	margin-top:10px;
	overflow:hidden;
	}

#twitter article {
	width:500px;
	height:429px;/* 373px + 56px */
	background-image: url(/shiro-kuro-collabo/img/twitter_bg.png);
	background-repeat:no-repeat;
	background-position:bottom;
	}

#twitter h2 {
	text-align:center;
	z-index:10;
	position:relative;
	}

#twitter h2 img {
	padding:0 0 0 1px;
}

#twitter .display {
	width:457px;
	height:343px;
	margin:-13px 0 0 26px;
	z-index:0;
	}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　DOWNLOAD
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#download {
	width:1000px;
	margin:0 auto;
	margin-top:30px;
	}

/*#download h2 {
	width:100%;
	height:77px;
	background-image: url(/shiro-kuro-collabo/img/dl_title.png);
	background-position: top center;
	background-repeat:no-repeat;
	}*/

#download article {
	width:440px;
	height:315px;
	margin-top:20px;
	background-image: url(/shiro-kuro-collabo/img/dl_bg.png);
	background-repeat:no-repeat;
	overflow:hidden;
	}

#download .box {
	width:900px;
	margin:0 auto;
	overflow:hidden;
	}

#download .logo {
	text-align:center;
	}

#download ul {
	width:408px;
	height:64px;
	margin:0 auto;
	overflow:hidden;
	}
#download ul .googleplay {
	float:left;
	}
#download ul .appstore {
	float:right;
	}

#download .official {
	width:408px;
	margin:0 auto;
	margin-top:10px;
	}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　FOOTER
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

footer {
	font-size:12px;
	color:#fff;
	height:170px;
	background-image: url(/shiro-kuro-collabo/img/ft_bg.png);
	margin-top:-100px;
	}
footer a {
	color:#fff;
	}
footer p {
	text-align:center;
	margin:10px 0;
	}

footer .link {
	padding-top:55px;
	}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　SNS
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#sns {
	width:100%;
	margin:0 auto;
	z-index:100;
	position: fixed;
	top:0;
	}

#sns .indent {
	width:1000px;
	margin:0 auto;
	}

#sns ul {
	float:right;
	}

#sns ul li {
	float:left;
	}

#loader {
	width: 225px;
	height: 107px;
	display: none;
	position: fixed;
	_position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -54px;
	margin-left: -112px;
	z-index: 9999;
	font-weight:bold;
	font-size:28px;
}

#loader .load01 {
	position:absolute;
	top:0;
	left:0;
}

#loader .load02 {
	position:absolute;
	top:0;
	left:85px;
}

#fade {
	width: 100%;
	height: 100%;
	display: none;
	background-color: #FFF;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 9998;
}


#media {
	width:901px;
	height:91px;
	background:url(../../img/back_media.png) top left no-repeat;
	margin:20px auto;
}

#media ul {
	width:670px;
	padding:10px 0 0 0;
	margin:0 0 0 230px;
}

#media ul li {
	float:left;
	padding:0 10px 0 0;
}

.movie {
	width:980px;
	overflow:hidden;
	margin:0 auto;
	padding:10px 0 10px 0;
}

.movie_l {
	width:480px;
	float:left;
}

.movie_r {
	width:480px;
	float:right;
}