@charset "UTF-8";

/* ----------------------------------------------------
作成日: 2017.08.29
最終更新日: 

common.css： 共通設定

本番のcssだけwebviewでの背景透明化の指定が入っていますので
本番にあげる際は気を付けてください。
（一番下）
---------------------------------------------------- */
html,body,wrapper {
height: 100%;
}
body {
	position:relative;
	width: 100%;
	height:100%;
	min-height: 100%;
        color:#cfcfcf;
	font-size:62.5%;
	font-family:"メイリオ", "ＭＳ Ｐゴシック", Helvetica , sans-serif;
	-webkit-text-size-adjust: 100%;
	line-height:1.4;
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/img_bg.jpg) top center no-repeat #ffffff;
	background-size: cover;
	word-wrap: break-word;
        overflow-wrap: break-word;
}
.bg{
	position: fixed;
	z-index: -2;
	left: 0;
	top: 0;
	min-width: 320px;
	width: 100%;
	height: 100%;
}
.bg{
	background-image: url("https://d2-megaten-l.sega.jp/webview/gacya/image/img_bg.jpg");
	background-repeat: no-repeat;
		background-size: cover;
	background-position: top center;
}
img {
	max-width: 100%; 
	height:auto;
	vertical-align: top;
}
li {list-style: none;}
a {text-decoration:none;}
a:link, a:hover, a:active {color:#000000;}
a:visited  {color: #000000;}
a:focus {outline: none;}

/*clearfix*/
.cf:before,
.cf:after {
	content:"";
	display:table;
}
.cf:after,.clear{clear:both;}
.cf::after {
	content: " ";  
	display: block; 
	visibility: hidden; 
	clear: both; 
	height: 0;
	line-height: 0;
}
.tc {text-align:center !important;}
.tr {text-align:right !important;}
.tl {text-align:left !important;}
.tc {text-align:center !important;}
.sd {
	filter: drop-shadow(0 2px 0px rgba(0, 0, 0, .5));
	-webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, .5));
}

.pos-rel {position:relative;}
.pos-abs {position:absolute;}


*{
  margin: 0;
  padding: 0;
}
table {
        border-color: #e9e9e9;
        border-collapse: separate;
        max-width: 100% !important;
}
.att {
  padding-left: 1em;
  text-indent: -1em;
}

/*==================================
ALL
===================================*/
#wrapper{
display:none;
	position:relative;
	height:100%;
	min-width:252px;
	margin: 0 auto;
}
#wrapper-inner{
	text-align: center;
}

/*==================================
header
===================================*/

header {
	width:100%;
	margin:0 auto;
	text-align: left;
	text-shadow: 0px 4px 0px black;
	z-index: 100;
}
header .inner-box {
	padding:3% 2% 5%;
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/hed-img.png);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size:56px 500px;
    min-height: 110px;
}
    header.stepupHeader .inner-box {
        background:none;
    }
@media screen and (max-width:456px) {
header .inner-box {
        min-height: 90px;
}
}
@media screen and (max-width:320px) {
header .inner-box {
        min-height: 76px;
}
}

#hed-main {
	float: left;
	width: 70%;
}
	.rakuin #hed-main {
		float: inherit;
		width: 100%;
		padding-bottom: 1em;
	}
#hed-main p {
	line-height: 110%;
}
.hed-side {
	float: right;
	width: 30%;
        text-align:right;
}
h1 {
	color: #ffc026;
	margin: 0;
}
    header.stepupHeader h1 img {
        width:100%;
        height: auto;
    }

/*==================================
common
===================================*/

#main {
	width:100%;
	padding-bottom: 3%;
}

#main-inner {
	padding: 2%;
}

/* status */
.chara-name {
	margin-bottom:2%;
	line-height: 115%;
}
.chara-name img,.skillFactor-name img {
        width:22%;
        height:auto;
}
.chara-main {
        float:left;
        width:55%;
        overflow: hidden;
}
.chara-status {
        float:right;
        width:45%;
        line-height: 110%;
}
.chara-illustbox {
	position: relative;
        margin-right: 2%;
}

.chara-illustbox .chara-typeicon {
	position: absolute;
	right:0;
	top:0;
    line-height:0;
    width: 12%;
    max-width: 34px;
}

