@charset "UTF-8";
/* CSS Document */
/* ========================================== [ reset ] */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
margin:0;
padding:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
nav ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{
content:'';
content:none;
}
a{
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins{
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark{
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del{text-decoration: line-through;}
abbr[title], dfn[title]{
border-bottom:1px dotted;
cursor:help;
}
table{
border-collapse:collapse;
border-spacing:0;
}
hr{
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select{vertical-align:middle;}
ul {
padding-left:6%;
text-align: left;
}
ol{
padding-left:7%;
text-align: left;
}
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.bold { font-weight: bold;}



/* ===========================================
==============================================
[ ここからPC・スマホ共通スタイル ]
==============================================
===============================================*/
body {
	background: #dafaff;
	text-align: center;
	color: #000;
	-webkit-text-size-adjust: none;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}
#container {
	position: relative;
	padding-top: 20px;
}
div.area-slide {
	position: relative;
	margin-bottom: 15px !important;
}
.w100 {width:100%;}
.w70 {width:70%;}

.contents-ttl{
    line-height:0;
}
.contents-ttl img{
    width:100%;
    max-width:640px;
}

/* =============================
	[ トップへ戻る系ボタン ]
==============================*/
.bt-back {
	width: 100%;
	margin-bottom: 30px;
	padding-top: 20px;
}
.bt-back a {
	display: inline-block;
	width: 300px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	color:#111;
	font-weight: bold;
	background: rgb(238,238,238);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(170,170,170,1)));
	background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(170,170,170,1) 100%);
	background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(170,170,170,1) 100%);
	background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(170,170,170,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#aaaaaa',GradientType=0 );
	border: #555 1px solid;
}
.bt-back a:hover {
	opacity: 0.9;
}

