@charset "utf-8";

/* ユニット図鑑ページ */
.unitIndex{
	margin-top: 10px;
}

.unitItem{
	display: block;
	width: 188px;
	height: 60px;
	padding: 3px;
	margin: 0 3px 3px;
	float: left;
	color: #222 !important;
	border: solid 2px #ccc;
}

.unitItem:hover{
	background-color: #eee;
}

.unitItem .unitIcon{
	width: 60px;
	float: left;
	margin: 0 5px 0 0;
}

.unitItem span{
	font-size: 80%;
	line-height: 1.3em;
}

.unitItem p{
	width: 123px;
	float: right;
	margin: 0;
}

/* ユニット個別ページ */

h1.unitName{
	background-color: #53067a;
	line-height: 1.5em;
	margin: 5px 0 0.5em;
	clear: both;
}

h2.unitTitle{
	font-size: 1.4em;
	text-align: center;
	background: url("../img/h2bg.png") center -5px no-repeat;
	padding: 0 0 10px;
	margin: 1em 0 0.5em;
	border: none;
}

.unitImage{
	display: block;
	margin: 0 auto 0.67em;
	height: 406px;
}

.contents table{
	margin-top: 0.5em;
}

th{
	border: none 1px #999;
	border-right: none;
	font-weight: normal;
}

td, table{
	border: none 1px #999;
	border-left: none;
}

.unitData{
	width: 620px;
	margin: 0 auto 1em;
}

.unitName{
	font-weight: bold;
	line-height: 1.1em;
}

.unitNo,
.unitName{
	border-bottom: solid 1px #ccc;
}

.unitName .kana{
	font-weight: normal;
	font-size: 70%;
	color: #666;
}

.unitData th,
.unitData td{
	padding: 2px;
}

.unitData th{
	width: 5.5em;
	padding: 3px 0;
}

.unitName{
	height: 1.5em;
}

.unitThumb img{
	width: 100px;
}

.item{
	display: inline-block;
	width: 5.5em;
	background: #333;
	color: #eee;
	border: solid 1px #333;
	border-radius: 1em;
	font-size: 84%;
}

.item-long{
	width: auto;
	padding: 0 1em;
}

.item-skill{
	width: 5.5em;
	color: #fff;
	border-width: 1px;
	border-radius: 2px;
	font-weight: bold;
}

.item-skill-wrapper{
	width: 5.5em;
	padding: 3px 0;
	padding-top: 0.4em;
	vertical-align: top;
}

.unitData .td-top,
.unitEvolve .td-top{
	padding-top: 0.5em;
}

.skillName{
	padding-top: 0.4em;
}

.skill-detail{
	padding-left: 8px;
	padding-bottom: 0.4em;
	border-bottom: dotted 1px #ccc;
}

.skill-turn{
	font-size: 96%;
}

.skill-critical{
	font-size: 96%;
	text-align: center;
	border-bottom: dotted 1px #ccc;
}

.skill-cost{
	width: 110px;
	padding-top: 0.4em;
	text-align: center;
}

.leader{
	background: #7200ff;
	border-color: #7200ff;
}

.active{
	background: #ff1db2;
	border-color: #ff1db2;
}

.normal{
	background: #ffae00;
	border-color: #ffae00;
}

.change{
	color: #F60;
}

.passive{
	background: #ff6000;
	border-color: #ff6000;
}

.unitData td{
	text-align: left;
}

.unitStatus,
.unitSkill,
.unitEvolve,
.profile,
.remarks{
	width: 620px;
	margin: 0 auto 1em;
}

.unitStatus td,
.unitStatus th{
	border: solid 1px #ddccdd;
	text-align: center;
	padding: 2px;
}

.unitStatus th{
	background: #fff2ff;
}

.evolveTitle{
	background: #555;
	font-weight: bold;
	color: #ffffff;
	padding: 2px 5px;
}

.noEvolve{
	text-align: center;
}

.unit-subtitle{
	background: #16160e;
	color: #fff;
	border: none;
	padding: 3px 8px;
	font-size: 100%;
	margin: 1.5em 0 1em;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
}

.topnav{
	margin: 0;
}

.unitData .unitNo,
.unitData .unitThumb{
	width: 116px;
	text-align: center;
}

.unitData .unitThumb{
	vertical-align: top;
}

.unitData .unitName{
	text-align: left;
}

