/* Base */
.c-Banner,
.c-Banner--Border,
.c-Banner--Large {
  display: block;
  color: #ccc;
  position: relative;
}

/* Arrow icon color overrides inside Banner */
.c-Banner .p-Icon--ArrowRight::before,
.c-Banner--Border .p-Icon--ArrowRight::before,
.c-Banner--Large .p-Icon--ArrowRight::before,
.c-Banner .p-Icon--ArrowRight::after,
.c-Banner--Border .p-Icon--ArrowRight::after,
.c-Banner--Large .p-Icon--ArrowRight::after,
.c-Banner .p-Icon--ArrowLeft::before,
.c-Banner--Border .p-Icon--ArrowLeft::before,
.c-Banner--Large .p-Icon--ArrowLeft::before,
.c-Banner .p-Icon--ArrowLeft::after,
.c-Banner--Border .p-Icon--ArrowLeft::after,
.c-Banner--Large .p-Icon--ArrowLeft::after {
  border-bottom-color: #ccc;
}

.c-Banner .p-Icon--ArrowRight::before,
.c-Banner--Border .p-Icon--ArrowRight::before,
.c-Banner--Large .p-Icon--ArrowRight::before {
  border-right-color: #ccc;
}

.c-Banner .p-Icon--ArrowLeft::before,
.c-Banner--Border .p-Icon--ArrowLeft::before,
.c-Banner--Large .p-Icon--ArrowLeft::before {
  border-left-color: #ccc;
}

/* Spacing */
@media print, screen and (min-width: 769px) {
  .c-Banner,
  .c-Banner--Border,
  .c-Banner--Large {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}

@media print, screen and (max-width: 768px) {
  .c-Banner,
  .c-Banner--Border,
  .c-Banner--Large {
    padding-top: 8vw;
    padding-bottom: 8vw;
  }
}

/* Variants */
.c-Banner--Border {
  border: 1px solid #ccc;
}

@media print, screen and (min-width: 769px) {
  .c-Banner--Large {
    padding-top: 146px;
    padding-bottom: 146px;
  }
}

@media print, screen and (max-width: 768px) {
  .c-Banner--Large {
    margin-bottom: 26.66vw;
    margin-right: -5.34vw;
    margin-left: -5.34vw;
    padding-top: 25.6vw;
    padding-bottom: 25.6vw;
  }
}

/* Elements */
.c-Banner__Inner {
  display: flex;
  flex-direction: column;
}

.c-Banner__Box {
  width: 100%;
}

.c-Banner__Category {
  font-family:
    "游明朝体", "YuMincho", "游明朝", "Yu Mincho",
    "Noto Serif JP", "Roboto",
    "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic",
    "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
}

@media print, screen and (min-width: 769px) {
  .l-HeadlineLevel2 {
        font-size:30px;
    }

  .c-Banner__Category {
    font-size: 24px;
  }
}

@media print, screen and (max-width: 768px) {
  .c-Banner__Category {
    font-size: 4.26vw;
  }
}

@media print, screen and (min-width: 769px) {
  .c-Banner__Text {
    font-size: 16px;
  }
}

@media print, screen and (max-width: 768px) {
  .c-Banner__Text {
    font-size: 4.26vw;
  }

  /* Why: モバイル時の Large 変種だけ文言を画像上に重ねる指定 */
  .c-Banner--Large .c-Banner__Text {
    color: #0a1641;
    position: absolute;
    bottom: 0;
    left: 5.33vw;
    z-index: 1;
    transform: translateY(130%);
  }
}

@media print, screen and (min-width: 769px) {
  .c-Banner__Icon {
    display: none;
  }
}

@media print, screen and (max-width: 768px) {
  .c-Banner__Icon {
    margin-top: 5.33vw;
    font-size: 3.46vw;
  }
}

.c-Banner__Bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translate3d(-50%, 0, 0);
}

.c-Banner__Bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}