/* =============================
	[ 問題が解決しない場合はこちらボタン ]
==============================*/
.bt-blue {
	width: 100%;
	margin-bottom: 30px;
	padding-top: 20px;
	clear: both;
}
.bt-blue a {
	display: inline-block;
	width: 250px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	color:#fff;
	font-weight: bold;
	font-size: 15px;
	background: rgb(0,183,234);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,175,255,1)), color-stop(100%,rgba(76,139,255,1)));
	background: -webkit-linear-gradient(top, rgba(131,175,255,1) 0%,rgba(76,139,255,1) 100%);
	background: linear-gradient(to bottom, rgba(131,175,255,1) 0%,rgba(76,139,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83afff', endColorstr='#4c8bff',GradientType=0 );
	box-shadow: 0px 2px 0px #25468b;
	border-radius: 5px;
}
.bt-blue a:hover {
	opacity: 0.9;
}

/* =============================
	[ お問い合わせフォーム共通 ]
==============================*/
.frame .details .details-inner {
	width: 100%;
	padding-bottom: 20px;
}
.frame .details .details-inner form {
	  width: 80%;
  margin: 0 auto;
}

.frame .details section {
	margin-bottom: 20px;
  text-align: left;
}
.frame .details section h2,
.frame .details section input,
.frame .details section textarea,
.frame .details section select {
	margin-bottom: 5px;
}

.frame .details section select {
	cursor: pointer;
}
.frame .details section select,
.frame .details section textarea,
.frame .details section input {
	width: 100%;
}
.tx-red {
	color: red;
}
.tx-blue {
	color: #0054ff;
	font-size: 15px;
}
.tx-attention {
	font-size: 10px;
	font-weight: normal;
	margin-left: 5px;
}

/* =============================
	[ ページネーション共通 ]
==============================*/
.faq-page .pagenation {
  text-align: center;
  margin: 0px 0 20px 0;
  color: white;
}
.pagenation {
  text-align: center;
  margin: 20px 0 0 0;
  color: white;
}
.pagenation ul {
	padding: 0;
	text-align: center;
}
.pagenation li {
  display: inline-block;
}
.pagenation li a {
  display: block;
  position: relative;
  font-size: 18px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0;
  color: #6ab0ef;
  text-decoration: underline;
}
.pagenation li a:hover {
  background: #33aeff;
  color: #fff;
}
.pagenation .page-prev a span {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 40px;
  font-size: 12px;
  text-align: center;
}
.pagenation .page-prev a span:after {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  content: "";
  background: url(../../images/official/bt_arrow.png) left -80px no-repeat;
}
.pagenation .page-prev a span:hover:after {
	background-position: left -120px;
}
.pagenation li > span {
  display: block;
  position: relative;
  font-size: 18px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: white;
}
.pagenation .page-next a span {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 40px;
  font-size: 12px;
  text-align: center;
}
.pagenation .page-next a span:after {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  content: "";
  background: url(../../images/official/bt_arrow.png) left 0px no-repeat;
}
.pagenation .page-next a span:hover:after {
	background-position: left -40px;
}


/* =============================
	[ フッター共通 ]
==============================*/
footer {
    background:#006a8e;
    padding-top:20px;
    color:#ddd;

}
footer img {
	margin-bottom: 1%;
}
footer p {
	padding-bottom: 1%;
}


/* =============================
	[ お知らせのカテゴリアイコン用 ]
==============================*/
.ico {
	font-size: 10px;
	width: 110px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	display: inline-block;
	margin: 12px 0 0 5px;
	vertical-align: middle;
	float: left;
}
.ico-long {
	font-size: 10px;
	width: 201px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	display: inline-block;
	margin: 12px 0 0 5px;
	vertical-align: middle;
	float: left;
}


/* =============================
	[ 規約ページ関連]
==============================*/
dl {
	overflow: hidden;
	font-size: 13px;
}
dl dt {
	display: inline-block;
	width: 26%;
	float: left;
	text-align: right;
	margin-bottom: 15px;
	clear: both;
	line-height: 1.5;
	font-weight: bold;
}
dl dt:after {
	content: "："
}
dl dd {
	display: inline-block;
	width: 67%;
	float: right;
	text-align: left;
	margin-right: 4%;
	margin-left: 1%;
	line-height: 1.5;
	margin-bottom: 18px;
}

table.table010 {
  margin-top: 0.2em;
  margin-bottom: 1em;
  width: 95%;
  border-collapse: collapse;
  border: solid 1px #999;
  font-size: 14px;
  line-height: 1.3;
  margin: 0 auto 30px;
}
table.table010 caption {
  text-align: left;
  font-size: 16px;
}
table.table010 th,
table.table010 td {
  border: solid 1px #999;
  padding: 3px 0;
  vertical-align: middle;
}
table.table010 th {
  background: #333;
  text-align: center;
  color: #666;
}
table.table010 td.course {
  text-align: center;
  font-weight: bolder;
}
table.table010 td.time,
table.table010 td.fee {
  text-align: right;
}






/* ===========================================
==============================================
[ ここからスマホ専用のスタイル ]
==============================================
===============================================*/
@media only screen and (max-width: 667px) {

	header {
		background: url(../../images/official/bg_main.jpg) center top no-repeat;
		background-size: 125%;
		padding-top: 70%;
	}
	header .header-inner {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	header .header-inner .title {
		width: 75%;
		margin: -50% auto 0 auto;
	}
	header .header-inner h1 {
		text-align: center;
		margin: -160px auto 0px auto;
	}
	header .header-inner h1 img {
		width: 100%;
	}
	header .header-inner .regist {
		display: block;
		margin: 0 20px;
		overflow: hidden;
	}
	header .header-inner .regist .tx-inst {
        display:none;
	}
	header .header-inner .regist .tx-inst-sp {
		width: 33%;
		float: left;
		margin-top: 5px;
	}
	header .header-inner .regist ul{
        float:right;
        list-style:none;
		margin-top: 5px;
        width:60%;
    }
	header .header-inner .regist ul .bt-inst {
		float: left;
        width:45%;
        margin-right:5px;
    }
	header .header-inner .regist ul .bt-inst img{
        width:100%;

    }

	header .header-inner .regist .bt-inst:hover {
		opacity: 0.8;
	}

	/* =============================
	[ グローバルナビ ]
	==============================*/
	nav {
		width: 100%;
		margin-top: -8%;
		margin-bottom: 3%;
        background-color:#003973;
        padding-bottom:6px;
        border-top:#fff 2px solid;
        border-bottom:#fff 2px solid;
	}
	nav ul {
		display: block;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		padding: 0;
		text-align: center;
	}
	nav ul:before {
		display: block;
		width: 100%;
		height: 6px;
		margin: 0 auto;
		content: ""
	}
	nav ul li {
		float: left;
		width: 50%;
		height: 57px;
		background: url(../../images/official/nav_base.jpg) repeat-x;
        border-bottom:#006188 solid 1px;
        border-top:#00c4dc solid 1px;
	}
	nav ul li:hover {
		background: url(../../images/official/nav_base_on.jpg) repeat-x bottom;
	}
	nav ul li.on {
		background: url(../../images/official/nav_base_on.jpg) repeat-x bottom;
	}
	nav ul li p {
		display: block;
		width: 100%;
		height: 100%;
		background: url(../../images/official/nav_base_light.png);
        background-size:100%;
	}
	nav ul li a {
		display: block;
		height: 100%;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	nav ul .nav-game a {
		background-image: url(../../images/official/nav_title_01.png);}
	nav ul .nav-play a{
		background-image: url(../../images/official/nav_title_02.png);}
	nav ul .nav-news a{
		background-image: url(../../images/official/nav_title_03.png);}
	nav ul .nav-faq a{
		background-image: url(../../images/official/nav_title_04.png);}

	nav ul li a span {
		position: relative;
		z-index: -1;
	}
	nav ul:after {
		display: block;
		width: 100%;
		height: 6px;
		margin: 0 auto;
		background: url(../../images/official/nav_bar.jpg) repeat-x;
		margin-top: 110px;
		content: ""
	}

	/* =============================
	[ パンくずリスト ]
	==============================*/
	.breadcrumbs {
		display: none;
	}
	div[class^='area-']{
		margin-bottom: 30px;
	}
	/* ▼▼▼ 151023修正ここから ▼▼▼ */
	/* =============================
	[ ページタイトル ]
	==============================*/
	.page-ttl {
		text-align: left;
		margin-left: 15px;
		margin-bottom: 10px;
		font-size: 13px;
	}
	/* ▲▲▲ 151023修正ここまで ▲▲▲ */

	/* =============================
	[ ローテバナー ]
	==============================*/
	#rotation-inner {
		position: relative;
		width: 100%;
		margin: 0 auto 10px auto;
	}
	#rotation-inner > ul {
		height: auto;
		overflow: hidden;
		padding: 0;
		text-align: center;
	}
	#rotation-inner > ul li {
		float: left;
		text-align: center;
	}
	#rotation-inner > ul li a {
		display: block;
		width: 100%;
		background: #fff;
	}
	#rotation-inner > ul li a img {
		width: 100%;
		height: auto;
		margin: 0px auto;
		-webkit-transform-style: preserve-3d;
	}
	.slide-controler {
		display: none;
	}
	.pagedots {
		width: 100%;
	}
	.pagedots ul {
		position: relative;
		margin: 6px 10px;
		text-align: center;
		padding: 0;
	}
	.pagedots li {
		display: inline-block;
		margin-left: 10px;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #9ba4ac;
	}
	.pagedots li:first-child {
		margin-left: 0px;
	}
	.pagedots li.on {
		background: #19bfff;
	}


	/* =============================
	[ お知らせ ]
	==============================*/
	.area-news {
		width: 100%;
	}
	.none {
		margin-top: 30px;
	}
	.area-news .title {
		display: none;
	}
	.area-news .list-inner {
		width: 95%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	.area-news .list-inner .list {
		margin-bottom:5px;
		width: 100%;
		height: 43px;
		background: #fff;
		background-size: contain;
		list-style: none;
		border: #003973 1px solid;

	}
	.area-news .list-inner .list:hover {
		opacity: 0.8;
	}
	.area-news .list-inner .list a {
		color: #333;
		display: block;
		height: 42px;
		text-align: left;
		position: relative;
	}
	.area-news .list-inner .list a:before {
		display: inline-block;
		vertical-align: middle;
		margin: 0 5px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.area-news .list-inner .list .newslist-1:before {
		background-image: url(../../images/official/news_icon_01.png);
	}
	.area-news .list-inner .list .newslist-2:before {
		background-image: url(../../images/official/news_icon_02.png);
	}
	.area-news .list-inner .list .newslist-3:before {
		background-image: url(../../images/official/news_icon_03.png);
	}
	.area-news .list-inner .list a div {
		display: inline-block;
		max-width: 70%;
		vertical-align: top;
		margin-left: 60px;
		margin-top: 3px;
		font-size: 14px;
	}
	.area-news .list-inner .list a div.ptn-02 {
		display: inline-block;
		max-width: 60%;
		margin-left: 5px;
		margin-top: 6px;
		font-size: 14px;
	}
	.area-news .list-inner .list a div.ptn-02.long {
		display: inline-block;
		max-width: 30%;
		margin-left: 5px;
		margin-top: 6px;
		font-size: 14px;
	}
	.area-news .list-inner .list a p {
		display: -webkit-box;
		height: 35px;
		overflow : hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		line-height: 16px;
	}
	.area-news .list-inner .list a span {
		color: #555;
		margin-bottom: 6px;
		display: block;
		font-size: 12px;
	}



	/* =============================
	[ お知らせページ専用 ]
	==============================*/
	.news-page{
        padding-bottom:20px;
        background-color:#fff;
    }
	.news-page .area-news .frame {
		position: relative;
		width: 95%;
		margin: 0 auto;
		border: #555 1px solid;
		padding-bottom: 30px;
		overflow: hidden;
	}
	.news-page .area-news .frame .newstitle {
		display: block;
		height: auto;
		font-size: 14px;
		text-align: left;
		margin-left: 50px;
		margin-bottom: 20px;
		padding-top: 15px;
		vertical-align: middle;
		font-weight: bold;
	}
	.news-page .area-news .frame .newstitle.ptn-02 {
		display: inline-block;
		width: 90%;
		font-size: 14px;
		text-align: left;
		margin-left: 0px;
		margin-bottom: 20px;
		padding-top: 15px;
		font-weight: bold;
	}
	.news-page .area-news .frame .newstitle:before {
		display: inline-block;
		vertical-align: middle;
		margin: 3px 5px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.news-page .area-news .frame .newslist-1:before {
		background-image: url(../../images/official/news_icon_01.png);
	}
	.news-page .area-news .frame .newslist-2:before {
		background-image: url(../../images/official/news_icon_02.png);
	}
	.news-page .area-news .frame .newslist-3:before {
		background-image: url(../../images/official/news_icon_03.png);
	}
	.news-page .area-news .frame .newstitle.policy {
		margin-left: 10px;
		font-size: 18px;
	}
	.news-page .area-news .frame .data {
		text-align: right;
		margin-right: 20px;
		margin-bottom: 20px;
		font-size: 12px;
	}
	.news-page .area-news .frame .details {
		width: 95%;
		margin: 0 auto;
		line-height: 1.5;
		text-align: left;
	}


	/* =============================
	[ twitter ]
	==============================*/
	.area-twitter {
		width: 90%;
		margin: 0 auto;
	}
	.area-twitter .title {
		display: none;
	}
	.twitter-timeline {
		width:100%;
		height: 250px;
	}

	.area-fixed-bnr ul {
		padding: 0;
		text-align: center;
	}
	.area-fixed-bnr ul li img {
		width: 100%;
        margin-bottom:10px;
	}

	/* =============================
	[ ムービー ]
	==============================*/
	.area-movie {
		position: relative;
		margin: 0 auto;
		width: 90%;
		padding: 51.25% 0 0 0;
	}
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	/* =============================
	[ ゲーム紹介ページ専用 ]
	==============================*/
	#mainblock{
		height:auto;
		margin:0 auto;
        background-color:#fff;
		}
	#mainblock  .fixwidth{
        line-height:0 !important;
    }
	#mainblock .fixwidth img,
    	#mainblock h2 img {
		width: 100%;
	}
	#photo img {
		width: 100%;
	}
	#chara{
		padding:0;
		margin: 0 0 70px 0;
		width:100%;
		text-align:center;
		overflow:hidden;
		}
	#photo {
		position: relative;
	}
	#photo ul{
		display: block;
		padding-left: 0px;
	}
	#photo .pic{
		vertical-align:bottom;
		list-style: none;
	}
	#photo .pic img{
		display: none;
	}
	#photo .pic.on img{
		display: block;
	}
	#navi {
		clear:both;
	}
	#navi ul{
		font-size:0;
		list-style:none;
		margin:0;
		padding:0;
	}
	#navi li{
		width: 20%;
		display:inline-block;
		padding:0;
		margin:0;
		cursor: pointer;
	}
	#navi li.on{
		opacity: 0.4;
		filter: alpha(opacity=40);
	}
	.charaicon{
		width:100%;
	}
	.mar_top20 {
		margin:20px auto 0px auto;
	}
	.clear{
		clear: both;
	}



	/* =============================
	[ FAQページ専用 ]
	==============================*/
	div.area-faq {
		width: 100%;
		margin-bottom: 20px;
	}

	div.area-faq .category-ttl {
		text-align: left;
		margin: 20px 0 10px 15px;
		font-size: 18px;
		font-weight: bold;
		color: #003973;
	}
    div.area-faq .search.ttl{color:#333}

	div.area-faq .search-inner {
		width: 90%;
		margin: 0 auto;
		border-bottom: #888 1px dotted;
	}
	div.area-faq .list-inner {
		padding: 0;
		text-align: center;
		list-style: none;
	}
	div.area-faq .border {
		padding: 0;
		text-align: center;
		list-style: none;
		border-top: #888 1px dotted;
	}
	div.area-faq .search {
		text-align: left;
		margin: 15px 0 15px 0px;
		font-size: 14px;
		font-weight: bold;
	}
	div.area-faq .search.ttl {
		text-align: left;
		margin-left: 4%;
		font-size: 15px;
		font-weight: bold;
		color: #333
	}
	div.area-faq .search a {
		color: #6ab0ef;
		line-height: 1.6;
	}
	div.area-faq .search .highlight {
	  margin: 0 2px;
	  padding: 0 3px;
	  background: #d39f00;
	  color: #fff;
	  font-weight: bold;
	}
	.area-faq .list-inner {
		width: 95%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	.area-faq .list-inner .list {
		position: relative;
		list-style: none;
		margin-bottom:10px;
		width: 100%;
		height: auto;
		background: rgb(212,228,239);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(212,228,239,1)), color-stop(100%,rgba(134,174,204,1)));
		background: -webkit-linear-gradient(top, rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%);
		background: linear-gradient(to bottom, rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=0 );
		border-radius: 5px;
		border: #356 1px solid;
	}
	.area-faq .list-inner .list:hover {
		opacity: 0.9;
	}
	.area-faq .list-inner .list a {
		display: block;
		text-align: left;
		vertical-align: middle;
	}
	.area-faq .list-inner .list a:before {
		display: inline-block;
		vertical-align: middle;
		margin: 4px 0px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(../../images/official/icon_q.png);

	}
	.area-faq .list-inner .list a p {
		color: #0054ff;
		display: inline-block;
		max-width: 90%;
		vertical-align: top;
		font-size: 15px;
		padding: 13px 13px 13px 45px;
	}

	.area-category {
		width: 100%;
	}
	.area-category ul {
		display: block;
		width: 95%;
		margin: 0 auto;
		padding: 10px 0 5px 0;
		background: #ccc;
		box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.4) inset;
		border-radius: 5px;
	}
	.area-category ul li {
		list-style: none;
		margin:0px auto 10px auto;
		width: 95%;
		background: rgb(255,168,76);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1)));
		background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
		border-radius: 5px;
		border: #e86c03 1px solid;
	}
	.area-category ul .list:hover {
		opacity: 0.8;
	}
	.area-category ul li a {
		text-decoration: none;
		display: block;
		text-align: center;
		height: 42px;
		line-height: 42px;
	}
	.area-category ul li a p {
		color: white;
		font-weight: bold;
	}