.chara-illustbox .chara-typeicon .grade-no {
	position: absolute;
        left:0;
        right:0;
	bottom:8%;
        width: 60%;
    margin: 0 auto;
    text-align: center;
}
.chara-illustbox .chara-typeicon .icongradeimg-l,
.chara-illustbox .chara-typeicon .icongradeimg-r{
        width:40%;
        height:auto;
}
.chara-illustbox .chara-typeicon .icongradeimg-l {
        display:inline-block;
        margin-right:12%;
}
.chara-illustbox .chara-typeicon .icongradeimg-r {

}
.chara-illustbox .chara-typeicon .ds-none {
        display:none;
}

.chara-illustbox p {
	margin-top:5%;
}

table.table-statusbox {
	border-collapse : separate ;
	border-spacing: 5px 5px;
}
table.table-statusbox th {
	background: rgba(46,36,57,0.6);
}
table.table-statusbox td {
	padding: 2%;
	background: rgba(85,50,96,0.6);
}
table.table-statusbox .img-icon {
	display: inline-block;
	margin-right: 1%;
}
table.table-skill td {
	text-align: left;
}
table.table-statusbox td,table.table-statusbox td img {
	vertical-align: middle;
}
        table.table-statusbox.table-skill td img {width:9%; height:auto;}
