@charset "UTF-8";

/* ----------------------------------------------------
作成日: 2013.06.07
最終更新日: 2015.05.14

common.css： 共通設定(PC版)
---------------------------------------------------- */
body {
	width:100%;
	height:100%;
	font-size:13px;
	font-family:"ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: none;
	line-height:1.6;
	color:#ffffff;
	background:#000;
}

/*html {
	height:100%;
}*/

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

h2,h3 {
	width:0;
	height:0;
	margin:0;
	padding:0;
	line-height:0;
	text-indent:-9999px;
	font-size:0;
}

small {
	margin:0 auto;
	padding:0;
	font-size:10px;
	text-decoration:none;
	display:block;
}

a:link, a:visited {
	color:#0681ff;
	text-decoration:none;
}

a:hover, a:active {
	text-decoration:underline;
}


div#wrapper {
	position:relative;
	width:100%;
	margin:0 auto;
}


/*clearfix*/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}


.clear{
	clear:both;
}

/* ----------------------------------------------------

	header style

---------------------------------------------------- */
#header{
width: 100%;
-webkit-box-shadow:  0px 2px 8px 3px rgba(97, 97, 97, 0.3);
box-shadow:  0px 2px 8px 3px rgba(97, 97, 97, 0.3);
position:relative;
z-index:10;
}
.headingTextArea{
width: 100%;
color:#000;
background:#eeeeee;
font-weight:bold;
line-height:20px;
padding-top:2px;
font-size:10.5px;
text-shadow: 0px 1px 0px #ffffff;
margin:0 auto;
}
.headingTextArea h1{
	max-width: 832px;
	margin:0 auto;
    padding-top: 2px;
    padding-bottom: 2px;
}
.headingTextArea h1 span{
	display:inline-block;
}
.headingTextArea ul{
float:right;
text-align:right;
width:50%;
}
.headingTextArea ul li{
display:inline-block;
margin-left:16px;
}
.headingTextArea li a{
display:inline-block;
padding-right:18px;
background:url(../images/mod_ico_arwR_01.gif) 100% 2px no-repeat;
}

.headerInner{
width: 100%;
border-top:1px solid #e2e2e2;
background:url(../images/header_bg_02.gif) 0 100% repeat-x #ffffff;

}
.headingmainArea{
max-width:852px;
min-height:57px;
margin:0 auto;
padding-top:9px;
clear:both;
}
.headerInner .top-segalogo {
	padding-left:3%;
}
.headerInner .btnTypeB01{
	padding-right:3%;
text-align:right;
margin-top:-36px;
}

br.pc-only {
	display:none;
}

