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

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

/**
 * 進捗エリア
 */
.halloween-progress {
  position: relative;
  width: 552px;
  margin-right: auto;
  margin-left: auto;
}
.halloween-progress__main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* カウンターとセリフ */
.halloween-progress__counter,
.halloween-progress__serif {
  position: absolute;
  font-weight: bold;
  color: #fff;
}
.halloween-progress__counter {
  font-size: 18px;
  text-align: center;
  width: 100%;
  bottom: 40px;
}
.halloween-progress__serif {
  font-size: 14px;
  width: 300px;
  height: 194px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 45px;
  top: 105px;
}
.halloween-progress__clear-stamp {
  position: absolute;
  bottom: 50px;
  right: 20px;
}
/* あまとう */
.halloween-progress--0 {
  position: relative;
}
.halloween-progress--0 .halloween-progress__serif {
  top: 150px;
}
/* からとう */
.halloween-progress--1 {
  position: relative;
}
/* すっぱとう */
.halloween-progress--2 {
  position: relative;
}
.halloween-progress--2 .halloween-progress__counter {
  bottom: 68px;
}
.halloween-progress--2 .halloween-progress__clear-stamp {
  bottom: 75px;
}

/* ----- 報酬 ----- */
#halloween-reward {
}
/* 報酬リスト */
#halloween-reward-list {
}
#halloween-reward-list .common-table {
  margin-right: auto;
  margin-left: auto;
  width: 550px;
  font-weight: bold;
  border: 2px solid #4c3459 !important;
}
#halloween-reward-list .common-th-em {
  font-size: 12px;
  background-color: #4c3459;
  padding-top: 8px;
  padding-bottom: 8px;
}
#halloween-reward-list .common-th {
  background-color: #7c4d95;
}
#halloween-reward-list .common-th,
#halloween-reward-list .common-th-em,
#halloween-reward-list .common-td {
  text-align: center;
}
#halloween-reward-list .common-th,
#halloween-reward-list .common-th-em {
  border-bottom: 1px dotted #a0a0a0;
}
#halloween-reward-list tr .common-td:first-of-type {
  background-color: #f1d7ff;
}
/* 賞品アイコンとラベル */
.halloween-reward-item {
  display: flex;
  align-items: center;
}
.halloween-reward-item div {
  width: 34px;
  height: 34px;
  margin-right: 8px;
}

/**
     * クリア状態
     */
.halloween-reward-list-cleared .common-th {
  color: #ffde00;
  background-color: #ad6800 !important;
}
.halloween-reward-list-cleared .common-td {
  color: #d90000;
  background-color: #ffdca8 !important;
}

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

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

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