table.table-skill,table.table-spec {
	margin-top: -2px;
} 
.spec-list {
	text-align: center;
	padding: 0 10%;
	margin: 0;
}
.spec-list li {
	display: inline-block;
	text-align: center;
        width: calc(100% / 7);
}
.spec-list li img {width:100%;height:auto;}
.spec-list li:nth-child(1) {
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/icon-spec01.png) top center no-repeat;
	background-size:100% auto;
}
.spec-list li:nth-child(2) {
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/icon-spec02.png) top center no-repeat;
	background-size:100% auto;
}
.spec-list li:nth-child(3) {
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/icon-spec03.png) top center no-repeat;
	background-size:100% auto;
}
.spec-list li:nth-child(4) {
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/icon-spec04.png) top center no-repeat;
	background-size:100% auto;
}
.spec-list li:nth-child(5) {
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/icon-spec05.png) top center no-repeat;
	background-size:100% auto;
}
.spec-list li:nth-child(6) {
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/icon-spec06.png) top center no-repeat;
	background-size:100% auto;
}
.spec-list li:nth-child(7) {
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/icon-spec07.png) top center no-repeat;
	background-size:100% auto;
}
ul.charalist-list > li:not(:first-child),
ul.skillFactor-list > li:not(:first-child){
	margin-top: 2%;
	padding-top: 6%;
	background: url(https://d2-megaten-l.sega.jp/webview/gacya/image/bg-charalist.png) top left repeat-x;
	background-size:56px 20px;
}
ul.skillFactor-list > li:not(:first-child){
	margin-top: 6%;
}
@media screen and (max-width: 305px) {
.chara-main {
	width:52%;
}
.chara-status {
	width:48%;
}
}

/*--skillFactor--*/
.skillFactor-list th {
	padding:2%;
}
.skillFactor-subname,.skillFactor-box-inner {
        padding:5px;
	background: rgba(46,36,57,0.6);
}
.skillFactor-subname {margin-bottom:1%;}
.skillFactor-subtxt {padding:0 1%;min-height: 2.5em;}
.skillFactor-list .rareiconimg {margin-bottom:1%;}
.skillFactor-hed {margin-bottom:5%;}
.skillFactor-name {margin-bottom:5%;}
.skillFactor-txt,.skillFactor-subtxt{text-align: left;}
.skillFactor-status .table-status .img-icon{
	margin-bottom: 10%;
        width:35%;
        height:auto;
}
p.skillFactor-txt {
    padding: 0 2%;
}
.skillFactor-status table.table-statusbox {margin:0 auto;}
.skillFactor-status table.table-statusbox td {
    background-color: #7e509b;
	padding:1%;
}

@media screen and (min-width:768px) {
.skillFactor-status table.table-statusbox td {
	padding:1% 0.5%;
}
}
.skillFactor-status table.table-statusbox td.tdatt,
.skillFactor-status table.table-statusbox td.tdtarget {
	width: 5.5em;
    background-color: #7e509b;
}
.skillFactor-status table.table-statusbox td.wid_m,
.skillFactor-status table.table-statusbox td.wid_l {
	text-align: left;
}
.skillFactor-status table.table-statusbox td.td-num {
	width: 3em;
}
.skillFactor-status table.table-statusbox td.td-th {
	background: #66497e;
        height: 50%;
}
.skillFactor-detail table.table-detail td {
        width:50%;
}
.skillFactor-status table.table-statusbox td {box-sizing: border-box;}
/*.skillFactor-status table.table-statusbox td:nth-child(1),
.skillFactor-status table.table-statusbox td:nth-child(2) {
        width:15%;
}
.skillFactor-status table.table-statusbox td:nth-child(3),
.skillFactor-status table.table-statusbox td:nth-child(5) {
        width:30%;
}
.skillFactor-status table.table-statusbox td:nth-child(4),
.skillFactor-status table.table-statusbox td:nth-child(6) {
        width:10%;
}*/

/*==================================
詳細
===================================*/
h2 {
	text-shadow: 0px 4px 0px black;
        margin-bottom:1%;
}
.detail-box {
        text-align:left;
}
.detail-box:not(:first-child) {
        margin-top:6%;
}
table.table-detail {
    width:100%;
	border-collapse : separate ;
	border-spacing: 3px 3px;
    margin-bottom:1%;
}
    table.table-detail:last-child {margin-bottom:0;}
table.table-detail th,
table.table-detail td,
.datail-txt {
	padding: 2%;
}
table.table-detail th {
        font-weight:normal;
}
table.table-detail td,
.datail-txt {
	background: rgba(37,28,45,0.3);
}
table.table-detail th,
table.table-ratio td:first-child,
table.table-detail th,
table.table-ratioStup td:first-child,
.table_titleh{
	background: rgba(37,28,45,0.6);
}
    .table-ratioStup tr:first-child th:nth-child(n+2) {
        background: rgba(37,28,45,0.3);
    }

table.table-detail.table-ratio td,
table.table-detail.table-rate02 th,
table.table-detail.table-rate02 td {
	width: 50%;
}
table.table-detail.table-rate th:nth-child(1),
table.table-detail.table-rate td:nth-child(1),
table.table-detail.table-rate th:nth-child(2),
table.table-detail.table-rate td:nth-child(2) {
        width:35%;
}
table.table-detail.table-rate th:nth-child(3),
table.table-detail.table-rate td:nth-child(3) {
        width:30%;
}

table.table-ratioStup th,
table.table-rateStup th {
    text-align: center;
}
table.table-ratioStup td:nth-child(1){
    width: 30%;
}
table.table-rateStup td {
    width: 22%;
}
table.table-rateStup td:nth-child(2) {
    width: 34%;
}
table.table-ratioStup td:nth-child(2),
table.table-ratioStup td:nth-child(3),
table.table-rateStup td:nth-child(3),
table.table-rateStup td:nth-child(4){
    text-align: right;
}

table.table-rateStup tr:nth-child(3) th {
    font-size: 80%;
}

    @media screen and (max-width:320px) {
table.table-rateStup td {
    width: 23%;
}
table.table-rateStup td:nth-child(2) {
    width: 31%;
}
    }


/*==================================

===================================*/
#acBoxWrap {
	margin:4% 0 2%;
}
.acBox {
    margin-bottom: 2%;
}
    .acBox:last-child {
        margin-bottom: 0;
    }
.acBox .name_category {
	width: 100%;
    color:#f2cafe;
    font-weight: normal;
    text-align: left;
}
.acBox .name_category img.help-mbg {
    top:0;
    right:0;
    left:0;
    margin:auto;
    z-index:1;
}
.acBox .name_category > span {
	display: block;
    top:0;
    right:0;
    left:0;
    margin:auto;
    z-index:10;
	padding: 3.0% 6% 4.4%;
	background: url(../image/aco_arrow_down.png) right top no-repeat;
	background-size: 100% auto;
}
.acBox .name_category span.close {
	background: url(../image/aco_arrow_up.png) right top no-repeat;
	background-size: 100% auto;
}
.acBox.stepCurrent .name_category > span {
	background: url(../image/aco_arrow_up.png) right top no-repeat;
	background-size: 100% auto;
}
.acBox.stepCurrent .name_category > span.close {
	background: url(../image/aco_arrow_down.png) right top no-repeat;
	background-size: 100% auto;
}