.btnTypeB01 a{
display:inline-block;
color:#fff;
font-size:10px;
padding:10px 16px;
text-shadow: 0px -1px 0px #0772a6;
background: #0c92d4;
background: -moz-linear-gradient(top,  #0c92d4 0%, #0083c2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c92d4), color-stop(100%,#0083c2));
background: -webkit-linear-gradient(top,  #0c92d4 0%,#0083c2 100%);
background: -o-linear-gradient(top,  #0c92d4 0%,#0083c2 100%);
background: -ms-linear-gradient(top,  #0c92d4 0%,#0083c2 100%);
background: linear-gradient(to bottom,  #0c92d4 0%,#0083c2 100%);
-pie-background: linear-gradient(#0c92d4 0%,#0083c2 100%);
font-weight:bold;
text-decoration:none;
border-radius:3px;
position:relative;
behavior:url(/common/scripts/PIE.php);
}
.btnTypeB01 a:hover{
display:inline-block;
color:#fff;
background: #0083c2;
background: -moz-linear-gradient(top,  #0083c2 0%, #0c92d4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0083c2), color-stop(100%,#0c92d4));
background: -webkit-linear-gradient(top,  #0083c2 0%,#0c92d4 100%);
background: -o-linear-gradient(top,  #0083c2 0%,#0c92d4 100%);
background: -ms-linear-gradient(top,  #0083c2 0%,#0c92d4 100%);
background: linear-gradient(to bottom,  #0083c2 0%,#0c92d4 100%);
-pie-background: linear-gradient(#0083c2 0%,#0c92d4 100%);
font-weight:bold;
text-decoration:none;
border-radius:3px;
position:relative;
behavior:url(/common/scripts/PIE.php);
}
.btnTypeB01 span.spw {
        font-weight:bold;
}

.rufund-ban,
.end-ban{
max-width:328px;
width: 50%;
position: absolute;
bottom: 2%;
left: 2%;
}

.rufund-ban{
    bottom:18.5%;
}

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

.headingTextArea,.headingmainArea{
	max-width:832px;
}
.headingText{
	width: 100%;
	padding-left:10px;
    box-sizing: border-box;
}
    
    .rufund-ban{
        bottom:23%;
    }

}

@media screen and (max-width: 540px) {
	.headerInner{
		padding-top:0;
	}
}
@media screen and (max-width: 540px) {
.headingTextArea {
	line-height: 120%;
}
}
@media screen and (max-width: 485px) {
br.pc-only {
	display:block;
}

.btnTypeB01 a{
	height:auto;
	padding:6px;
}
}

@media screen and (max-width: 560px) {
.btnTypeB01 span.spw {
        display:none;
}

}

/* ----------------------------------------------------
コンテンツ
---------------------------------------------------- */
div#contents{
	max-width:852px;
	position:relative;
	z-index: 1;
	margin:0 auto;
}


div#top {
	max-width:852px;
	position:relative;
	z-index: 1;
	margin:0 auto;
}
div#subbg {
	max-width:852px;
	background:url(../images/bg_sub.jpg) no-repeat;
	background-size:100% auto;
}

div#sub{
	min-height:130px;
	margin:0 auto;
}

/*バナー*/

div#top #campaign{
	position: absolute;
	left:44px;
	bottom:30px;
	width:270px;
	/*border:5px solid #caf206;*/
	border:5px solid #C2B9EE;

	/*バナー非掲載
	display:none;*/
}
div#top #campaign a {
        display:block;
}

@media screen and (max-width: 640px) {
div#top #campaign{
	left:2%;
	bottom:3%;
	width:40%;
	border:2px solid #C2B9EE;
}
}

div#sub {
	padding:2%;
}
.dl-sns {
	 overflow: hidden;
}
/*動画*/
.promotionMovie-pc {
	float:left;
    padding-right: 2%;
}
.promotionMovie-sp {
	display:none;

}
.promotionMovie a{
display: block;
width:239px;
height:139px;
background:url(../images/movie_off.jpg) 0 0 no-repeat;
}

.promotionMovie a:hover{
background:url(../images/movie_on.jpg) 0 0 no-repeat;
}

/*DLボタン*/
div#sub .dl {
	padding-top:20px;
}
div#sub .dl li{
	float:left;
	width:160px;
	margin:0 10px 5px 0;
}

div#sub .dl li img {
	height:55px;
	width:auto;
}
div#sub li.app{
	width:185px;
}
div#sub li.google{
	width:186px;
}
div#sub li.amazon{
	width:161px;
}

div#sub .dl li img[src$=".svg"] {
	height:55px;
	width:auto;
}



/*DLボタン下*/
 .dl_article{
	 float:left;
	width: 48%;
    padding: 0 1% 2% 1%;
}

.dl_article li{
	width:173px;
height: 40px;
	text-align:left;
	margin:10px 0 0;
}
.dl_article li.app img[src$=".svg"] {
	width:135px;
	height:40px;
}

.dl_article li.google{
	width:135px;
	}
	
.dl_article li.amazon{
	width:135px;
	}

.dl_article li.amazon img[src$=".svg"] {
	width:135px;
	height:auto;
}


/*SNS*/
div#sub .sns{

}