.faq-page{
    background:#fff;
    padding-bottom:20px;
}

	.faq-page .area-faq .frame {
		position: relative;
		width: 95%;
		margin: 0 auto;
		background: #fff;
		border: #003973 1px solid;
		overflow: hidden;
	}
	.faq-page .area-faq .frame .faqtitle {
		display: block;
		height: auto;
		font-size: 14px;
		text-align: left;
		margin-left: 50px;
		margin-bottom: 20px;
		  padding-right: 10px;
		padding-top: 15px;
		vertical-align: middle;
		font-weight: bold;
		color: #0054ff;
	}
	.faq-page .area-faq .frame .faqtitle:before {
		display: inline-block;
		vertical-align: middle;
		margin: 3px 5px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(../../images/official/icon_q.png);
	}
	.faq-page .area-faq .frame .details {
		width: 95%;
		margin: 0 auto;
		line-height: 1.4;
		text-align: left;
	}



	/* =============================
	[ 検索枠 ]
	==============================*/
	div.area-search {
		width: 100%;
		margin-bottom: 60px;
	}
	form.search {
		width: 90%;
		margin: 0 auto;
	}
	form.search div {
		padding: 1px 0;
	}
	form.search input.textBox {
		width: 240px;
		margin: 0 4px 0 5px;
		padding: 6px 0;
		background-color: #ffffff;
		border: none;
		color: #000000;
	}
	form.search input.btn {
		background: -webkit-gradient(linear, left top, left bottom, from(#80CCE6), color-stop(0.05,#80CCE6), color-stop(0.05,#09C), color-stop(0.95,#069), color-stop(0.95,#00293D), to(#00293D));
		border: 1px solid #333;
		border-radius: 5px;
		color: #FFF;
		width: 80px;
		padding: 8px 0;
		font-weight: bold;
		letter-spacing: 0.3em;
		cursor: pointer;
		margin: 10px auto;
	}
	form.search input.btn:hover {
		opacity: 0.9;
	}


	/* =============================
	[ supportページ専用 ]
	==============================*/
	div.area-support {
		width: 100%;
		margin-bottom: 20px;
	}
	.area-support .area-error {
		width: 80%;
		margin: -20px auto 10px;
		border: red 1px solid;
	}
	.area-support .area-error ul {
		width: 95%;
		margin: 0 auto;
	}
	.area-support .area-error ul li {
		font-size: 12px;
		text-align: left;
		color: red;
		margin: 5px 0 5px 1em;
		list-style: none;
		text-indent: -1em;
	}
	.area-support ul li .question:before {
		display: inline-block;
		vertical-align: middle;
		margin: 4px 0px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(../../images/official/icon_q.png);
	}
	.area-support ul li a p {
		color: #0054ff;
		display: inline-block;
		max-width: 90%;
		vertical-align: top;
		margin-left: 40px;
		margin-right: 10px;
		margin-top: 13px;
		font-size: 15px;
		padding-bottom: 13px;
	}
	.support-page .area-support .frame {
		position: relative;
		width: 95%;
		margin: 0 auto;
		background: #fff;
		border: #003973 1px solid;
	}
	.support-page .area-support .frame {
		width: 95%;
	}
	.support-page .area-support .frame p {
		width: 95%;
		text-align: left;
		font-size: 13px;
		line-height: 1.6;
		margin: 0 auto;
		padding: 10px 0 40px;
	}
	.support-page .area-support .frame p.message {
		text-align: center;
		margin-top: 40px;
		margin-bottom: -10px;
		width: 60%;
	}
	.support-page .area-support .frame p.message .ttl {
		font-size: 16px;
		font-weight: bold;
		color: red;
	}
	.area-submit ul {
		padding: 0;
		text-align: center;
	}
	.area-submit ul li {
		display: inline-block;
		width: 130px;
		height: 40px;
		line-height: 40px;
		text-decoration: none;
		color:#fff;
		font-weight: bold;
		font-size: 15px;
		  margin: 0 3px 10px;
		text-align: center;
	}
	.support-page .area-support .frame .area-submit ul li a {
		display: inline-block;
	}
	.support-page .area-support .frame .area-submit ul li p {
		max-width: 100%;
		width: 100%;
		text-align: center;
		padding: 10px 0;
	}
	.area-submit ul li.bt-rev {
		background: rgb(0,183,234);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,175,255,1)), color-stop(100%,rgba(76,139,255,1)));
		background: -webkit-linear-gradient(top, rgba(131,175,255,1) 0%,rgba(76,139,255,1) 100%);
		background: linear-gradient(to bottom, rgba(131,175,255,1) 0%,rgba(76,139,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83afff', endColorstr='#4c8bff',GradientType=0 );
		box-shadow: 0px 2px 0px #25468b;
		border-radius: 5px;
	}

	.area-submit ul li.bt-done {
		background: rgb(255,168,76);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1)));
		background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
		box-shadow: 0px 2px 0px #a84d00;
		border-radius: 5px;
		border: #a84d00 1px solid;
	}




	/* =============================
	[ ストアアイコン ]
	==============================*/
	.area-store {
		display: block;
		width: 100%;
	}
	.area-store ul {
		margin: 0 auto;
		width: 320px;
		padding: 0;
		text-align: center;
	}
	.area-store ul li {
		margin: 0 5px;
		display: inline-block;
		vertical-align: middle;
		width: 40%;
	}
	.area-store ul li img {
		width: 100%;
	}

	/* =============================
	[ SNSアイコン ]
	==============================*/
	.area-sns {
		display: block;
		width: 100%;
	}
	.area-sns ul {
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}

	.area-sns ul li {
		display: inline-block;
   		margin: 0 10px 10px;
		vertical-align: top;
	}


	/* =============================
	[ フッター ]
	==============================*/
	footer {
		margin: 0 auto;
		padding-bottom: 10px;
	}
	footer ul {
		display: block;
		margin: 0 auto 20px auto;
		list-style: none;
		padding: 0;
		text-align: center;
	}
	footer ul li {
		margin:0 auto 5px auto;
		width: 90%;
		height: 43px;
		background: url(../../images/official/footer_bt_base.jpg) top left repeat-x ;
		background-size: contain;
		border: #003973 1px solid;

	}
	footer ul li:hover {
		opacity: 0.8;
	}
	footer ul li a {
		color: #eee;
		display: block;
		height: 42px;
		text-align: left;
		background: url(../../images/official/news_icon_00.png) right center no-repeat;
		position: relative;
	}
	footer ul li a:before {
		display: inline-block;
		vertical-align: middle;
		margin: 0 5px;
		content: "";
		width: 20px;
		height: 20px;
		position: absolute;
		left: 10px;
		top: 11px;
		background-repeat: no-repeat;
		background-size: contain;
	}
	footer ul li .support:before {
		background-image: url(../../images/official/icon_footer_01.png);
	}
	footer ul li .regist:before {
		background-image: url(../../images/official/icon_footer_02.png);
	}
	footer ul li .transactions:before {
		background-image: url(../../images/official/icon_footer_03.png);
	}
	footer ul li .settlement:before {
		background-image: url(../../images/official/icon_footer_04.png);
	}
	footer ul li .policy:before {
		background-image: url(../../images/official/icon_footer_05.png);
	}
	footer ul li a span {
		display: inline-block;
		margin-left: 40px ;
		padding-top: 14px;
		font-size: 14px;
	}
	footer .copy {
		font-size: 10px;
		margin: 10px 0 0 0;
	}
}



	/* =============================
	[ 遊び方ナビ ]
	==============================*/
	#htpmenu {
		width: 100%;
		margin-top: 10px;
		margin-left:5px;
	}
	#htpmenu ul {
		display: block;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		padding: 0;
		text-align: center;
		list-style-type:none;
	}

	#htpmenu ul li {
		float: left;
		width: 25%;
		height: 50px;
		background: url(../../images/official/htp_base.jpg) repeat-x;
		margin-left: -2px;
	}

	#htpmenu ul li.on {
		background: url(../../images/official/htp_menu_on.jpg) repeat-x;
	}
	#htpmenu ul li p {
		display: block;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}
	#htpmenu ul li a {
		display: block;
		width: 100%;
		height: 100%;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	#htpmenu ul .menu-deck a {
		background-image: url(../../images/official/htp_menu_01_deck.png);}
	#htpmenu ul .menu-search a{
		background-image: url(../../images/official/htp_menu_02_searchp.png);}
	#htpmenu ul .menu-raid a{
		background-image: url(../../images/official/htp_menu_03_raid.png);}
	#htpmenu ul .menu-arena a{
		background-image: url(../../images/official/htp_menu_04_arena.png);}

	#htpmenu ul .menu-deck a:hover {
		background-image: url(../../images/official/htp_menu_01_deck_on.png);}
	#htpmenu ul .menu-search a:hover{
		background-image: url(../../images/official/htp_menu_02_searchp_on.png);}
	#htpmenu ul .menu-raid a:hover{
		background-image: url(../../images/official/htp_menu_03_raid_on.png);}
	#htpmenu ul .menu-arena a:hover{
		background-image: url(../../images/official/htp_menu_04_arena_on.png);}

	#htpmenu ul li a span {
		position: relative;
		z-index: -1;
	}