.unitData .max{
	background-color: #ffffcc;
}

.unitSkill .turnData{
	background: #fff url("../img/turn.png") 3px 4px no-repeat;
	padding-left: 24px;
	width: 88px;
	vertical-align: top;
}

.unitSkill .max{
	background-image: url("../img/turnmax.png");	
}

.turn-tani{
	margin-left: 0.2em;
	font-size: 0.8em;
}

.unitEvolve .evolveIcon{
	width: 200px;
	text-align: center;
}

.unitEvolve .evolveIcon img{
	width: 80px;
}

.unitEvolve .evolveMat img{
	width: 44px;
}

.unitGet th{
	width: 150px;
}

.unitList td{
	text-align: center;
	border: solid 1px #e892ff;
}

.unitList th{
	background: #eeccff;
	border: solid 1px #e892ff;
}

.unitList .unitIcon img{
	width: 48px;
}

.unitList .unitIcon{
	width: 48px;
}

.unitList .skill{
	width: 1.5em;
}

.unitList .evoPrev{
	text-align: left;
	border-bottom: dotted 1px #ccc;
}

.unitList .evoNext{
	text-align: right;
	border-top: none;
}

#exp_cal{
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

#exp_cal th{
	background: #ccc;
}

#exp_result table{
	margin: 5px auto;
}

#exp_result th{
	background: none;
	text-align: left;
	width: 70%;
}

#exp_result th:before{
	content: "■";
}

#exp_result td{
	text-align: left;
}

.unitList td.profile{
	width: 75%;
	text-align: left;
	font-size: 90%;
}

.unitSkillList .panel{
	text-align: left;
}

.bg_fire{
	background-color: #ffb3b3;
}

.bg_water,
.bg_aqua{
	background-color: #b3e6ff;
}

.bg_wind{
	background-color: #b3ffb3;
}

.bg_light{
	background-color: #ffffb3;
}

.bg_dark{
	background-color: #ccb3ff;
}

.bg_none{
	background-color: #dddddd;
}

.bg_heart{
	background-color: #ffccff;
}

/* ソート機能用表示 */
tr.sortHeader .header {
	background-image: url("../img/sorter/bg.gif");
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}

tr.sortHeader th.headerSortUp {
	background-image: url("../img/sorter/asc.gif");
}
tr.sortHeader th.headerSortDown {
	background-image: url("../img/sorter/desc.gif");
}
tr.sortHeader th.headerSortDown,
tr.sortHeader th.headerSortUp {
	background-color: #dd99ff;
	border-color: #cc66ff;
}

/*フィルタ系*/

.filter{
	text-align: right;
}

.filterList{
	padding: 0;
	margin-top: 0;
	text-align: left;
}

.filterList li{
	display: block;
	height: 46px;
	width: 46px;
	float: left;
	margin: 0;
}

.filter p.listHeader{
	margin: 0;
	font-weight: bold;
	text-align: left;
}

.filterList label input{
	display: none;
}

.tAll{
	background: url(../img/filtericon.png) 0px 0px no-repeat;
}

.tFire{
	background: url(../img/filtericon.png) -40px 0px no-repeat;
}

.tWater{
	background: url(../img/filtericon.png) -80px 0px no-repeat;
}

.tWind{
	background: url(../img/filtericon.png) -120px 0px no-repeat;
}

.tLight{
	background: url(../img/filtericon.png) -160px 0px no-repeat;
}

.tDark{
	background: url(../img/filtericon.png) -200px 0px no-repeat;
}

.tNone{
	background: url(../img/filtericon.png) -240px 0px no-repeat;
}

.rAll{
	background: url(../img/filtericon.png) -280px 0px no-repeat;
}

.rHuman{
	background: url(../img/filtericon.png) -320px 0px no-repeat;
}

.rDragon{
	background: url(../img/filtericon.png) -360px 0px no-repeat;
}

.rGod{
	background: url(../img/filtericon.png) -400px 0px no-repeat;
}

.rDeamon{
	background: url(../img/filtericon.png) -440px 0px no-repeat;
}

.rSpilit{
	background: url(../img/filtericon.png) -480px 0px no-repeat;
}

.rBeast{
	background: url(../img/filtericon.png) -520px 0px no-repeat;
}

.rMachine{
	background: url(../img/filtericon.png) -560px 0px no-repeat;
}