div#sub .sns li{
	float:left;
	width:75px;
	margin:20px 11px 0 0;
}

div#sub .sns li.sgnnw{
	width:180px;
}
div#sub .sns li.bb{
	width:172px;
}
div#sub .sns li.line{
	width:90px;
	margin:20px 0 0;
}

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

div#sub .sns li,div#sub .sns li.line{
	margin-top:5px;
}
div#sub .dl li img {
	height:46px;
}
div#sub li.app img[src$=".svg"] {
	width:155px;
	height:46px;
}
div#sub li.app,div#sub li.google{
	width:156px;
}
div#sub li.amazon img[src$=".svg"] {
	width:135px;
	height:46px;
}

.img-top-mainimg{
	width: 100%;
}
}
@media screen and (max-width: 810px) {
div#sub .dl {
	padding-top:0;
}
}
@media screen and (max-width: 640px) {
.promotionMovie-pc {
	display:none;
}
.promotionMovie-sp {
	display:block;
	float:none;
	padding-bottom:3%;
	text-align: center;
}
	.promotionMovie-sp a {
		width:100%;
		height:auto;
		box-sizing:border-box;
		margin:0 auto;
	}
.dl-sns {
	overflow: inherit;
}
div#sub .dl {
	text-align: center;
}
div#sub .dl li {
    float: none;
	display:inline-block;
}
div#sub li.app,div#sub li.google,div#sub li.amazon{
	width:auto;
}
div#sub .dl li:last-child {
	margin-right:0px;
}
.dl_article li.amazon{
	width:118px;
	}

}
@media screen and (max-width: 512px) {
div#sub li.app {
	display:block;
	width:100%;
}
div#sub .dl li img {
	height:40px;
}
div#sub li.app img[src$=".svg"] {
	width:135px;
	height:40px;
}
div#sub li.google{
	width:136px;
}
div#sub li.amazon img[src$=".svg"] {
	width:118px;
	height:40px;
}
}
@media screen and (max-width: 323px) {
div#sub li {
	margin: 0 0 5px 0;
}
}

/* ----------------------------------------------------
	game
---------------------------------------------------- */
div#game{

}
div#columnBox{
	max-width: 852px;
	background: url(../images/gameIntoroBg.png) 0 0 no-repeat;
	background-size:100% 100%;
	position: relative;
}

div#columnBox .column-txtbox{
	padding:2% 2% 0 2%;
	margin:0 auto;
	}
	
.columnText{
	width: 48%;
    padding: 0 1% 2% 1%;
float:left;
}

.columnText p{
font-size:13px;
line-height:1.7em;
color:#FFF;
font-weight:bold;
word-spacing:normal;
text-indent:1em;
margin:10px 0 0 10px;
}
.columnSs{
	width: 49%;
    padding: 1% 1% 2% 0%;
	float:right;
	text-align: left;
}
.columnSs img{
	width:99%;
}
.columuCard{
padding:0 2%;
clear:left;
}
.columuCard ul{
text-align: center;
list-style-type: none;
}
.columuCard ul li{
width: 150px;
hegiht:185px;
display:inline-block;
vertical-align: top;

box-sizing: border-box;
}
.columuCard ul li:last-child{
	padding-right:0;
}
.columuCaption{
text-align: center;
	padding: 2%;
}
@media screen and (max-width: 835px) {
.columuCard ul li{
	text-align: center;
}
.columuCard ul li img{
	width:94%;
	height:auto;
	display: inline-block;
}
}
@media screen and (max-width: 640px) {
div#columnBox .column-txtbox{
	padding:2%;
	}
.columnText,.columnSs {
	float:none;
	width: 100%;
	box-sizing: border-box;
}
.columnSs {
	padding:0 2%;
}
.columnSs img{
	width: 100%;

}
}

@media screen and (max-width: 560px) {
.columuCard ul{
padding: 0 3%;
}
}