/* ===========================================
==============================================
[ ここからPCブラウザ用のスタイル ]
==============================================
===============================================*/

@media only screen and (min-width: 668px) and (max-width: 9999px) {

	header {
		background: url(../../images/official/bg_main02.jpg) center top no-repeat #fff;
		background-size: 1000px;
		height: 400px;
	}
	header .header-inner {
		display: block;
		width: 780px;
		height: 400px;
		margin: 0 auto;
	}
	header .header-inner h1 {
		text-align: center;
	}
	header .header-inner .title h1 img {
		width: 480px;
		margin-top: 130px;
	}
	header .header-inner .regist {
		margin-top: 0px;
	}
	header .header-inner .regist p {
		width: 404px;
		height: 51px;
		background:url(../../images/official/head_tx_inst.png);
		float: left;
		margin-top: 0px;
	}
	header .header-inner .regist p span {
		position: relative;
		z-index: -1;
		color: #000;
	}


	header .header-inner .regist .tx-inst{
        float:left;
        margin-right:20px;
    }
	header .header-inner .regist .tx-inst-sp{display:none;}
	header .header-inner .regist ul{
        list-style:none;
    }
	header .header-inner .regist ul li{
        display:inline;
    }

	header .header-inner .regist ul li img {
        height:50px;

	}

	/* =============================
	[ グローバルナビ ]
	==============================*/
	nav {
		background:  url(../../images/official/nav_bg.jpg) repeat-x center top;
	}
	nav ul {
		width: 100%;
		margin: 0 auto;
		max-width: 640px;
		overflow: hidden;
		padding: 0;
		text-align: center;
	}
	nav ul li {
		display: inline-block;
		text-align: center;
		line-height: 95px;
		width: 25%;
		float: left;
	}
	nav ul li a {
		position: relative;
		display: block;
		width: 160px;
		height: 95px;
	}
	nav ul li a span {
		position: relative;
		z-index: -1;
	}
	nav ul .nav-game a {
		background: url(../../images/official/nav_menu.jpg) no-repeat 0 0;}
	nav ul .nav-play a{
		background: url(../../images/official/nav_menu.jpg) no-repeat -160px 0;}
	nav ul .nav-news a{
		background: url(../../images/official/nav_menu.jpg) no-repeat -320px 0;}
	nav ul .nav-faq a{
		background: url(../../images/official/nav_menu.jpg) no-repeat -480px 0;}

	nav ul .nav-game a:hover {background-position: 0px -95px;}
	nav ul .nav-play a:hover {background-position: -160px -95px;}
	nav ul .nav-news a:hover {background-position: -320px -95px;}
	nav ul .nav-faq a:hover {background-position: -480px -95px;}

	nav ul .nav-game.on a {background-position: 0px -95px;}
	nav ul .nav-play.on a {background-position: -160px -95px;}
	nav ul .nav-news.on a {background-position: -320px -95px;}
	nav ul .nav-faq.on a {background-position: -480px -95px;}

	nav ul .nav-game:after {
		position: absolute;
		top: 0;
		left: 0;
		background: url(../../images/official/nav_menu.jpg) 0 bottom no-repeat;
	}


	/* =============================
	[ パンくずリスト ]
	==============================*/
	.breadcrumbs {
		width: 640px;
		margin: 0 auto 20px;
        background:#fff;
        border-bottom:2px #003973 solid;
	}
	.breadcrumbs p {
		text-align: left;
		font-size: 12px;
		padding: 10px 0 10px;
		margin-left: 20px;
	}
	.breadcrumbs p a {
		color: #003973;
	}
	/* ▼▼▼ 151023修正ここから ▼▼▼ */
	/* =============================
	[ ページタイトル ]
	==============================*/
	.page-ttl {
		text-align: left;
		margin-left: 15px;
		margin-bottom: 10px;
	}
	/* ▲▲▲ 151023修正ここまで ▲▲▲ */

	/* =============================
	[ ローテバナー ]
	==============================*/
	div.area-slide {
		position: relative;
		width: 640px;
		margin: 0 auto 10px;
	}
	#rotation-inner {
		position: relative;
		width: 640px;
		margin: 0 auto 10px auto;
	}
	#rotation-inner > ul {
		height: auto;
		overflow: hidden;
		padding: 0;
		text-align: center;
	}
	#rotation-inner > ul li {
		float: left;
		text-align: center;
	}
	#rotation-inner > ul li a {
		display: block;
		width: 640px;
		background: #fff;
	}
	#rotation-inner > ul li a img {
		width: 100%;
		height: auto;
		margin: 0px auto;
		-webkit-transform-style: preserve-3d;
	}
	.slide-controler {
	}
	.slide-controler .slide-prev {
		position: absolute;
		top: 70px;
		left: -25px;
		display: block;
		width: 25px;
		height: 40px;
		border-radius: 10px 0 0 10px;
		background: #555 url(../../images/official/ico_arrow_top_l.png) center no-repeat;
		background-size: 20px auto;
		cursor: pointer;
		opacity: 0.9;
	}
	.slide-controler .slide-next {
		position: absolute;
		top: 70px;
		right: -25px;
		display: block;
		width: 25px;
		height: 40px;
		border-radius: 0 10px 10px 0;
		background: #555 url(../../images/official/ico_arrow_top_r.png) center no-repeat;
		background-size: 20px auto;
		cursor: pointer;
		opacity: 0.9;
	}
	.pagedots {
		width: 100%;
	}
	.pagedots ul {
		position: relative;
		margin: 6px 10px;
		text-align: center;
		padding: 0;
}
	.pagedots li {
		display: inline-block;
		margin-left: 10px;
		width: 10px;
		height: 10px;
		border-radius: 5px;
		background: #9ba4ac;
		cursor: pointer;
	}
	.pagedots li:first-child {
		margin-left: 0px;
	}
	.pagedots li.on {
		background: #19bfff;
	}
	.area-set {
		display: block;
		max-width: 640px;
		margin: 0 auto 30px auto;
		overflow: hidden;
		padding:  10px 0  5px 0;
        background:#fff;
	}


	/* =============================
	[ お知らせ ]
	==============================*/
	.area-news {
		width: 46.5%;
		float: left;
		margin: 0 10px;
	}
	.area-news .title {
		display: block;
		padding: 5px;
		background: #006a8e;
		margin-bottom: 5px;
        color:#fff;
	}
	.area-news .list-inner {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		list-style: none;
	}
	.area-news .list-inner .list {
		margin-bottom:5px;
		width: 99.5%;
		height: 43px;
		background-size: contain;
		border: #003973 1px solid;
        background:#fff;

	}
	.area-news .list-inner .list:hover {
		opacity: 0.8;
	}
	.area-news .list-inner .list a {
		color: #333;
		display: block;
		height: 42px;
		text-align: left;
		position: relative;
	}
	.area-news .list-inner .list a:before {
		display: inline-block;
		vertical-align: middle;
		margin: 0 5px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.area-news .list-inner .list .newslist-1:before {
		background-image: url(../../images/official/news_icon_01.png);
	}
	.area-news .list-inner .list .newslist-2:before {
		background-image: url(../../images/official/news_icon_02.png);
	}
	.area-news .list-inner .list .newslist-3:before {
		background-image: url(../../images/official/news_icon_03.png);
	}
	.area-news .list-inner .list a div {
		display: inline-block;
		max-width: 70%;
		margin-left: 60px;
		margin-top: 3px;
		font-size: 13px;
	}
	.area-news .list-inner .list a div.ptn-02 {
		display: inline-block;
		max-width: 60%;
		margin-left: 7px;
		margin-top: 8px;
		font-size: 13px;
	}
	.area-news .list-inner .list a div.ptn-02.long {
		display: inline-block;
		max-width: 30%;
		margin-left: 7px;
		margin-top: 8px;
		font-size: 13px;
	}
	.area-news .list-inner .list a p {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
	}
	.area-news .list-inner .list a span {
		color: #aaa;
		margin-bottom: 2px;
		display: block;
		font-size: 11px;
	}


	/* =============================
	[ お知らせページ専用 ]
	==============================*/
	.news-page {
		margin-bottom: 20px;
	}
	.news-page .area-set {
		width: 100%;
	}
	.news-page .area-set .area-news {
		width: 640px;
		margin: 0 auto;
	}
	.news-page .area-news .list-inner {
		width: 85%;
		margin: 0 auto;
		list-style: none;
	}
	.news-page .area-news .list-inner .list {
		border-left: #555 1px solid;
		border-right: #555 1px solid;
	}
	.news-page .area-news .frame {
		position: relative;
		width: 90%;
		margin: 0 auto;
		padding-bottom: 30px;
		overflow: hidden;
	}
	.news-page .area-news .frame .newstitle {
		display: block;
		height: auto;
		font-size: 18px;
		text-align: left;
		margin-left: 50px;
		margin-bottom: 20px;
		padding-top: 15px;
		vertical-align: middle;
		font-weight: bold;
	}
	.news-page .area-news .frame .newstitle.ptn-02 {
		display: inline-block;
		width: 75%;
		font-size: 18px;
		text-align: left;
		margin-left: 0px;
		margin-bottom: 20px;
		padding-top: 15px;
		font-weight: bold;
		line-height: 20px;
	}
	.news-page .area-news .frame .newstitle:before {
		display: inline-block;
		vertical-align: middle;
		margin: 3px 5px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.news-page .area-news .frame .newslist-1:before {
		background-image: url(../../images/official/news_icon_01.png);
	}
	.news-page .area-news .frame .newslist-2:before {
		background-image: url(../../images/official/news_icon_02.png);
	}
	.news-page .area-news .frame .newslist-3:before {
		background-image: url(../../images/official/news_icon_03.png);
	}
	.news-page .area-news .frame .newstitle.policy {
		margin-left: 20px;
		font-size: 18px;
	}
	.news-page .area-news .frame .data {
		text-align: right;
		margin-right: 20px;
		margin-bottom: 20px;
		font-size: 12px;
	}
	.news-page .area-news .frame .details {
		width: 92%;
		margin: 0 auto;
		text-align: left;
		line-height: 1.4;
	}
	.news-page .area-news .frame .details.mainte p {
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 30px;
	}




	/* =============================
	[ twitter ]
	==============================*/
	.area-twitter {
		width: 49%;
		float: left;
	}
	.area-twitter .title {
		display: block;
		padding: 5px;
		background: #006a8e;
		margin-bottom: 5px;
        color:#fff;
	}
	.twitter-timeline {
		height: 300px!important;
	}


	/* =============================
	[ 固定バナー ]
	==============================*/
	.area-fixed-bnr {
		margin-bottom: 30px;
	}
	.area-fixed-bnr ul {
		padding: 0;
		text-align: center;
		list-style: none;
	}
	.area-fixed-bnr ul li img {
		max-width: 640px;
		margin-bottom: 20px;
	}
	.area-fixed-bnr a:hover {
		opacity: 0.8;
	}


	/* =============================
	[ ムービー ]
	==============================*/
	.area-movie {
		margin: 0 auto 30px auto;
	}



	/* =============================
	[ ゲーム紹介ページ専用 ]
	==============================*/
	#mainblock{
		width:640px;
		height:auto;
		margin:0 auto;
        background-color:#fff;
        text-align:left;
		}
	#mainblock  .fixwidth{
        line-height:0 !important;
    }
	#mainblock .fixwidth img {
		width: 100%;

	}
	#photo img {
		width: 100%;
	}
	#chara{
		padding:0;
		margin:0 0 70px 0;
		width:100%;
		text-align:center;
		overflow:hidden;
		}
	#photo {
		position: relative;
	}
	#photo ul{
		display: block;
		padding-left: 0px;
		height: 424px;
	}
	#photo .pic{
		position: absolute;
		top: 0px;
		left: 0px;
		vertical-align:bottom;
	}
	#photo .pic img{
		-webkit-transition: all 0.3s ease 0s;
		-moz-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;
		opacity: 0;
		filter: alpha(opacity=0);
	}
	#photo .pic.on img{
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#navi {
		clear:both;
	}
	#navi ul{
		font-size:0;
		list-style:none;
		margin:0;
		padding:0;
	}
	#navi li{
		width: 20%;
		display:inline-block;
		padding:0;
		margin:0;
		cursor: pointer;
	}
	#navi li.on{
		opacity: 0.4;
		filter: alpha(opacity=40);
	}
	.charaicon{
		width:100%;
	}
	.mar_top20{
		margin:30px auto 5px auto;
	}
	.clear{
		clear: both;
	}


	/* =============================
	[ FAQページ専用 ]
	==============================*/
	div.area-faq {
		width: 100%;
		margin-bottom: 20px;
	}
	div.area-faq .category-ttl {
		text-align: left;
		margin: 20px 0 10px 15px;
		font-size: 18px;
		font-weight: bold;
		color: #003973;
	}
	div.area-faq .search-inner {
		width: 95%;
		margin: 0 auto;
		border-bottom: #888 1px dotted;
	}
	div.area-faq .list-inner{
		padding: 0;
		text-align: center;
		list-style: none;
	}
	div.area-faq .border {
		padding: 0;
		text-align: center;
		list-style: none;
		border-top: #888 1px dotted;
	}
	div.area-faq .search.ttl {
		margin-left: 15px;
		color: #333;
		line-height: 1.4;

	}
	div.area-faq .search {
		text-align: left;
		margin: 15px 0 15px 0px;
		font-size: 14px;
		font-weight: bold;
	}
	div.area-faq .search a {
		color: #6ab0ef;
		line-height: 1.6;
	}
	div.area-faq .search .highlight {
	  margin: 0 2px;
	  padding: 0 3px;
	  background: #d39f00;
	  color: #fff;
	  font-weight: bold;
	}
	li a .highlight {
	  text-decoration: underline;
	}
	.area-faq .list-inner {
		width: 95%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	.area-faq .list-inner .list {
		position: relative;
		list-style: none;
		margin-bottom:10px;
		width: 100%;
		height: auto;
		background: rgb(212,228,239);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(212,228,239,1)), color-stop(100%,rgba(134,174,204,1)));
		background: -webkit-linear-gradient(top, rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%);
		background: linear-gradient(to bottom, rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=0 );
		border-radius: 5px;
		border: #356 1px solid;
	}
	.area-faq .list-inner li:hover {
		opacity: 0.9;
	}
	.area-faq .list-inner .list a {

		display: block;
		text-align: left;
		vertical-align: middle;
	}
	.area-faq .list-inner .list .question:before {
		display: inline-block;
		vertical-align: middle;
		margin: 4px 0px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(../../images/official/icon_q.png);

	}
	.area-faq .list-inner .list a p {
		color: #0054ff;
		display: inline-block;
		max-width: 90%;
		vertical-align: top;
		margin-left: 40px;
		margin-right: 10px;
		margin-top: 13px;
		font-size: 15px;
		padding-bottom: 13px;
	}

	.area-category {
		width: 100%;
	}
	.area-category ul {
		display: block;
		width: 95%;
		margin: 0 auto;
		padding: 10px 0 5px 0;
		background: #ccc;
		box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.4) inset;
		border-radius: 5px;
		padding-left: 0;
		text-align: center;
	}
	.area-category ul li {
		list-style: none;
		display: inline-block;
		margin: 0px 3px 10px 3px;
		width: 47%;
		background: rgb(255,168,76);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1)));
		background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
		border-radius: 5px;
		border: #e86c03 1px solid;
	}
	.area-category ul li:hover {
		opacity: 0.8;
	}
	.area-category ul li a {
		text-decoration: none;
		display: block;
		text-align: center;
		padding: 13px 0;
	}
	.area-category ul li a p {
		color: white;
		font-weight: bold;
	}
	.faq-page .area-faq .frame {
		position: relative;
		width: 85%;
		margin: 0 auto;
		background: #fff;
		border: #003973 1px solid;
		overflow: hidden;
	}
	.faq-page .area-faq .frame .faqtitle {
		display: block;
		height: auto;
		font-size: 18px;
		text-align: left;
		margin-left: 50px;
		margin-bottom: 20px;
		padding-top: 12px;
		vertical-align: middle;
		font-weight: bold;
		color: #0054ff;
	}
	.faq-page .area-faq .frame .faqtitle:before {
		display: inline-block;
		vertical-align: middle;
		margin: 3px 5px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(../../images/official/icon_q.png);
	}

	.faq-page .area-faq .frame .data {
		text-align: right;
		margin-right: 20px;
		margin-bottom: 20px;
		font-size: 12px;
	}
	.faq-page .area-faq .frame .details {
		width: 92%;
		margin: 0 auto;
		line-height: 1.5;
		text-align: left;
	}


	/* =============================
	[ 検索窓 ]
	==============================*/
	div.area-search {
		width: 100%;
		margin-bottom: 60px;
	}
	form.search {
		width: 90%;
		margin: 0 auto;
	}
	form.search div {
		padding: 1px 0;
	}
	form.search input.textBox {
		width: 280px;
		margin: 0 4px 0 5px;
		padding: 6px 0;
		background-color: #ffffff;
		border: none;
		color: #000000;
	}
	form.search input.btn {
		background: -webkit-gradient(linear, left top, left bottom, from(#80CCE6), color-stop(0.05,#80CCE6), color-stop(0.05,#09C), color-stop(0.95,#069), color-stop(0.95,#00293D), to(#00293D));
		border: 1px solid #333;
		border-radius: 5px;
		color: #FFF;
		width: 80px;
		padding: 8px 0;
		font-weight: bold;
		letter-spacing: 0.3em;
		cursor: pointer;
	}
	form.search input.btn:hover {
		opacity: 0.9;
	}



	/* =============================
	[ supportページ専用 ]
	==============================*/
	div.area-support {
		width: 100%;
		margin-bottom: 20px;
	}
	.area-support .area-error {
		width: 80%;
		margin: -20px auto 10px;
		border: red 1px solid;
	}
	.area-support .area-error ul {
		width: 95%;
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}
	.area-support .area-error ul li {
		font-size: 12px;
		text-align: left;
		color: red;
		margin: 5px 0 5px 1em;
		text-indent: -1em;
}

	.area-support ul li .question:before {
		display: inline-block;
		vertical-align: middle;
		margin: 4px 0px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(../../images/official/icon_q.png);

	}
	.area-support ul li a p {
		color: #0054ff;
		display: inline-block;
		max-width: 90%;
		vertical-align: top;
		margin-left: 40px;
		margin-right: 10px;
		margin-top: 13px;
		font-size: 15px;
		padding-bottom: 13px;
	}

	.support-page .area-support .frame {
		position: relative;
		width: 85%;
		margin: 0 auto;
		background: #fff;
		border: #003973 1px solid;
	}
	.support-page .area-support .frame .supporttitle {
		display: block;
		height: auto;
		font-size: 18px;
		text-align: left;
		margin-left: 50px;
		margin-bottom: 20px;
		padding-top: 12px;
		vertical-align: middle;
		font-weight: bold;
		color: #0054ff;
	}
	.support-page .area-support .frame .supporttitle:before {
		display: inline-block;
		vertical-align: middle;
		margin: 3px 5px;
		content: "";
		width: 42px;
		height: 42px;
		position: absolute;
		left: 0;
		top: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(../../images/official/icon_q.png);
	}

	.support-page .area-support .frame .data {
		text-align: right;
		margin-right: 20px;
		margin-bottom: 20px;
		font-size: 12px;
	}

	.support-page .area-support .frame p {
		width: 95%;
		text-align: left;
		font-size: 13px;
		line-height: 1.6;
		margin: 0 auto;
		padding: 10px 0 40px;
		color: #333;
	}
	.support-page .area-support .frame p.message {
		text-align: center;
		margin-top: 40px;
		margin-bottom: -10px;
	}
	.support-page .area-support .frame p.message .ttl {
		font-size: 16px;
		font-weight: bold;
		color: red;
	}
	.area-submit ul li {
		display: inline-block;
		width: 200px;
		height: 40px;
		line-height: 40px;
		text-decoration: none;
		color:#fff;
		font-weight: bold;
		font-size: 15px;
		margin: 0 20px 40px;
		text-align: center;
	}
	.support-page .area-support .frame .area-submit ul li a {
		display: block;
		text-align: left;
		vertical-align: middle;
		height: 40px;
	}
	.support-page .area-support .frame .area-submit ul li p {
		max-width: 100%;
		width: 200px;
		text-align: center;
		padding: 10px 0;
	}

	.area-submit ul li.bt-rev {
		background: rgb(0,183,234);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,175,255,1)), color-stop(100%,rgba(76,139,255,1)));
		background: -webkit-linear-gradient(top, rgba(131,175,255,1) 0%,rgba(76,139,255,1) 100%);
		background: linear-gradient(to bottom, rgba(131,175,255,1) 0%,rgba(76,139,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83afff', endColorstr='#4c8bff',GradientType=0 );
		box-shadow: 0px 2px 0px #25468b;
		border-radius: 5px;
	}

	.area-submit ul li.bt-done {
		background: rgb(255,168,76);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1)));
		background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
		box-shadow: 0px 2px 0px #a84d00;
		border-radius: 5px;
		border: #a84d00 1px solid;
	}




	/* =============================
	[ ストアアイコン ]
	==============================*/
	.area-store {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}
	.area-store ul {
		margin: 0 auto;
		width: 640px;
		padding: 0;
		text-align: center;
	}
	.area-store ul li {
		display: inline-block;
		margin: 0 5px;
		vertical-align: middle;
	}
	.area-store ul li a:hover {
		opacity: 0.8;
	}
	.area-store ul li img {
		width: 100%;
	}


	/* =============================
	[ SNSアイコン ]
	==============================*/
	.area-sns {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}
	.area-sns ul {
		margin: 0 auto;
		width: 640px;
		padding: 0;
		text-align: center;
	}
	.area-sns ul li {
		display: inline-block;
		margin: 0 5px;
		vertical-align: top;
	}
	.area-sns ul li a:hover {
		opacity: 0.8;
	}





	/* =============================
	[ フッター ]
	==============================*/
	footer {
		margin: 65px auto 0;
		padding-bottom: 10px;
	}
	footer .list-inner {
		display: block;
		margin: 0 auto 30px auto;
		list-style: none;
		padding: 0;
		text-align: center;
	}
	footer .list-inner li {
		display: inline-block;
		margin-left: 3px;
		width: 123px;
		height: 43px;
		background: url(../../images/official/footer_bt_base.jpg) top left repeat-x ;
		background-size: contain;
		border: #003973 1px solid;

		vertical-align: middle;
	}
	footer .list-inner li:hover {
		opacity: 0.8;
	}
	footer .list-inner li a {
		color: #eee;
		display: block;
		height: 42px;
		text-align: left;
		/*background: url(../../images/official/news_icon_00.png) right center no-repeat;*/
		position: relative;
	}
	footer .list-inner li a:before {
		display: inline-block;
		vertical-align: middle;
		content: "";
		width: 20px;
		height: 20px;
		position: absolute;
		left: 5px;
		top: 11px;
		background-repeat: no-repeat;
		background-size: contain;
	}
	footer .list-inner li .support:before {
		background-image: url(../../images/official/icon_footer_01.png);
	}
	footer .list-inner li .regist:before {
		background-image: url(../../images/official/icon_footer_02.png);
	}
	footer .list-inner li .transactions:before {
		background-image: url(../../images/official/icon_footer_03.png);
	}
	footer .list-inner li .settlement:before {
		background-image: url(../../images/official/icon_footer_04.png);
	}
	footer .list-inner li .policy:before {
		background-image: url(../../images/official/icon_footer_05.png);
	}
	footer .list-inner li a span {
		display: inline-block;
		margin-left: 30px ;
		padding-top: 16px;
		font-size: 12px;
	}
	footer .list-inner li .policy span {
		width: 82px;
		padding-top: 8px;
		line-height: 1.3;
	}



	/* =============================
	[ 遊び方ナビ ]
	==============================*/
	#htpmenu {
		margin:5% auto;
	}
	#htpmenu ul {
		width: 100%;
		margin: 0 auto;
		max-width: 640px;
		overflow: hidden;
		padding: 0;
		text-align: center;
	}
	#htpmenu ul li {
		display: inline-block;
		text-align: center;
		line-height: 55px;
		width: 25%;
		float: left;
	}
	#htpmenu ul li a {
		position: relative;
		display: block;
		width: 160px;
		height: 55px;
	}
	#htpmenu ul li a span {
		position: relative;
		z-index: -1;
	}
	#htpmenu ul .nav-game a {
		background: url(../../images/official/htp_menu_pc.jpg) no-repeat 0 0;}
	#htpmenu ul .nav-play a{
		background: url(../../images/official/htp_menu_pc.jpg) no-repeat -160px 0;}
	#htpmenu ul .nav-news a{
		background: url(../../images/official/htp_menu_pc.jpg) no-repeat -320px 0;}
	#htpmenu ul .nav-faq a{
		background: url(../../images/official/htp_menu_pc.jpg) no-repeat -480px 0;}

	#htpmenu ul .nav-game a:hover {background-position: 0px -55px;}
	#htpmenu ul .nav-play a:hover {background-position: -160px -55px;}
	#htpmenu ul .nav-news a:hover {background-position: -320px -55px;}
	#htpmenu ul .nav-faq a:hover {background-position: -480px -55px;}

	#htpmenu ul .nav-game.on a {background-position: 0px -55px;}
	#htpmenu ul .nav-play.on a {background-position: -160px -55px;}
	#htpmenu ul .nav-news.on a {background-position: -320px -55px;}
	#htpmenu ul .nav-faq.on a {background-position: -480px -55px;}

	#htpmenu ul .nav-game:after {
		position: absolute;
		top: 0;
		left: 0;
		background: url(../../images/official/htp_menu_pc.jpg) 0 bottom no-repeat;
	}