/* Scss Document */
#alertArea {
  background: #fff; }
  #alertArea ul {
    padding: 0;
    position: relative; }
    #alertArea ul.slick-slider {
      margin-bottom: 0;
      padding: 0; }
    #alertArea ul li {
      margin: 0; }
      #alertArea ul li:first-child {
        margin: 0; }
    #alertArea ul li.caution {
      font-weight: 900;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: none;
      padding: 0;
      background-color: #f8f8f8;
      border-radius: 4px; }
      #alertArea ul li.caution.show a {
        padding-bottom: 0;
        padding-left: 52px;
        background-position: 10px 15px; }
      #alertArea ul li.caution.show:last-child {
        padding-bottom: 13px; }
    #alertArea ul li.caution a {
      padding: 17px 0 13px 52px;
      background: url(/img/top/alertArea-icon-alert.png) no-repeat 10px 15px;
      display: block; }
    #alertArea ul li.alert a {
      padding: 17px 0 13px 52px;
      background: url(/img/top/alertArea-icon-alert.png) no-repeat 10px 15px;
      text-decoration:underline; 
      display: block; }
    #alertArea ul li.alert a:hover {
      text-decoration: none; }
    #alertArea ul li.notice a {
      padding: 17px 0 13px 52px;
      background: url(/img/top/alertArea-icon-notice.png) no-repeat 10px 15px;
      display: block; }
  #alertArea li.caution {
    background-position: left top; }
  #alertArea li.caution a {
    background: none; }
  #alertArea.noAnime .ac-btn {
    display: none; }

#alertArea {
  position: relative; }
  #alertArea .ac-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 100%;
    z-index: 1000;
    cursor: pointer; }
    #alertArea .ac-btn a {
      display: block;
      position: absolute;
      top: 16px;
      right: 8px;
      color: #ee0100; }
      #alertArea .ac-btn a:hover {
        text-decoration: none; }
      #alertArea .ac-btn a .icon {
        width: 8px;
        height: 8px;
        border-top: 1px solid #ee0100;
        border-left: 1px solid #ee0100;
        display: block;
        position: absolute;
        left: -20px;
        top: 3px;
        transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg); }
    #alertArea .ac-btn.open a .icon {
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      top: 7px; }

#alertArea ul {
  min-height: 52px;
  position: relative; }

.ac-btn {
  display: none; }

#alertArea .alert {
  opacity: 0;
  position: absolute; }

#alertArea .alert.show {
  opacity: 1;
  position: relative; }

.notice {
  opacity: 0;
  position: absolute; }

.notice.show {
  opacity: 1;
  position: relative; }

.fade {
  animation: fade-in  500ms forwards, fade-out 500ms 4000ms forwards; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }