@charset "utf-8";

/* 
  イベント専用のモーダルボックス（ソロイベント用）
  
  【使い方】
    1. フォントカラー等を書き換えてください
    2. CSSを本番に配信してCSSのURLを開発の方（鹿森さん）に伝えてください
*/


/* --------------------------------------------------
 @: ベース
   ----------------------------------------------- */
.m-modalEvent{
  /* ベースフォントカラー */
  color: #333333;
  
  /* テキストの影 */
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

/* 強調フォントカラー */
.m-modalEvent>header .period .time,
.m-modalEvent>.action .stamina .unit,
.m-modalEvent>.action .stamina .value,
.m-modalEvent>.image .helper .info .name .value{
  color: #ff6e21;
}

.m-modalEvent>.image .helper .info .rare{
  /* レア度の★の色 */
  color: #fab758;
}


/* --------------------------------------------------
 @: 中央のメッセージエリア
   ----------------------------------------------- */
.m-modalEvent>.status{
  /* 背景色 */
  background: #fffbe0;
  
  /* ボーダーカラー */
  border-color: #ebcc8d;
  
  /* フォントカラー */
  color: #50412f;
}

/* 強調フォントカラー */
.m-modalEvent>.status .heal .value,
.m-modalEvent>.status .msgComplete .count,
.m-modalEvent>.status .msgComplete .name{
  color: #ff6e21;
}

/* --------------------------------------------------
 @: 「消費：n個」の下にあるリンク
   ----------------------------------------------- */
/* 通常 */
.m-modalEvent>.action .stamina .hint>a,
.m-modalEvent>.action .stamina .hint>span {
  /* 背景色 */
  background: #383971;
  
  /* フォントカラー */
  color: #dce4f7;
}

/* ホバー時 */
.m-modalEvent>.action .stamina .hint>a,
.m-modalEvent>.action .stamina .hint>span {
  /* 背景色 */
  background: #1f132a;
  
  /* フォントカラー */
  color: #fff;
}