@charset "utf-8";

@import url(ini.css);
@import url(font.css);


@import url(other_contents.css);/*TOP以外のページ用*/
/*
プライマルハーツ CSS

全ページ共通スタイル
及びTOPページ用

各コンテンツ・キャンペーンページCSSはpage_contents.css内に書く

各ページbodyにはIDを設定
TOPページ→page_top
STORYページ→page_story
WORLDページ→page_world
CHARACTERページ→page_character
GRAPHICページ→page_graphic
SPECページ→page_spec
DOWNLOADページ→page_download
CAMPAIGNページ→page_campaign

*/

body{
	background-color:#FFF;
	background-image:url(../img/primal_bg.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#container{
	margin:0 auto;
	text-align:center;
	min-height:100%;
	width:1000px;
}
h1,h2{
	display:none;
}

#header{
	width:1000px;
	height:70px;
	margin-top:5px;
	position: fixed;
	background-color:rgba(255,31,115,0.7);
	z-index:999;

/*角丸め*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/*ここからヘッダーナビゲーション*/
#header ul#header-navi{
	width:880px;
	height:52px;
	margin-top:10px;
	margin-left:18px;
	float:left;
}
#header ul#header-navi li{
	float:left;
}
#header ul#header-navi a{
	display:block;
	width:110px;
	height:52px;
}

#header .top a{
	background-image:url(../img/header-nav_btn.png);
	background-position:0px 0px;
}
#header .story a{
	background-image:url(../img/header-nav_btn.png);
	background-position:-110px 0px;
}

#header .world a{
	background-image:url(../img/header-nav_btn.png);
	background-position:-210px 0px;
}

#header .character a{
	background-image:url(../img/header-nav_btn.png);
	background-position:-330px 0px;
}

#header .graphic a{
	background-image:url(../img/header-nav_btn.png);
	background-position:-440px 0px;
}

#header .spec a{
	background-image:url(../img/header-nav_btn.png);
	background-position:-550px 0px;
}

#header .download a{
	background-image:url(../img/header-nav_btn.png);
	background-position:-660px 0px;
}

#header .campaign a{
	background-image:url(../img/header-nav_btn.png);
	background-position:-770px 0px;
}
/*クリック不可*/
#header ul#header-navi li.inactive{
	display:block;
	width:110px;
	height:52px;
	background-image:url(../img/header-nav_btn.png);
	background-position:-660px 0px;
	opacity:0.2;
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*TOPページ*/
#top-area{
	padding-top:90px;
}

#banner1-area{
	padding-top:15px;
}

#page_top .contents_box{
	width:970px;
	margin-top:20px;
}

#banner2-area{
	float:left;
	width:350px;
	position:relative;
}
#topics-area{
	float:left;
	margin-left:10px;
	width:390px;
	position:relative;
}
#comic-area{
	float:left;
	width:200px;
	margin-left:20px;
	position:relative;
}

/*TOP吹き出し（大きさによって調整）*/

#top-area a.fukidashi2{
	display:block;
	width:244px;
	height:143px;
	position:absolute;
	background-image:url(../img/top-fukidasi.png);
	z-index:1;
	margin-left:830px;
	margin-top:-10px;
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}



/*ここから更新情報*/

#topics-area h2{
	display:block;
	width:382px;
	height:49px;
	background-image:url(../img/topics_header.png);
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

	position:absolute;
	margin-top:-12px;
	z-index:1;
}

#topics-area #topics{
	width:382px;
	height:380px;
	padding-top:47px;
	padding-bottom:10px;
	position:relative;
	background-color:rgba(255,255,255,0.7);

/*角丸め*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
/* box-shadow */
	box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 6px 3px;
	-webkit-box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 6px 3px;
	-moz-box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 6px 3px;
}

/*更新情報記事調整*/
#topics-area #topics .box{
	width:320px;
	height:95px;
	background-color:#fffcd5;
	margin:0px auto 1em;
	text-align:left;
	padding:5px;
