@charset "utf-8";

body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    background-color: #EFEFEF;
    color: #333333;
    padding-top: 44px;
    padding-bottom: 20px;
}

/*--------------------
    Gridsystem
--------------------*/
.container {
  padding-right: 5px;
  padding-left: 5px;
}

.row {
  margin-right: -5px;
  margin-left: -5px;
}


.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 5px;
  padding-left: 5px;
}



/*--------------------
    Basic
--------------------*/

.navbar {
  min-height: 44px;
}

.navbar-header {
    float: none;
}

.navbar-fixed-top {
  top: 0;
  border-width: 0;
}

.navbar-brand,
.navbar-inverse .navbar-brand {
  height: 44px;
  font-size: 14px;
  line-height: 44px;
  padding: 0;
  color: #fff;
}

.headerTitle {
    height: 44px;
    font-size: 14px;
    line-height: 44px;
    padding: 0;
    color: #fff;
}


.headerTitle .siteid {
    display: inline-block;
    margin-right: 5px;
    margin-left: 15px;
    margin-top: 6px;
    color: #fff;
    font-size: 24px;
    line-height: 28px;
}

.headerTitle img.siteid {
    margin-top: 0;
    height: 22px;
}

/*
.navbar-header .glyphicon {
    padding: 0;
    margin-left: 15px;
    margin-top: 6px;
    margin-right: 5px;
    margin-bottom: 0;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 24px;
    line-height: 33px;
}

.navbar-brand #siteid {
    height: 22px;
    display: inline-block;
    margin-right: 5px;
    margin-left: 15px;
    color: #fff;

}
*/

.navbar-toggle {
    position: relative;
    float: right;
    padding: 0;
    margin-top: 0;
    margin-right: 15px;
    margin-bottom: 0;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 24px;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: inherit;
}


a.areaLink {
    color: inherit;
}

a.areaLink .row {
    color: inherit;
    transition: all 0.3s ease;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: initial;
}

a.areaLink:hover .row{
    opacity: 0.7;
}


footer p {
    margin: 0.5em;
    font-size: 10px;
}

/*--------------------
    Original
--------------------*/
.aisatsu {
    font-size: 80%;
    font-weight: 700;
    margin: 0;
    padding: 0.5em;
    line-height: 1.8;
    letter-spacing: 0;
}

.infoArea {
    overflow: auto;
    height: 8em;
}


.searchArea {

}

.searchInputArea {
    display: inline-block;
    width: auto;
}

.tagArea {
    line-height: 2;
    margin: 0 0 0.5em;
    padding: 0;
}

.tagArea div {
    padding: 0;
}


.gotool {
    font-size: 22px !important;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 40px;
    width: 80%;
    vertical-align: middle;
    border-radius: 10px;
    height: 100px;
    line-height: 1;
}

.setsumeiArea {
}


.setsumeiArea h2 {
    font-size: 14px;
    margin: 0.5em 0;
    padding: 0 0.5em 0;
    line-height: 30px;
}

.setsumeiArea p,
.setsumeiArea li {
    font-size: 80%;
}

.setsumeiArea ul {
    padding-left: 1em;
    margin-left: 0;
}

hr {
    border: 1px solid #ccc;
}




/*--------------------
    team
--------------------*/

.teamList {
    padding-bottom: 10px;
    margin-bottom: 1px;
    background-color: #fff;
}


.editPartyArea {
    padding: 0;
    margin: 1px 0 8px 0;
    border-right: 1px solid #fff;
}

.editPartyAreaButton {
    padding: 0;
    margin: 0;
    height: 30px;
    background-color: #4A4A4A;
    color: #FFFFFF;
    font-size: 11px;
    line-height: 30px;
    text-align: center;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
}

.editPartyAreaButton:hover {
    background-color: #999999;
}

.editPartyAreaButton .img-responsive {
    display: inline-block;
    max-height: 100%;
    width: auto;
    vertical-align: top;
}

.editPartyAreaAll {
    padding: 0;
    margin: 1px 0 8px 0;
}

.editPartyAreaAll .editPartyAreaButton {
    border-left: none;
}

.lfMark {
  margin-top: -16px;
  padding-left: 4px;
  padding-right: 4px;
}

.unitCopyArea {
    padding: 0;
    margin: 0;
    border-right: none;
}

.unitPastArea {
    padding: 0;
    margin: 0;
    border-right: none;
}

