@charset "utf-8";
@import url("normalize.css");

/* 文書基本スタイル */
a {
  color: #0055ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: #6622ff;
}

.clear {
  clear: both;
  height: 0;
  line-height: 0;
	margin: 0 !important;
}

.clearboth{
	clear: both;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

h1,
.topTitle{
  font-size: 1.4em;
  line-height: 1.5em;
  padding: 0.2em 5px 0;
  font-weight: bold;
  background: #333333;
	border-bottom: solid 2px rgba(0, 0, 0, .2);
  color: #ffffff;
	margin: 0;
	text-align: left;
}

h1.imageTitle{
	padding: 0;
	background: #111;
	border: none;
	text-align: center;
}

h1.imageTitle img{
	max-width: 100%;
}

h2{
  font-size: 1.2em;
	border-bottom: solid 3px #53067a;
	background: url("../img/h2_bon.png") left bottom no-repeat;
	background-size: 28px auto;
	padding-left: 30px;
	min-height: 20px;	padding-top: 4px;
	margin: 1em 0 0.5em;
}

h2.c0296{
	background: url("../img/icon/h2_0296.png") left bottom no-repeat;
	background-size: 28px auto;
	border-bottom: solid 3px #ce860a;
}

h2.c0302{
	background: url("../img/icon/h2_0302.png") left bottom no-repeat;
	background-size: 28px auto;
	border-bottom: solid 3px #555;
}

h2.c0382{
	background: url("../img/icon/h2_0382.png") left bottom no-repeat;
	background-size: 28px auto;
	border-bottom: solid 3px #333;
}

h2.c0682{
	background: url("../img/icon/h2_0682.png") left bottom no-repeat;
	background-size: 28px auto;
	border-bottom: solid 3px #057509;
}

.energy{
	height: 18px;
	vertical-align: -15%;
}

.more{
	text-align: right;
	margin: 5px 0;
	font-size: .9em;
}

.left{
	text-align: left;
}

.center{
	text-align: center;
}

.right{
	text-align: right;
}

.caution{
	text-align: center;
	color: #c03;
}

.notice-dark{
	text-align: center;
	color: #fff;
	background-color: #222;
	padding: 5px 0;
}

blockquote{
	position: relative;
	background-color: #eeeeee;
	margin: 1em 0.5em;
	padding: 1.5em 1em;
	border: 2px solid #dddddd;
}

blockquote:before,
blockquote:after{
	font-size: 300%;
	color: #aaaaaa;
	font-family: "Times New Roman", Times, serif;
	position: absolute;
}

blockquote:before{
	content: "“";
	line-height: 1em;
	left: 5px;
	top: 0;
}

blockquote:after{
	content: "”";
	line-height: 0;
	right: 5px;
	bottom: 0;
}

blockquote p{
	margin: 0 0 0.5em;
}

blockquote p:last-child{
	margin-bottom: 0;
}

blockquote p.ref{
	text-align: right;
}

.direction{
	margin: 0.5em 0;
	text-align: center;
}

.direction a{
	color: #6622ff;
	display: inline-block;
	margin: 0 auto;
	padding: 0 8px 0 40px;
	background: #fff url("../img/direction.png") 2px 0px no-repeat;
	height: 32px;
	line-height: 32px;
	border: solid 1px #6622ff;
	border-radius: 2px;
}

.direction a:hover{
	color: #ffffff;
	text-decoration: none;
	background: #62f url("../img/direction.png") 2px -32px no-repeat;
}

.sp-only{
	display: none;
}

/* ページ全体 */
html, body {
  /*height: 100%;*/
  color: #222;
  line-height: 1.5em;
  font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #fff url("../img/bg.png") top left repeat;
}

body{
  margin: 0;
  background: url("../img/bgshadow.png") center top repeat-y;
	-webkit-text-size-adjust: 100%;
	font-size: 0.9em;
}

.wrapper {
  width: 820px;
  margin: 0 auto;
  padding: 0 10px;
  border-top: solid 5px #7823a3;
}

.topnav{
	margin: 0;
}

/* 左右分けレイアウト */
.mainContents {
  width: 550px;
  float: left;
	padding: 0;
}

.mainContents h2,
.mainContents h3,
.mainContents form,
.mainContents p,
.mainContents img,
.mainContents table{
	max-width: 100%;
}

.contents-640{
	max-width: 640px;
	margin: 0 auto;
}

/* サイドバー */
.sidebar {
  width: 250px;
  float: right;
}

.widget{
	margin-bottom: 1em;
}

.widget img {
  max-width: 100%;
}

.widget.download{
	border: solid 2px #ccc;
	text-align: center;
	font-size: 80%;
}

.widget.download .btn{
	margin: 2px 5.5px 3px;
}

.widget-title{
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 0 0.5em;
	border-bottom: solid 1px #53067a;
}

.widget dl{
	margin: 0;
}

.widget dd{
	margin-left: 0.5em;
}

.bunner {
  text-align: center;
	margin-bottom: 5px;
}

.bunner a{
	font-size: 0.8em;
	color: #555555;
}

.widget.download .btn:hover,
.bunner a:hover,
.imglink:hover{
  opacity: .8;
}


/* ページヘッダー・グローバルナビ */
.header{
  padding: 10px 0 0;
	overflow: hidden;
}

.siteTitle {
  margin: 0;
  padding: 0;
	background: none;
	border: none;
	float: left;
}

.siteTitle img{
	max-width: 100%;
	max-height: 80px;
}

#gsearch{
	float: right;
	width: 35%;
	height: 33px;
	margin: 30px 0 7px;
}