/*角丸め*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
/* box-shadow */
	box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 4px 2px;
	-webkit-box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 4px 2px;
	-moz-box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 4px 2px;
}
#topics-area #topics .box img{
	float:left;
	margin-right:5px;
}
#topics-area #topics .box span{
	display:block;
	color:#ff6996;
	font-weight:bold;
}


/*スクロールバー設定*/
#topics .scroll-pane{
	overflow: auto;
    width: 97%;
    height: 370px;
}


/*ここからTOPページ4コマ漫画*/
#comic-area h2{
	display:block;
	width:191px;
	height:49px;
	background-image:url(../img/comic_header.png);
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

	position:absolute;
	margin-top:-12px;
	z-index:1;
}

#comic-area .box{
	width:191px;
	height:390px;
	padding-top:37px;
	padding-bottom:10px;
	position:relative;
	background-color:rgba(255,255,255,0.7);

/*角丸め*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
/* box-shadow */
	box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 6px 3px;
	-webkit-box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 6px 3px;
	-moz-box-shadow:rgba(109, 121, 138, 0.3) 0px 0px 6px 3px;

}

#comic-area .box a:hover img{
	opacity:0.5;
}
#comic-area .box a{
	color:#FFF;
}

#comic-area .box a.4koma{
	margin:5px auto;
	background-color:#39F;
	display:block;
	width:130px;
	height:364px;
}

#comic-area .footer{
	position:absolute;
	bottom:0;
	background-color:#ff6e99;
	height:23px;
	width:100%;
	color:#FFF;
	padding-top:3px;
/*角丸め*/
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	-moz-border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

#comic-area .footer a.log{
	background-color:#FFF;
	color:#ff6e99;
	padding-left:0.5em;
	padding-right:0.5em;
	margin-left:1em;
	text-decoration:none;
/*角丸め*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#comic-area .footer a.log:hover{
	background-color:#38c0ff;
	color:#FFF;
}

/*ま～まれぇどボタンベース*/
.marmalade a{
	display:block;
	width:82px;
	height:40px;
	background-image:url(../img/marmalade.png);
	background-position:0px 0px;
}
#header .marmalade{
	margin-left:904px;
	margin-top:18px;

}

/*NEW!アイコン*/
.new_icon{
	width:57px;
	height:57px;
	background-image:url(../img/new_icon.png);
	position:absolute;
	z-index:1;
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#banner1-area .new_icon{
	margin-left:30px;
	margin-top:-10px;	
}
#banner2-area .new_icon{
	margin-left:-20px;
	margin-top:-10px;
}

/*人気投票中間結果アイコン*/
.tyuukan_icon{
	width:190px;
	height:88px;
	background-image:url(../img/vote/tyuukan_icon.png);
	position:absolute;
	z-index:1;
	margin-top:-20px;
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*終了しましたアイコン*/
.syuryou_icon1{
	width:77px;
	height:77px;
	background-image:url(../img/syuryou-s_icon.png);
	position:absolute;
	z-index:1;
	margin-top:-5px;
	margin-left:-5px;
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*終了しましたアイコン大（キャンペーンページ用）*/
.syuryou_icon2{
	width:126px;
	height:126px;
	background-image:url(../img/syuryou-l_icon.png);
	position:absolute;
	z-index:1;
	margin-top:-5px;
	margin-left:130px;
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*TOPページキャンペーンバナー*/

/*ここがポイントバナー*/
#banner1-area .banner a{
	display:block;
	width:893px;
	height:90px;
	margin:auto;
	text-align:center;
}

#banner1-area #koko-point{
	background-image:url(../img/banner/point_banner.png);
	background-position:0px 0px;
}

/*バナー（小）*/
#banner2-area .banner a{
	display:block;
	width:340px;
	height:91px;
	margin-bottom:23px;
}

#banner2-area #souki-yoyaku{
	background-image:url(../img/banner/souki-yoyaku_banner.png);
	background-position:0px 0px;
}
#banner2-area #yoyaku{
	background-image:url(../img/banner/yoyaku_banner.png);
	background-position:0px 0px;
}
#banner2-area #gentei{
	background-image:url(../img/banner/gentei_banner.png);
	background-position:0px 0px;
}
#banner2-area #ouen-banner_banner{
	background-image:url(../img/banner/ouen-banner_banner.png);
	background-position:0px 0px;
}