.unitCopyButton,
.unitPasteButton {
    padding: 0;
    margin: 0;
    height: 30px;
    background-color: #4A4A4A;
    color: #FFFFFF;
    font-size: 11px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.unitCopyButton:hover,
.unitPasteButton:hover {
  background-color: #999;
}
.unitCopyButton {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-top: 4px;
  margin-bottom: 0;
}
.unitPasteButton {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-top: 0;
  margin-bottom: 4px;
}



.titleList {
    color: #fff;
    background-color: #4A4A4A;
    width: 100%;
    height: 30px;
    padding: 5px 5px 0;
}

.titleList .teamNum {
    display: inline-block;
    color: #4A4A4A;
    background-color: #fff;
    border-radius: 3px;
    text-align: center;
    width: 20px;
    height: auto;
    margin-right: 5px;
}

.teamFace {
    padding: 0 5px;
}

.teamFace div {
    padding-left: 0;
    padding-right: 0;
}

.statusArea,
.hitArea,
.dropArea {
    line-height: 1.8;
}

.statusArea strong,
.hitArea strong,
.dropArea strong {
    margin-right: 0.3em;
}

.memoArea {
    margin-top: 1em;
}

/*--------------------
    Party
--------------------*/


.partyMemoArea {
    margin-bottom: 1em;
}

.partyMemoForm {
    padding: 1em;
}

.summaryArea {
    margin-bottom: 0;
}

.partyUnitArea {
    margin-bottom: 1em;
    background-color: #fff;
}

.partyPicArea {
}

.partyListFace {
    display: table;
    table-layout: fixed;
}

.partyListFace div {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.partyListFace div:first-child {
    padding: 0 0 0 5px;
}

.attributeArea {
    font-weight: 800;
    margin: 0 0 10px;
}


.genderName {
    font-size: 9px;
}

table.dataTable {
    width: 100%;
    font-size: 10px;
    margin: 0;
    border-collapse: separate;
    padding: 1em 0;
    border-right: none;
    background-color: #fff;
}


table.dataTable caption {
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    background-color: #4A4A4A;
    font-family:"Avenir Next",Avenir,"Arial Black", Gadget, sans-serif;
    height: 1.1em;
    line-height: 1.2;
    margin: 0;
    padding: 0 0 0 0.5em;
}



table.dataTable th {
    padding: 0.2em;
    border-left: none;
    border-bottom: none;
    text-align: right;
    font-weight: 800;
    background-color: transparent;
}

table.dataTable td {
    padding: 0.2em;
    border-left: none;
    border-bottom: none;
    background-color: transparent;
    padding-left: 0.5em;
}



table.statusTable {
    width: 100%;
}

table.statusTable th {
    text-align: right;
}

table.statusTable td {
    text-align: left;
}

table.hitTable {
    width: 100%;
}

table.hitTable td {
    text-align: center;
}

.leaderskillArea,
.extraskillArea,
.extraskill2Area,
.bbArea,
.sbbArea,
.ubbArea {
    margin: 0;
    padding: 5px 5px 5px 10px;;
}

.skillHead {
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    font-family:"Avenir Next",Avenir,"Arial Black", Gadget, sans-serif;
    margin: 0;
    padding: 0 0.5em 0 0;
    position: absolute;
    top: 0.5em;
    left: 0;
    text-align: right;
}

.leaderskillArea {
  background-color: #F0E7D0;
}
.leaderskillArea .skillHead {
  color: #F4B958;
}

.extraskillArea {
  background-color: #E1F3D9;
}
.extraskillArea .skillHead {
  color: #96CD5B;
}

.extraskill2Area {
  background-color: #fff;
  padding: 0 5px 0.3em;
}
.extraskill2Area .skillHead {
  color: #fff;
  background-color: #96CD5B;
  margin-bottom: 0.5em;
  position: static;
  text-align: left;
  padding-left: 0.5em;
}

.bbArea {
  background-color: #DEE9F2;
}
.bbArea .skillHead {
  color: #7AA9E0;
}

.sbbArea {
  background-color: #F8E0E0;
}
.sbbArea .skillHead {
  color: #FA97A3;
}

.ubbArea {
  background-color: #EADFF2;
}
.ubbArea .skillHead {
  color: #C788FD;
}





.skillName {
    font-size: 10px;
    font-weight: 700;
}

.es2Name {
  font-size: 10px;
  font-weight: 700;
}

.sphereName {
    font-size: 10px;
    font-weight: 700;
}

.sphereIcon {
  margin-right: 0.2em;
}

.sphereArea {
    margin: 0;
    padding: 5px;
    background-color: #fff;
    clear: both;
    border-top: 1px solid #EFEFEF;
}
.sphereArea .skillHead {
  color: #fff;
  background-color: #7AA9E0;
  margin-top: -5px;
  margin-bottom: 0.5em;
  position: static;
  text-align: left;
  padding-left: 0.5em;
}

.fesSp {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-left: -2px;
    text-align: center;
}
.fesArea {
    margin: 0;
    padding: 5px;
    background-color: #fff;
    clear: both;
    border-top: 1px solid #EFEFEF;
}
.fesArea .skillHead {
  color: #fff;
  background-color: #95C9BE;
  margin-top: -5px;
  margin-bottom: 0.5em;
  position: static;
  text-align: left;
  padding-left: 0.5em;
}


/*--------------------
    Unit / Sphere search
--------------------*/

.unitList {
    background-color: #fff;
    margin-bottom: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.sphereList {
    background-color: #fff;
    margin-bottom: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.es2List {
    background-color: #fff;
    margin-bottom: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.fesList {
    background-color: #fff;
    margin-bottom: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.unitListFace {
    padding-right: 0;
}

.es2ListFace {
    padding-right: 0;
}

.sphereListFace {
    padding-right: 0;
}

.fesListFace {
    padding-right: 0;
    line-height: 1;
}

.textRare {
    color: #FDCB24;
}

.searchTrue {
    display: block;
}

.tagTrue {
    display: block;
}

.tagRareTrue {
    display: block;
}

.tagElementTrue {
    display: block;
}

.tagEvoTrue {
    display: block;
}
.tagSphereTypeTrue {
    display: block;
}
.tagStrongTrue {
    display: block;
}

.searchFalse {
    display: none;
}
.tagFalse {
    display: none !important;
}
.tagRareFalse {
    display: none !important;
}
.tagElementFalse {
    display: none !important;
}
.tagEvoFalse {
    display: none !important;
}
.tagSphereTypeFalse {
    display: none !important;
}
.tagStrongFalse {
    display: none !important;
}

.btn-all {
    background-color: #c9302c !important;
}




/*--------------------
    Modal
--------------------*/


.modal-dialog {
  top: 100px;
}

.modal-header {
  margin-left: 15px;
  margin-right: 0;
  margin-bottom: 10px;
  border-bottom: none;
  padding: 0;
}

.modal-body {
  margin-left: 15px;
  margin-right: 15px;
  padding: 0;
}

.modal-body h5{
    font-weight: 700;
    margin: 0.3em 0;
    font-size: 12px;
}

.modal-body hr{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border: 0;
    border-top: 1px dashed #e5e5e5;
}


.modal-footer {
  margin-left: 15px;
  margin-right: 15px;
  border-top: none;
    text-align: center;
}

.modal-header button.close {
  padding: 3px 5px 0 0;
}

.radioArea input{
	display: none;
}
.radioArea label{
	display: inline-block;
	cursor: pointer;
    margin: 0.5em 0.2em;
	padding: 6px 12px;
    font-size: 11px;
	text-align: center;
	background-color: #999999;
	color: #fff;
    line-height: 1.42857143;
	border-radius: 4px;
    font-weight: normal;
}
.radioArea input[type="radio"]:checked + label {
    background-color: #337ab7;
}


/*--------------------
    Tab
--------------------*/

.tab-content .tab-pane {
    position: relative;
}

/*--------------------
    Helper
--------------------*/

.displayInline {
  display: inline-block;
}

.btn {
    font-size: 11px;
}

.btnNowOn {
    color: #fff;
    background-color: #337ab7;
    border: none;
    margin: 0.5em 0.2em;
}


.btn-ptedit {
    background-color: #c9302c ;
    padding: 5px 8px;
    margin: 0.5em 0 !important;
}

.btnNowOff {
    color: #fff;
    background-color: #999999;
    border: none;
    margin: 0.5em 0.2em;
}



.btn:hover {
    color: #fff;
    opacity: 0.9;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
    color: #fff;
    outline: 0 none;
}

/*
.btn:active:focus {
  outline: thin dotted;
  outline: 5px auto;
  outline-offset: -2px;
  background-color: red;
}
*/

.tch-active {
    position: relative;
    top: 3px;
    left: 3px;
    -webkit-box-shadow: 0 1px 5px #CCC;
}

.textLarge {
    font-size: 14px;
}

.textMidium {
    font-size: 10px;
}

.textSmall {
    font-size: 9px;
}

.noMargin {
    margin: 0;
}


.bgColorFire {
    background-color: #AF1000;
}
.bgColorWater {
    background-color: #0475C6;
}
.bgColorEarth {
    background-color: #108006;
}
.bgColorThunder {
    background-color: #C8A207;
}
.bgColorLight {
    background-color: #8E9BA3;
}
.bgColorDark {
    background-color: #3E0555;
}

#bfparty_container {
    display: none;
}

#loading {
    position: absolute;
    left: 50%;
    top: 35%;
    margin-left: -50px;
    text-align: center;
    font-size: 12px;
}


/*--------------------
    for in
--------------------*/
body#bfptin {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fff;
}

#bfptin .img-responsive {
  display: inline-block;
}

#bfptin .container {
    padding-right: 0;
    padding-left: 0;
}

#bfptin .row {
    margin-right: 0;
    margin-left: 0;
}