.rEgg{
	background: url(../img/filtericon.png) -600px 0px no-repeat;
}

.filterList label{
	display: block;
	height: 40px;
	width: 40px;
	background-position-y: -40px;
	border: solid 2px #fff;
	cursor: pointer;
}

.filterList label.selected{
	background-position-y: 0px;
	border: solid 2px #FFCC33;
}


/* 開発表示用 */
.imgcell{
	height: 66px;
}

.noimg{
	background-color: #ffdddd;
}

@media screen and (max-width: 800px) {
	.unitImage{
		width: 98%;
		max-width: 480px;
		margin: 0 auto .67em;
		height: auto;
	}

	th, td{
		font-size: 0.9em;
	}

	.unitSkill th{
		width: 80px;
	}

	.unitSkill .turnData{
		width: 70px;
	}

	.unitSkill img{
		max-height: 18px;
	}


	.unitEvolve .evolveIcon{
		width: 120px;
	}

	.unitEvolve .evolveIcon img{
		width: 60px;
	}

	.unitEvolve .evolveMat img{
		width: 40px;
	}

	.unitList .unitIcon img{
		width: 40px;
	}

	.unitList .unitIcon{
		width: 40px;
	}

	.unitList .skill, .unitList .skillh{
		display: none;
	}
}

@media screen and (max-width: 629px){
	.unitItem{
		width: 45%;
		margin: 0 1% 5px;
	}
	
	.unitItem .unitIcon{
		width: 27%;
		max-width: 60px;
		margin-right: 2px;
	}
	
	.unitItem p{
		width: 70%;
	}
	
	.unitData,
	.unitStatus,
	.unitSkill,
	.unitEvolve,
	.profile,
	.remarks{
		width: 98%;
	}
	
	.profile{
		padding-left: 0;
	}

	.unitData .unitThumb img{
		width: 60px;
	}
	
	.unitData .unitNo,
	.unitData .unitThumb{
		width: 64px;
	}

}