#gsearch td,
#gresult td{
	border: none;
	padding: 0;
}

#gsearch input[type=text]{
	padding: 1px 4px !important;
	background-color: transparent !important;
}

.gnav{
	clear: both;
  padding: 0;
  text-align: center;
  margin: 10px 0;
}

.gnav li{
  display: block;
  width: 205px;
  height: 50px;
  margin: 0;
  float: left;
}

.gnav .gnavGuide{
  background: #ffffff url("../img/gnav2_nobg.png") 0px 0px no-repeat;
}

.gnav .gnavUnit{
  background: #ffffff url("../img/gnav2_nobg.png") -205px 0px no-repeat;
}

.gnav .gnavQuest{
  background: #ffffff url("../img/gnav2_nobg.png") -410px 0px no-repeat;
}

.gnav .gnavNews{
  background: #ffffff url("../img/gnav2_nobg.png") -615px 0px no-repeat;
}

.gnav .gnavGuide:hover{
  background: #ffffff url("../img/gnav2_nobg.png") 0px -50px no-repeat;
}

.gnav .gnavUnit:hover{
  background: #ffffff url("../img/gnav2_nobg.png") -205px -50px no-repeat;
}

.gnav .gnavQuest:hover{
  background: #ffffff url("../img/gnav2_nobg.png") -410px -50px no-repeat;
}

.gnav .gnavNews:hover{
  background: #ffffff url("../img/gnav2_nobg.png") -615px -50px no-repeat;
}


.sns{
  text-align: right;
  margin: -1.4em 0 0;
	min-height: 20px;
}

.topbutton,
#sp_menu{
	display: none;
}

/* フッターナビゲーション */
.navleft, .navright{
  margin: 1em 0 0;
	background: #eee;
}

.navright{
  text-align: right;
  margin-top: -1.5em;
}

/* フッター */
.footer {
  margin: 15px 0 0;
  padding: 5px 10px;
  border-top: double 4px #333;
  clear: both;
}

.footer .nav, .footer .copyright {
	margin: 1em 0;
  text-align: center;
}

.copyright{
	font-size: 80%;
}


/* テーブルスタイル */
table{
	width: 100%;
}

td{
	padding: 2px;
	border: solid 1px #e892ff;
}