#bfptin .col-xs-1, #bfptin .col-xs-2, #bfptin .col-xs-3, #bfptin .col-xs-4, #bfptin .col-xs-5, #bfptin .col-xs-6, #bfptin .col-xs-7, #bfptin .col-xs-8, #bfptin .col-xs-9, #bfptin .col-xs-10, #bfptin .col-xs-11, #bfptin .col-xs-12 {
    padding-right: 0;
    padding-left: 0;
}

#bfptin .sphereIcon {
    margin-right: 0;
}

#bfptin .detailArea {
  padding: 0.5em 0;
}

#bfptin .partyUnitArea {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 2;
    color: #fff;
    background-color: #000;
}

#bfptin .descritionText {
  padding-left: 4px;
}


#bfptin .close {
    position: fixed;
    top: 5px;
    right: 8px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: none;
    opacity: 1;
    z-index: 9999;
}

#bfptin .partyUnitArea {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
}

#bfptin .textRare {
  padding-left: 1px;
}

#bfptin strong {
  padding-right: 2px;
}

#bfptin .footText {
  font-size: 10px;
  background-color: #333;
  color: #fff;
  height: 20px;
}

#bfptin .footText p {
  margin: 0;
  padding: 2px;
}

#bfptin .footText a {
  color: #fff;
  text-decoration: underline;
}


