@charset "utf-8";

/* Site chrome and the small layout primitives formerly supplied by Lodestone. */
html, body {
  margin: 0;
  background: #191919;
}

#header_embed, #sns_embed, #footer_embed, body>.l__footer {
  position: relative;
  z-index: 5;
}

.sns {
  background: #111;
}

.ffxvi *, .ffxvi *::before, .ffxvi *::after {
  box-sizing: border-box;
}

.ffxvi img {
  vertical-align: middle;
}

.ffxvi a {
  cursor: pointer;
}

.pc_view {
  display: block;
}

.sp_view {
  display: none;
}

.ffxvi__items__list .db-tooltip__item__icon {
  position: relative;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  margin: 0;
}

.ffxvi__items__list .db-tooltip__item__icon>img {
  position: absolute;
  top: 0;
  left: 0;
}

/* Match the Japanese item layers; override the event-wide img width: 100%. */
.ffxvi__items__list .db-tooltip__item__icon__item_image {
  width: 64px;
  height: 64px;
  margin: 3px 0 0 6px;
}

.ffxvi__items__list .db-tooltip__item__icon__cover {
  position: absolute;
  inset: 0;
  width: 76px;
  height: 76px;
  background: url(../images/item_icon_cover.png) no-repeat;
}

.ffxvi__items__list .db-tooltip__item__icon>a {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.popup-content, .popup-content-sp {
  display: none;
}

.ldst-nav__floating__list__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
}

.ldst-nav__floating__list__close {
  display: none;
  z-index: 2;
}

.ldst-nav__floating__icon {
  z-index: 99;
  cursor: pointer;
}

.ldst-nav__floating {
  /* max-width: 480px; */
  width: 100%; 
  margin: 0 auto;
  position: relative;
}

.ldst-nav__floating__list {
  position: relative;
  display: none;
}

#eorzeadb_tooltip {
  display: none;
}

#popupOverlay .popupInner {
  max-width: 100%;
}

#popupOverlay .db-tooltip__l_main {
  max-width: 100%;
}

@media (max-width: 767px) {
  .pc_view {
    display: none;
  }

  .sp_view {
    display: block;
  }
}
/* Japanese mobile item sizing: 38px frame, 32px item, compact dye markers. */
@media (max-width: 430px) {
  .ffxvi__items__list .db-tooltip__item__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .ffxvi__items__list .db-tooltip__item__icon__item_image {
    width: 32px;
    height: 32px;
    margin: 1px 0 0 3px;
  }

  .ffxvi__items__list .db-tooltip__item__icon__cover {
    width: 38px;
    height: 38px;
    background-size: 38px 38px;
  }

  .ffxvi__items__list .db-tooltip__item__icon .staining {
    width: 10px;
    height: 10px;
    top: 1px;
    right: 3px;
  }

  .ffxvi__items__list .db-tooltip__item__icon .stain2 {
    top: 10px;
  }
}