@charset "utf-8";
/* --------------------------------------------------
  厄払い
-------------------------------------------------- */
/* ----- コンテンツ基準幅 ----- */
#marlin-main {
  margin-right: auto;
  margin-left: auto;
  width: 560px;
  font-size: 14px;
}

/* ----- 見出し ----- */
.marlin-head {
}
.marlin-text {
  margin-right: auto;
  margin-left: auto;
  width: 520px;
}

/* ----- ふくびきまん ----- */
.fukidashi {
  position: relative;
  width: 500px;
  height: 120px;
  background-color:#fff;
  border-radius: 10px;
  border:2px solid #be5c31;
  box-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
  margin:60px auto 100px auto;
  padding:10px 23px;
  box-sizing: border-box;
}
.fukidashi span{
  font-size: 14px;
  font-weight: bold;
  color:#000;
}
.fukidashi-arrow {
  position:absolute;
  right:166px;
  bottom:-22px;
  width:27px;
  height:22px;
  background:url(../../img/event/lobstergp/fukidashi/fukidashi.png);
}
.fukidashi-start {
  position:absolute;
  right:-30px;
  bottom:-110px;
  width:176px;
  height:221px;
  background:url(../../img/event/lobstergp/fukidashi/natsuri01.png);
}
.fukidashi-02 {
  position:absolute;
  right:-30px;
  bottom:-110px;
  width:176px;
  height:221px;
  background:url(../../img/event/lobstergp/fukidashi/natsuri02.png);
}
.fukidashi-03 {
  position:absolute;
  right:-30px;
  bottom:-110px;
  width:176px;
  height:221px;
  background:url(../../img/event/lobstergp/fukidashi/natsuri03.png);
}

.arrow-natsuri {
  position:relative;
  top:-50px;
  right:-250px;
  width:139px;
  height:32px;
  background:url(../../img/event/lobstergp/fukidashi/arrow_natsuri.png);
}
/* ----- イベントメイン ----- */
#marlin-monster {
  width: 550px;
  height: 602px;
  position: relative;
  text-align:center;
  margin:0 auto;
}
  /* ふきだしエリア */
  #marlin-monster-fukidashi {
    position: relative;
    top: 500px;
    margin-right: auto;
    margin-left: auto;
    width: 494px;
    height: 168px;
    color: #fff;
    font-weight: bold;
  }
  /* ふきだしテキストエリア */
  #marlin-monster-text {
    position: absolute;
    height:115px;
    display:flex;
    justify-content: center;
    align-items: center;
    align-content:center;
    bottom:35px;
    left:0%;
    right:0%;
    text-align: center;
    line-height: 1.0;
    color:#fff;
    font-weight:bold;
  }
    #marlin-monster-text li:first-child {
      margin-bottom: 8px;
    }
    /* 討伐カウントエリア */
    #marlin-monster-text li:first-child + li {
      margin-bottom: 18px;
    }
    /* ステータスエリア */
    #marlin-monster-status {
      margin-bottom: 18px;
      font-size: 16px;
    }
      #marlin-monster-status .progress {/* 経過 */
        color: #ffe000;
      }
      #marlin-monster-status .failure {/* 失敗 */
        color: #ff0000;
      }
      #marlin-monster-status .success {/* 成功 */
        color: #5cfffd;
      }

    /* 討伐数 */
    #marlin-monster-count {
      color: #ff0000;
      font-size: 30px;
    }
  /* 体力ゲージ */
  #marlin-monster-hp {
    margin-right: auto;
    margin-left: auto;
    width: 355px;
  }
    #marlin-monster-hp dt {
    }
    #marlin-monster-hp img {
      vertical-align: top !important;
    }
    /* ゲージはここから */
    #marlin-monster-hp dd {
      padding-top: 1px;
    }
    #marlin-monster-hp-gauge {
      width: 277px;
      height: 11px;
    }
      #marlin-monster-hp-gauge ul {
        width: 275px;
        height: 9px;
        border: 1px solid #515151;
        background-color: #282828;
      }
      /* 緑ゲージ */
      #marlin-monster-hp-gauge li {
        width: 100%;
        height: 9px;
        background-color: #1af419;
      }
      /* HP半分 */
      #marlin-monster-hp-gauge li.damaged {
        background-color: #ffd618;
      }
      #marlin-monster-hp-gauge li.dying {
        background-color: #ff0000;
      }