#bfptin .detailShow1, #bfptin .detailShow2, #bfptin .detailShow3, #bfptin .detailShow4, #bfptin .detailShow5, #bfptin .detailShow6 {
  height: 70px;
  border-top: 1px solid #EFEFEF;
  border-right: 1px solid #EFEFEF;
  padding-top: 2px;
  padding-left: 2px;
  line-height: 1;
}

#bfptin .detailShow1, #bfptin .detailShow3, #bfptin .detailShow5 {
  border-left: 1px solid #EFEFEF;
}

#bfptin .detailShow2, #bfptin .detailShow4, #bfptin .detailShow6 {

}

#bfptin .textSmall {
  font-size: 9px;
}

/*--------------------
    htmlcommentbox
--------------------*/
#HCB_comment_box{
    font-size: 12px !important;
}

#HCB_comment_box blockquote {
    margin: 0 5px 0px !important;
    padding: 10px 10px 0 !important;
    font-size: 14px !important;
}

#HCB_comment_box .hcb-comment-tb {
    margin: 0 0 10px 20px !important
}

#HCB_comment_box h3{
    font-size: 14px !important;
    font-weight: bold;
}

#HCB_comment_box .comment {
    position: relative;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}

#HCB_comment_box p{
    font-size: 11px;
    font-weight: normal;
    margin-top: 5px;
}


/*--------------------
    ad
--------------------*/
.adArea {
    width: 310px;
    height: 48px;
    margin: 0px auto 20px;
}
.adArea2 {
    width: 300px;
    height: 250px;
    margin: 5px auto 10px;
}

h2.adLabel{
    width: 310px;
    font-size: 10px;
    margin: 5px auto 0;
    padding: 0;
    text-align: left;
}

@media (min-width:768px) {
    .adArea {
        width: 728px;
        height: 90px;
    }

    h2.adLabel{
        width: 728px;
        font-size: 12px;
    }
}


@media (min-width:768px) { .h2.adLabel { width: 728px; height: 90px; } }


/*--------------------
    Font-Resize
--------------------*/
@media screen and (min-device-width: 768px) {
    body {
        font-size: 18px;
    }
    .setsumeiArea h2 {
        font-size: 18px;
    }
    .setsumeiArea p,
    .setsumeiArea li {
        font-size: 14px;
    }
    .aisatsu {
        font-size: 14px;
    }
    table.dataTable {
        font-size: 14px;
    }
    table.dataTable caption {
        font-size: 14px;
    }
    .skillHead {
        font-size: 14px;
    }
    .modal-body h5{
        font-size: 16px;
    }
    .radioArea label{
        font-size: 14px;
    }
    .btn {
        font-size: 14px;
    }
    .textLarge {
        font-size: 18px;
    }
    .textMidium {
        font-size: 16px;
    }
    .textSmall {
        font-size: 14px;
    }
}