.acBox-innerCont{
	margin-left: 5.5%;
	padding: 2%;
	background:rgba(0,0,0,0.2);
}
.acBox .detail-box {
    margin-bottom: 2%;
}
.acBox .detail-box:last-child {
    margin-bottom: 0;
}
.table_titleh3 {
    margin: 0 1%;
    padding: 3%;
    display: block;
	background: rgba(37,28,45,0.6);
}


/* font
===================================*/
div.name_category {font-size:4.5rem;}

@media screen and (max-width:880px) {
    div.name_category,ul.itemList {font-size:3.4rem;}
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:640px) {
    div.name_category,ul.itemList {font-size:3.0rem;}
}

@media screen and (max-width:480px) {
    div.name_category,ul.itemList {font-size:2.6rem;}
}

@media screen and (max-width:414px) { /*6plus*/
    div.name_category,ul.itemList {font-size:2.8rem;}
}

@media screen and (max-width:413px) { /*480*/
    div.name_category,ul.itemList {font-size:2.6rem;}
}


@media screen and (max-width:375px) {
    div.name_category,ul.itemList {font-size:2.6rem;}
}
@media screen and (max-width:290px) {
}

/* respo
===================================*/
@media screen and (max-width:748px) {
div.name_category > span {padding: 3.5% 3% 4.0% 6%;}
}
@media screen and (max-width:630px) {
div.name_category > span {padding: 3.0% 6% 4.3%;}
}
@media screen and (max-width:420px) {
div.name_category > span {padding: 4.0% 6% 4.3%;}
}
@media screen and (max-width:414px) { /*6plus*/
div.name_category > span {padding: 3.6% 6% 4.3%;}
}
@media screen and (max-width:413px) { /*420px*/
div.name_category > span {padding: 4.0% 6% 4.3%;}
}
@media screen and (max-width:375px) {
div.name_category > span {padding: 3.6% 6% 4.2%;}
}
@media screen and (max-width:320px) {
div.name_category > span {padding: 3.0% 6% 4.0%;}
}


/*==================================
font
===================================*/
h1 { font-size:2.4rem }
h2 { font-size:2.2rem;font-weight:normal;}
#hed-main { font-size:2.0rem;}
.chara-name,.skillFactor-name { font-size: 2.0rem;}
.skillFactor-txt,.skillFactor-subname { font-size: 2.0rem;}
.chara-deviltxt { font-size: 2.0rem;}
.chara-status,.skillFactor-subtxt,.skillFactor-status {font-size: 1.4rem;}
.skillFactor-status table.table-statusbox td.tdatt,
.skillFactor-status table.table-statusbox td.tdtarget{font-size: 1.4rem;}
.detail-box {font-size:2.0rem;}

/*
@media screen and (max-width:640px) {
	h1 { font-size:20px }
	h2 { font-size:15px;}
	#hed-main { font-size:15px;}
	.chara-name,.skillFactor-name { font-size: 18px;}
	.skillFactor-txt,.skillFactor-subname { font-size: 16px;}
	.chara-deviltxt { font-size: 15px;}
	.chara-status,.skillFactor-subtxt,.skillFactor-status {font-size: 12px;}
.skillFactor-status table.table-statusbox td.tdatt,
.skillFactor-status table.table-statusbox td.tdtarget{font-size: 10px;}
	.detail-box {font-size:15px;}
}

@media screen and (max-width:320px) {
	h1 { font-size:16px }
	h2 { font-size:10px;}
	#hed-main { font-size:10px;}
	.chara-name,.skillFactor-name { font-size: 12px;}
	.skillFactor-txt,.skillFactor-subname { font-size: 11px;}
	.chara-deviltxt { font-size: 10px;}
	.chara-status,.skillFactor-subtxt,.skillFactor-status {font-size: 8px;}
.skillFactor-status table.table-statusbox td.tdatt,
.skillFactor-status table.table-statusbox td.tdtarget{font-size: 6px;}
	.detail-box {font-size:10px;}
}
*/

/*==================================
respo
===================================*/
@media screen and (max-width:768px) {
header,h2 {
    text-shadow: 0px 2px 0px black;
}
}

@media screen and (max-width:320px) {
header .inner-box {
    padding: 2% 2% 1%;
}
}


/*==================================
webview opacity
===================================*/
body{
        background:transparent;
}
.bg {
        opacity: 0;
}