@charset "utf-8";

/* Base style
------------------------------ */
.lp-contents-figure {
  overflow: hidden;
  text-align: center;
}


/* Lead banner
------------------------------ */
.lp-lead-banner {
  margin: 0 auto;
  padding: 8px 4px;
  max-width: 970px;
  background: #3f3f3f;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f3f3f), to(#1c1c1c));
  background: -webkit-linear-gradient(top, #3f3f3f 0%, #1c1c1c 100%);
  background: linear-gradient(to bottom, #3f3f3f 0%, #1c1c1c 100%);
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 1.33;
}

.lp-lead-banner-label {
  position: relative;
  display: inline-block;
  padding: 0 68px;
}

.lp-lead-banner-label i {
  position: absolute;
  top: 50%;
  overflow: hidden;
  width: 24px;
  height: 28px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.lp-lead-banner-label i:first-child {
  left: 0;
}

.lp-lead-banner-label i:last-child {
  right: 0;
}

.lp-lead-banner-label i:before,
.lp-lead-banner-label i:after {
  position: absolute;
  content: "";
}

.lp-lead-banner-label i:before {
  top: 0;
  bottom: 6px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  background: #848484;
}

.lp-lead-banner-label i:after {
  right: 50%;
  bottom: 4px;
  width: 15px;
  height: 15px;
  border-right: 2px solid #848484;
  border-bottom: 2px solid #848484;
  -webkit-transform: rotate(36deg) skew(-16deg);
  transform: rotate(36deg) skew(-16deg);
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

.lp-lead-banner-label span {
  display: inline-block;
}


/* Media Queries
------------------------------ */
@media screen and (min-width: 768px) {
  .lp-lead-banner {
    padding: 4px;
    font-size: 29px;
  }
}

@media screen and (min-width: 970px) {
  .lp-contents-figure {
    margin-top: 40px;
  }

  .lp-lead-banner {
    margin-top: 16px;
  }
}