/*
スライドバナータグ
Slider Banner Tag css
2019/10/31 Beta Ver.1.0

※class名
*--------------------------------**
▫︎ class="high3" → 高校3年生の方
▫︎ class="high2" → 高校2年生の方
▫︎ class="grad" → 既卒者の方
▫︎ class="guard" → 保護者の方
▫︎ class="overseas" → 留学生の方

*/

/* 共通
-----------------------*/
.high3 .tag-title,
.high2 .tag-title,
.grad .tag-title,
.guard .tag-title,
.overseas .tag-title {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  font-size: 15px;
  color: #ffffff;
  font-weight: bold;
  width: 17%; /* 全タグの幅 */
  min-width: 108px;
}
/* 共通 /-----------------------*/

/* 高３向け */
.high3 { position: relative;}
.high3 .tag-title { background: #f06eab;}
.high3 .tag-title::before {
  content:'高校3年生の方';
  position: absolute;
  top: 0;
  left: 9px;
  display: inline-block;
  word-break: keep-all;
}
.high3 .tag-title::after {
  content: "";
  position: absolute;
  right: -15px;
  border-right: 15px solid transparent;
  border-top: 25px solid #f06eab;
}

/* 高２向け */
.high2 { position: relative;}
.high2 .tag-title { background: #7acf00; }
.high2 .tag-title::before {
  content:'高校2年生の方';
  position: absolute;
  top: 0;
  left: 9px;
  display: inline-block;
  word-break: keep-all;
}
.high2 .tag-title::after {
  content: "";
  position: absolute;
  right: -15px;
  border-right: 15px solid transparent;
  border-top: 25px solid #7acf00;
}

/* 既卒者向け */
.grad { position: relative;}
.grad .tag-title { background: #45ae37; }
.grad .tag-title::before {
  content:'既卒者の方';
  position: absolute;
  top: 0;
  left: 9px;
  display: inline-block;
  word-break: keep-all;
}
.grad .tag-title::after {
  content: "";
  position: absolute;
  right: -15px;
  border-right: 15px solid transparent;
  border-top: 25px solid #45ae37;
}

/* 保護者向け */
.guard { position: relative;}
.guard .tag-title { background: #82b4c1; }
.guard .tag-title::before {
  content:'保護者の方';
  position: absolute;
  top: 0;
  left: 9px;
  display: inline-block;
  word-break: keep-all;
}
.guard .tag-title::after {
  content: "";
  position: absolute;
  right: -15px;
  border-right: 15px solid transparent;
  border-top: 25px solid #82b4c1;
}

/* 留学生向け */
.overseas { position: relative;}
.overseas .tag-title { background: #35c0f8; }
.overseas .tag-title::before {
  content:'留学生の方';
  position: absolute;
  top: 0;
  left: 9px;
  display: inline-block;
  word-break: keep-all;
}
.overseas .tag-title::after {
  content: "";
  position: absolute;
  right: -15px;
  border-right: 15px solid transparent;
  border-top: 25px solid #35c0f8;
}

/*
smartphone 対応
------------------------*/
@media screen and (max-width:640px) {
  /* 共通
  -----------------------*/
  .high3 .tag-title,
  .high2 .tag-title,
  .grad .tag-title,
  .guard .tag-title,
  .overseas .tag-title {
    width: 24%; /* 全タグの幅 */
    font-size: 14px;
    line-height: 27px;
  }
  /* 共通 /-----------------------*/



}