/* ----------------------------------------------------
バナー
---------------------------------------------------- */
#pageBox{
	position: relative;
	padding:5% 1% 0;
	text-align:center;
}
.pageLeft{
width:48%;
float:left;
padding:0 1% 2% 1%;
}

.pageRight{
width:48%;
float:right;
padding:0 1% 2% 1%;
}

/* ----------------------------------------------------
アプリ説明
---------------------------------------------------- */

#articleBox{
	padding:0 1%;
}

.headingTypeA01{
color:#FFF;
font-size:13px;
padding:6px 12px;
font-weight:bold;
border-bottom:1px solid #e7e7e7;
background: #0e2348;
background: -moz-linear-gradient(top,  #0e2348 0%, #01163b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e2348), color-stop(100%,#01163b));
background: -webkit-linear-gradient(top,  #0e2348 0%,#01163b 100%);
background: -o-linear-gradient(top,  #0e2348 0%,#01163b 100%);
background: -ms-linear-gradient(top,  #0e2348 0%,#01163b 100%);
background: linear-gradient(to bottom,  #0e2348 0%,#01163b 100%);
-pie-background: linear-gradient(#0e2348 0%,#01163b 100%);
border-radius:5px 5px 0 0;
text-shadow: 0px -1px 0px #08908E;
position:relative;
}

.headingTypeA02{
font-weight:bold;
color:#c20000;
margin-bottom:10px;
}
.article-box{
    margin: 0 auto;
width:48%;
padding: 0 1% 2% 1%;
}
.article{
background:#fff;
-webkit-border-radius:6px;
border-radius:6px;

}
.articleApp{
width:400px;
float:right;
}
.articleAppInner{
clear:right;
/*width:160px;*/
margin-top:12px;
}
.appFollowInner{
padding:12px 0 12px 0;
}
.appFollowInner2{
padding:0 0 12px 0;
}
.appLineInner{
padding:0 0 4px 0;
}
.articleInner{
padding:16px 0 20px 4px;
font-size:14px;
}
.articleInner p{
margin-bottom:1em;
}
.tableType01{
width:100%;
}
.tableType01 th,
.tableType01 td{
border-top:1px solid #e7e7e7;
padding:4px 0 ;
padding-right:2px;
}
.tableType01 th{
padding-left:17px;
font-size:13px;
color:#0d3659;
}
.tableType01 td{
color:#666666;
font-size: 10px;
}

table th {
    font-weight: normal;
    text-align: left;
    vertical-align: top;
	width:10em;
}


@media screen and (max-width: 640px) {
.article-box,.dl_article {
	float:none;
	width: 100%;
	box-sizing: border-box;
}
.tableType01 th{
	width:6em;
	padding-left: 13px;
	font-size:11px;
}
.dl_article ul {
	text-align:center;
}
.dl_article li {
	width: auto;
	display: inline-block;
	margin-top: 0;
	margin-right:2%;
	margin-bottom:2%;
}
.dl_article li:last-child {
	margin-right:0;
}
.dl_article li img {
	height:40px;
	width: auto;
}
}
@media screen and (max-width: 512px) {
.dl_article li.app {
    display: block;
    width: 100%;
	text-align:center;
}
}


/* ----------------------------------------------------
トップへ戻る
---------------------------------------------------- */

#pageTop01{
position:fixed;
bottom:12px;
right:0;
z-index:100;
}


/* ----------------------------------------------------
フッター footer
---------------------------------------------------- */

#footer{
	background:url(../images/footer_bg_01.gif) repeat-x ;
	width:100%;
}

.footerInner{
	position:relative;	
	max-width:852px;
	margin:0 auto;
	padding:30px 0 10px;
	font-size:11px;
	color:rgb(102,102,102);
}

.footerInner li{
	margin:0 0 2px;
	}

.footerInner li.logo{
	height:36px;
	line-height:56px;
	margin:0 0 10px;
}
.footerContents {
	padding:0 2%;

}