#banner2-area img.blank{
	opacity:0.5;
	margin-bottom:13px;
}
/*バナー（大）*/
#banner3-area{
	position:relative;
	width:1000px;
}
#banner3-area .new_icon{
	margin-left:40px;
	margin-top:-10px;
}

#banner3-area .banner a{
	display:block;
	width:893px;
	height:109px;
	margin:10px auto;
}
#banner3-area #tenpo-tokuten{
	background-image:url(../img/banner/tenpo-tokuten_banner.png);
	background-position:0px 0px;
}

/*バナー（中）*/
#banner3-area .banner2{
	float:left;
}

#banner3-area .banner2 a,
#banner3-area .banner2 img{
	display:block;
	width:440px;
	height:109px;
	margin:10px auto;
	margin-left:40px;
}
#banner3-area .banner2 img{
	opacity:0.5;
}

#banner3-area #vote{
	background-image:url(../img/banner/vote_banner.png);
	background-position:0px 0px;
}

#banner3-area #trial{
	background-image:url(../img/banner/trial_banner.png);
	background-position:0px 0px;
}

#banner3-area .new_icon{
	margin-left:20px;
}

/*各種戻るボタン*/
.go-to-marmalade{
	display:block;
	width:142px;
	height:25px;
	background-image:url(../img/marmalade-top_btn.png);
	background-position:0px 0px;
	float:left;
}
.go-to-primal{
	display:block;
	width:148px;
	height:15px;
	background-image:url(../img/primal-top_btn.png);
	background-position:0px 0px;
	float:right;
}
.go-to-page-top{
	display:block;
	width:82px;
	height:15px;
	background-image:url(../img/page-top_btn.png);
	background-position:0px 0px;
	float:right;
	margin-left:20px;
}

/*ここからフッター*/
#footer{
	width:100%;
	height:130px;
	margin-top:5px;
	padding-top:15px;
	background-color:#ff6996;
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #FFA3BF),
	color-stop(0.07, #FF6996)
	);
	background-image: -o-linear-gradient(bottom, #FFA3BF 0%, #FF6996 7%);
	background-image: -moz-linear-gradient(bottom, #FFA3BF 0%, #FF6996 7%);
	background-image: -webkit-linear-gradient(bottom, #FFA3BF 0%, #FF6996 7%);
	background-image: -ms-linear-gradient(bottom, #FFA3BF 0%, #FF6996 7%);
	background-image: linear-gradient(to bottom, #FFA3BF 0%, #FF6996 7%);
}
#footer .box{
	width:1000px;
	color:#FFF;
	margin:auto;
	text-align:center;
	position:relative;
	background-image:url(../img/footer.png);
	background-repeat:no-repeat;
	background-position:50% 40%;

}

#footer .product{
	width:808px;
	padding-left:230px;
}
#footer .product table{
	width:330px;
	float:left;
	font-size:80%;
	color:#FFF;
}
#footer .product table th{	text-align:right;
	font-weight:bold;
	color:#FFC;
	text-shadow: 0px 1px 2px rgba(255, 59, 118, 1);
}
#footer .product table td{
	text-align:left;
	padding-left:1em;
	text-shadow: 0px 1px 2px rgba(255, 59, 118, 1);
}

/*フッターSD設定*/
#footer .sd{
	position:absolute;
	width:167px;
	height:149px;
	margin-left:15px;
	margin-top:-25px;
/*テキスト非表示*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#page_top #footer .sd,
#page_graphic #footer .sd,
#page_point #footer .sd
{
	background-image:url(../img/sd1.png);
}
#page_story #footer .sd,
#page_spec #footer .sd
{
	background-image:url(../img/sd2.png);
}
#page_world #footer .sd,
#page_download #footer .sd
{
	background-image:url(../img/sd3.png);
}
#page_character #footer .sd,
#page_campaign #footer .sd
{
	background-image:url(../img/sd4.png);
}