.marlin-level {
  position: absolute;
  right:400px;
  bottom:187px;
  font-weight:bold;
  color:#fff;
}
.marlin-mater {
  position: absolute;
  bottom:182px;
  right:43px;
  height:49px;
  background-repeat: no-repeat;

}
  .marlin-mater.ico-100 {
    background-position: -3px 0px;
  }
  .marlin-mater.ico-80 {
    background-position: 1px 1px;
  }
  .marlin-mater.ico-60 {
    background-position: 1px 2px;
  }
  .marlin-mater.ico-40 {
    background-position: 3px 2px;
  }
  .marlin-mater.ico-20 {
    background-position: 4px 2px;
  }
.ico-20 {
  width:59px;
}
.ico-40 {
  width:124px;
}
.ico-60 {
  width:189px;
}
.ico-80 {
  width:254px;
}
.ico-100{
  width:319px;
}




/* ----- 報酬 ----- */
#marlin-reward {
}
  /* 報酬リスト */
  #marlin-reward-list {
  }
    #marlin-reward-list .common-table {
      width: 520px;
      font-weight: bold;
      border: 2px solid #012345!important;
    }
    #marlin-reward-list .common-th,
    #marlin-reward-list .common-th-em {
      border-bottom: 1px dotted #a0a0a0;
    }
    #marlin-reward-list .common-td {
      border-left: none;
      border-right: none;
      border-bottom: 1px dotted #a0a0a0;
    }
    /* クリア済み報酬 */
    .marlin-reward-list-cleared .common-table{
      border: 2px solid #a71e1e!important;
    }
      .marlin-reward-list-cleared .common-th-em {
        color: #ffa29c;
        background-color: #a71e1e!important;
      }
      .marlin-reward-list-cleared .common-td {
        color: #d90000;
        background-color: #ffd3d0!important;
      }

    .marlin-reward-list-count {/* 達成数 */
      width: 30%;
      text-align: center !important;
      background-color: #134b83!important;
    }
    .marlin-reward-list-icon {/* アイコン */
      width: 11.5%;
      text-align: center;
    }
      .marlin-reward-list-icon img {
        width: 36px;
        height: 36px;
      }
    .marlin-reward-list-name {/* 商品名 */
      padding: 0 !important;
      line-height: 1.0;
    }
    .marlin-reward-list-status {/* 達成状況 */
      width: 20%;
    }
      /* クリアアイコンは通常非表示 */
      .marlin-reward-list-status img {
        display: none;
      }
      /* クリアしたらアイコン表示 */
      .marlin-reward-list-cleared .marlin-reward-list-status img {
        display: block;
      }
  /* 報酬アイテムを受け取るボタン */
  #marlin-get-reward-button {
    overflow: hidden;
    display: block;
    width: 378px;
    height: 43px;
    text-indent: -9999em;
    background-image: url(../../img/event/lobstergp/button/get_reward.png);
  }

  /* 報酬アイテムを受け取るボタン */
  #marlin-yumeututu-button {
    overflow: hidden;
    display: block;
    width: 378px;
    height: 43px;
    text-indent: -9999em;
    background-image: url(../../img/event/lobstergp/button/fishing.png);
  }

/* ----- 報酬アイテム確認画面用 ----- */
/* 報酬リスト */
#marlin-reward-list-confirm {
}
  #marlin-reward-list-confirm .common-table {
    width: 520px;
    font-weight: bold;
    border: 1px solid #777;
  }
  #marlin-reward-list-confirm .common-td {
    border-left: none;
    border-right: none;
  }
  #marlin-reward-list-confirm .common-th {
    border-bottom: 1px dotted #fff;
  }

/* ----- トピックスへ戻るボタン ----- */
#marlin-back-button {
  overflow: hidden;
  display: block;
  width: 220px;
  height: 30px;
  text-indent: -9999em;
  background-image: url(../../img/event/dark2016/button/back.png);
}

/* ----- アイテム受け取り ----- */
.marlin-reward-chara {
  margin: 0 0 24px 0;
}
  .marlin-reward-chara table {
    margin: auto;
    width: 520px;
    border: 1px solid #777;
    background-color: #fff;
  }
  .marlin-reward-chara th {
    width: 45%;
  }
  .marlin-reward-chara td {
    padding: 4px 10px;
  }
  .marlin-reward-chara img {
    display: block;
  }