/* SimpTip v1.0.2
// a simple CSS tooltip made with Sass
// source: https://github.com/arashmanteghi/simptip/
// ducoment: http://arashm.net/lab/simptip/
// by @ArashManteghi - http://arashm.net */
[data-tooltip]{position:relative;display:inline-block}[data-tooltip]:after,[data-tooltip]:before{position:absolute;visibility:hidden;opacity:0;z-index:999999;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}[data-tooltip]:before{content:'';border:6px solid transparent}[data-tooltip]:after{height:22px;padding:11px 11px 0;font-size:13px;line-height:11px;content:attr(data-tooltip);white-space:nowrap}[data-tooltip].simptip-position-top:before{border-top-color:#323232}[data-tooltip].simptip-position-top:after{background-color:#323232;color:#ecf0f1}[data-tooltip].simptip-position-bottom:before{border-bottom-color:#323232}[data-tooltip].simptip-position-bottom:after{background-color:#323232;color:#ecf0f1}[data-tooltip].simptip-position-left:before{border-left-color:#323232}[data-tooltip].simptip-position-left:after{background-color:#323232;color:#ecf0f1}[data-tooltip].simptip-position-right:before{border-right-color:#323232}[data-tooltip].simptip-position-right:after{background-color:#323232;color:#ecf0f1}[data-tooltip].simptip-position-bottom.half-arrow:before,[data-tooltip].simptip-position-top.half-arrow:before{border-right:7px solid #323232}[data-tooltip]:focus,[data-tooltip]:hover{background-color:transparent}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;visibility:visible}.simptip-position-left:after,.simptip-position-left:before,.simptip-position-right:after,.simptip-position-right:before{bottom:50%}.simptip-position-left:before,.simptip-position-right:before{margin-bottom:-5px}.simptip-position-left:after,.simptip-position-right:after{margin-bottom:-14.67px}.half-arrow.simptip-position-left:before,.half-arrow.simptip-position-right:before{bottom:16px;border-style:none;border-top:7px solid transparent}.simptip-multiline.simptip-position-left:after,.simptip-multiline.simptip-position-left:before,.simptip-multiline.simptip-position-right:after,.simptip-multiline.simptip-position-right:before{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%);-webkit-filter:blur(0px);filter:blur(0px);margin-bottom:0}.simptip-multiline.simptip-position-left:before,.simptip-multiline.simptip-position-right:before{margin-bottom:0}.simptip-multiline.half-arrow.simptip-position-left:before,.simptip-multiline.half-arrow.simptip-position-right:before{margin-bottom:-2px}.simptip-position-right:after,.simptip-position-right:before{left:100%}.simptip-position-right:before{margin-left:-2px}.simptip-position-right:after{margin-left:10px}.simptip-position-right.simptip-movable:before{margin-left:-10px}.simptip-position-right.simptip-movable:after{margin-left:2px}.simptip-position-right.simptip-movable:hover:after,.simptip-position-right.simptip-movable:hover:before{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);-ms-transform:translateX(10px);-o-transform:translateX(10px);transform:translateX(10px)}.simptip-position-right.simptip-movable.half-arrow:before{margin-left:-5px}.simptip-position-right.simptip-movable.simptip-multiline:hover:after,.simptip-position-right.simptip-movable.simptip-multiline:hover:before{-webkit-transform:translate(10px,50%);-moz-transform:translate(10px,50%);-ms-transform:translate(10px,50%);-o-transform:translate(10px,50%);transform:translate(10px,50%)}.simptip-position-right.half-arrow:before{margin-left:3px;border-right:7px solid #323232}.simptip-position-left:after,.simptip-position-left:before{right:100%}.simptip-position-left:before{margin-right:-2px}.simptip-position-left:after{margin-right:10px}.simptip-position-left.simptip-movable:before{margin-right:-10px}.simptip-position-left.simptip-movable:after{margin-right:2px}.simptip-position-left.simptip-movable:hover:after,.simptip-position-left.simptip-movable:hover:before{-webkit-transform:translateX(-10px);-moz-transform:translateX(-10px);-ms-transform:translateX(-10px);-o-transform:translateX(-10px);transform:translateX(-10px)}.simptip-position-left.simptip-movable.half-arrow:before{margin-right:-5px}.simptip-position-left.simptip-movable.simptip-multiline:hover:after,.simptip-position-left.simptip-movable.simptip-multiline:hover:before{-webkit-transform:translate(-10px,50%);-moz-transform:translate(-10px,50%);-ms-transform:translate(-10px,50%);-o-transform:translate(-10px,50%);transform:translate(-10px,50%)}.simptip-position-left.half-arrow:before{margin-right:3px;border-left:7px solid #323232}.simptip-position-bottom:after,.simptip-position-bottom:before,.simptip-position-top:after,.simptip-position-top:before{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}.simptip-position-bottom:after,.simptip-position-top:after{width:auto}.half-arrow.simptip-position-bottom:before,.half-arrow.simptip-position-top:before{border-style:none;border-right:7px solid #323232}.simptip-position-bottom:after,.simptip-position-bottom:before{top:100%}.simptip-position-bottom:before{margin-top:-5px}.simptip-position-bottom:after{margin-top:7px}.simptip-position-bottom:hover:after,.simptip-position-bottom:hover:before{-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}.simptip-position-bottom.simptip-movable:before{margin-top:-15px}.simptip-position-bottom.simptip-movable:after{margin-top:-3px}.simptip-position-bottom.simptip-movable:hover:after,.simptip-position-bottom.simptip-movable:hover:before{-webkit-transform:translate(-50%,10px);-moz-transform:translate(-50%,10px);-ms-transform:translate(-50%,10px);-o-transform:translate(-50%,10px);transform:translate(-50%,10px)}.simptip-position-bottom.simptip-movable.half-arrow:before{margin-top:-10px}.simptip-position-bottom.half-arrow:before{margin-top:0;border-top:7px solid transparent}.simptip-position-top:after,.simptip-position-top:before{bottom:100%}.simptip-position-top:before{margin-bottom:-5px}.simptip-position-top:after{margin-bottom:7px}.simptip-position-top:hover:after,.simptip-position-top:hover:before{-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}.simptip-position-top.simptip-movable:before{margin-bottom:-15px}.simptip-position-top.simptip-movable:after{margin-bottom:-3px}.simptip-position-top.simptip-movable:hover:after,.simptip-position-top.simptip-movable:hover:before{-webkit-transform:translate(-50%,-10px);-moz-transform:translate(-50%,-10px);-ms-transform:translate(-50%,-10px);-o-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}.simptip-position-top.simptip-movable.half-arrow:before{margin-bottom:-10px}.simptip-position-top.half-arrow:before{margin-bottom:0;border-bottom:7px solid transparent}.simptip-movable:after,.simptip-movable:before{-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear}.simptip-smooth:after{-webkit-border-radius:4px;border-radius:4px}.simptip-fade:after,.simptip-fade:before{-webkit-transition:opacity .1s linear,visibility .1s linear;-moz-transition:opacity .1s linear,visibility .1s linear;-o-transition:opacity .1s linear,visibility .1s linear;-ms-transition:opacity .1s linear,visibility .1s linear;transition:opacity .1s linear,visibility .1s linear}.simptip-multiline:after{height:auto;width:150px;padding:11px;line-height:19px;white-space:normal;text-align:left}.simptip-success.simptip-position-top:before{border-top-color:#62c462}.simptip-success.simptip-position-top:after{background-color:#62c462;color:#ecf0f1}.simptip-success.simptip-position-bottom:before{border-bottom-color:#62c462}.simptip-success.simptip-position-bottom:after{background-color:#62c462;color:#ecf0f1}.simptip-success.simptip-position-left:before{border-left-color:#62c462}.simptip-success.simptip-position-left:after{background-color:#62c462;color:#ecf0f1}.simptip-success.simptip-position-right:before{border-right-color:#62c462}.simptip-success.simptip-position-right:after{background-color:#62c462;color:#ecf0f1}.simptip-success.simptip-position-bottom.half-arrow:before,.simptip-success.simptip-position-top.half-arrow:before{border-right:7px solid #62c462}.simptip-info.simptip-position-top:before{border-top-color:#5bc0de}.simptip-info.simptip-position-top:after{background-color:#5bc0de;color:#ecf0f1}.simptip-info.simptip-position-bottom:before{border-bottom-color:#5bc0de}.simptip-info.simptip-position-bottom:after{background-color:#5bc0de;color:#ecf0f1}.simptip-info.simptip-position-left:before{border-left-color:#5bc0de}.simptip-info.simptip-position-left:after{background-color:#5bc0de;color:#ecf0f1}.simptip-info.simptip-position-right:before{border-right-color:#5bc0de}.simptip-info.simptip-position-right:after{background-color:#5bc0de;color:#ecf0f1}.simptip-info.simptip-position-bottom.half-arrow:before,.simptip-info.simptip-position-top.half-arrow:before{border-right:7px solid #5bc0de}.simptip-danger.simptip-position-top:before{border-top-color:#e74c3c}.simptip-danger.simptip-position-top:after{background-color:#e74c3c;color:#ecf0f1}.simptip-danger.simptip-position-bottom:before{border-bottom-color:#e74c3c}.simptip-danger.simptip-position-bottom:after{background-color:#e74c3c;color:#ecf0f1}.simptip-danger.simptip-position-left:before{border-left-color:#e74c3c}.simptip-danger.simptip-position-left:after{background-color:#e74c3c;color:#ecf0f1}.simptip-danger.simptip-position-right:before{border-right-color:#e74c3c}.simptip-danger.simptip-position-right:after{background-color:#e74c3c;color:#ecf0f1}.simptip-danger.simptip-position-bottom.half-arrow:before,.simptip-danger.simptip-position-top.half-arrow:before{border-right:7px solid #e74c3c}.simptip-warning.simptip-position-top:before{border-top-color:#e67e22}.simptip-warning.simptip-position-top:after{background-color:#e67e22;color:#ecf0f1}.simptip-warning.simptip-position-bottom:before{border-bottom-color:#e67e22}.simptip-warning.simptip-position-bottom:after{background-color:#e67e22;color:#ecf0f1}.simptip-warning.simptip-position-left:before{border-left-color:#e67e22}.simptip-warning.simptip-position-left:after{background-color:#e67e22;color:#ecf0f1}.simptip-warning.simptip-position-right:before{border-right-color:#e67e22}.simptip-warning.simptip-position-right:after{background-color:#e67e22;color:#ecf0f1}.simptip-warning.simptip-position-bottom.half-arrow:before,.simptip-warning.simptip-position-top.half-arrow:before{border-right:7px solid #e67e22}

.simptip-position-top{
	background-color: #fff3ce;
	border: solid 1px #ffd86b;
	border-radius: 1px;
}

.simptip-position-top:hover{
	background-color: #ffe28e;
	text-decoration: none;
}