/* 属性テキストカラー */
.fire{ color: #c4151b; }
.water,.aqua{ color: #1b25a8; }
.wind{ color: #06a02C; }
.light{ color: #ad8e06; }
.dark{ color: #80208e; }
.none{ color: #757575; }

.boost{ color: #ff372c; }

/*インデックス系*/
.index{
	margin: 1em 0;
	padding: 4px;
	border: dotted 1px #e892ff;
	background: #fff url(../img/index.png) right bottom no-repeat;
	font-size: 90%;
}

.index-list{
	margin: 0;
	padding: 0;
	text-align: left;
}

.index-list li{
	display: inline-block;
	padding: 3px 6px;
	margin: 2px;
	list-style: none;
	background: rgba(255,255,255,0.7);
	border: solid 1px #aaa;
}

.index-list .feature{
	background: rgba(255,255,150,0.7);
}

.index-list .head{
	background: #222;
	border-color: #222;
	color: #fff;
}

.index-list li:hover{
	background: rgba(200,200,200,0.7);
}

.index-list .head:hover{
	background: #222;
}

/*インデックス系*/
.indexList{
	padding: 0;
	margin-top: 0;
	text-align: left;
}

.indexList li{
	display: inline-block;
	padding: 3px;
	margin: 2px 1px;
	list-style: none;
	border: solid 1px #aaa;
}

/* 用語関係 */
dl.words{
}

.words dt{
	font-weight: bold;
}

.words dt:before{
	content:"◆";
}

.words dd{
	font-size: 90%;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

.words dd.related{
	margin-top: -1em;
	padding: 2px;
	background: #eee;
}


/* 相関図・ユニット紹介 */

dl.profile{
}

.profile dt{
	width: 48px;
}

.profile dt img{
	width: 48px;
	border: none;
}

.profile dt a:hover img{
	opacity: .8;
}

.profile dd{
	margin: -48px 0 1em 0;
	padding-left: 53px;
}

.profile dd p{
	font-size: 90%;
	margin: 0 0 1em;
	padding: 0;
}

.profile dd li{
	font-size: 90%;
}

.profile dd p.header{
	font-weight: bold;
	color: #90c;
	margin-bottom: 5px;
	border-bottom: dotted 1px #90c;
}

.profile dd.quest{
	background-color: #eeeeee;
}

.profile dd.cont{
	margin-bottom: 0;
	padding-bottom: 1em;
}

.profile dd.cont p{
	margin-bottom: 0;
}

.profile dd.quest p.header{
	color: #222;
	border-bottom-color: #222;
}

.toggle{
	cursor: pointer;
}

.toggle:hover{
	text-decoration: underline;
}

.toggle_text{
	display: none;
}


/* 目次関係 */
.mokuji_wrap{
	margin-left: 0.5em;
}

.mokuji_wrap ul{
	padding-left: 1.5em;
}

/* パーティ紹介 */
.party{
	clear: both;
	text-align: center;
	border: solid 2px #ccc;
}

.party th{
	border: none;
	background: none;
}

.party .party_icon td{
	width: 20%;
	border: none;
}

.party .party_icon td img{
	max-width: 100%;
}

.party .party_name td{
	font-size: 90%;
	border: none;
	text-align: center;
	word-break: break-all;
}

/* コラボ */
p.collabo-img{
	background: #000;
	text-align: center;
	margin-bottom: 0;
}

.collabo-link{
	text-align: center;
	background: #222;
	margin-top: 0;
	padding: 0.5em 0;
}

.collabo-link a{
	color: #fff;
}

.caption{
	font-size: 0.8em;
}


@media screen and (max-width: 849px) {
  .header{
    padding: 10px 0;
  }

	.wrapper{
		width: 98%;
		padding: 0 1%;
	}

  .gnav{
    margin: 0 auto;
  }

  .gnav li{
    width: 25%;
    max-width: 205px;
  }

	.mainContents{
		width: 70%;
		max-width: 550px;
	}

	.sidebar{
		width: 29%;
		max-width: 250px;
	}
}

@media screen and (max-width: 674px) {
	.wrapper{
		width: 100%;
		padding: 0;
	}

	.siteTitle{
		float: none;
	}

  .siteTitle img{
    max-width: 100%;
  }

	#gsearch{
		width: 98%;
		margin: 10px 1% 0;
		float: none;
	}

  .gnav{
    display: none;
  }

	/* グローバルナビ(スマートフォン向け) */

	.topbutton{
		display: block;
		position: fixed;
		top: 5px;
		right: 5px;
		text-align: center;
		font-size: 1.1em;
	}

	#sp_menu{
		width: 100%;
		padding: 0;
		background: #210A2D;
		opacity: .9;
		font-size: 1.1em;
		color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		display: none;
		box-sizing: border-box;
	}

	#sp_menu ul{
		margin: 0;
		padding: 0;
	}

	#sp_menu a{
		display: block;
		color: #fff;
	}

	#sp_menu li{
		width: 49%;
		margin: 2px 0.5%;
		padding: 6px 0;
		border: 1px solid rgba(255, 255, 255, .3);
		float: left;
		text-align: center;
		display: block;
		box-sizing: border-box;
	}

	#sp_menu a:hover li{
		background: rgba(255, 255, 255, .2);
	}

	.sp_menu_header{
		text-align: center;
		margin: 5px 0;
		font-weight: bold;
	}

	.sp_menu_open{
		cursor: pointer;
		background-color: #7823a3;
		color: #fff;
		padding: 2px 5px;
		border: solid 2px #7823a3;
		border-radius: 2px;
	}

	.sp_menu_open:hover{
		text-decoration: none;
		opacity: .9;
	}

	.sp_menu_close{
		clear: both;
		text-align: center;
		margin: 5px 0 0;
		padding: 5px 0 3px;
		cursor: pointer;
		background: #000;
		border-bottom: solid 3px #fff;
	}

	/* メイン・その他 */
  .mainContents,
  .sidebar{
    width: 98%;
		max-width: 98%;
    float: none;
		margin: 0 1%;
  }

	.mainContents h2,
	.mainContents h3,
	.mainContents form,
	.mainContents p,
	.mainContents img{
		max-width: 100%;
	}

	.navright{
		margin-top: 0;
	}

	.widget{
		margin-bottom: 1em;
	}

	.widget.bunner img{
		width: 100%;
		max-width: 400px;
	}

	.sp-only{
		display: block;
	}
}