/* 告知バー */

.course-alert{
  width:100%;
  background:#7a0000;
  color:#fff;
  padding:20px 40px 20px 20px;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;

  border-top:1px solid #e5e5e5;
  border-bottom:1px solid rgba(0,0,0,0.1);

  opacity:0;
  transform:translateY(-10px);
  transition:0.4s;

  overflow:hidden;
  max: height 120px;;
}

.course-alert.show{
  opacity:1;
  transform:translateY(0);
  max-height:120px;
}

/* NEWラベル */

.alert-label{
  background:#ffd700;
  color:#000;
  font-weight:bold;
  font-size:12px;
  padding:2px 6px;
  border-radius:3px;
}

/* リンク */

.course-alert-link{
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.course-alert-link:hover{
  text-decoration:underline;
}

/* 見出し */

.alert-title{
  font-size:20px;
  font-weight:bold;
  line-height:1.2;
}

/* 本文 */

.alert-text{
  font-size:15px;
  opacity:0.9;
}

/* 閉じる */

.course-alert-close{
  position:absolute;
  right:12px;
  top:8px;
  border:none;
  background:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

/* 閉じるアニメーション */

.course-alert.hide{
  opacity:0;
  transform:translateY(-10px);
  max-height:0;
  padding-top:0;
  padding-bottom:0;
}

/* スマホ */

@media (max-width:768px){

.course-alert{
  font-size:14px;
  padding:16px 32px 16px 16px;
}

.alert-label{
  font-size:11px;
}

.alert-title{
  font-size:16px;
}

.alert-text{
  font-size:13px;
}
}