/*
 * Mixin for placeholder
 * @include placeholderColor(#00ff00);
 */

.imgpc { display: block !important; }
.imgsp { display: none !important; }
 
@media only screen and (max-width: 768px) {
.imgpc { display: none !important; }
.imgsp { display: block !important; }
}

#soccer .u-mainv {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: url("/assets/images/bg_soccer_sp.jpg") center top / auto 100% no-repeat,
                               url("/assets/images/bg_soccer4.jpg")center center / cover no-repeat;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 50px 10px 0;
}
@media print, screen and (min-width: 768px) and (orientation: landscape) {
  #soccer .u-mainv {
    padding: 75px 148px;
  background: url("/assets/images/bg_soccer.jpg") center top / auto 100% no-repeat,
                               url("/assets/images/bg_soccer4.jpg")center center / cover no-repeat;
  }
}

@media print, screen and (min-width: 768px) and (orientation: landscape) {
  #soccer .u-mainv:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 604px;
    background: url("/assets/svg/p_txt_soccer_center.svg") no-repeat center center/contain;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

#soccer .u-mainv .copy-horizon {
  width: 500px;
  height: auto;
  margin: 80px auto 40px;
  display: block;
}

@media screen and (max-width: 767px) {
  #soccer .u-mainv .copy-horizon {
    margin: 40px auto;
    width: 66vw;
  }
}

#soccer .u-mainv .soccer-wrap {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

#soccer .u-mainv .soccer-left {
  color: #fff;
}

@media print, screen and (min-width: 768px) and (orientation: landscape) {
  #soccer .u-mainv .soccer-left {
    width: 40%;
  }
}

#soccer .u-mainv .soccer-left > * + * {
  margin-top: 16px;
}

@media print, screen and (min-width: 768px) {
  #soccer .u-mainv .soccer-left > * + * {
    margin-top: 342px;
  }
}

#soccer .u-mainv .soccer-left .left-item > * + * {
  margin-top: 8px;
}

@media print, screen and (min-width: 768px) {
  #soccer .u-mainv .soccer-left .left-item > * + * {
    margin-top: 18px;
  }
}

#soccer .u-mainv .soccer-left .left-item .item-img {
  width: calc(50% - 8px);
}

#soccer .u-mainv .soccer-left .left-item h2 {
  font-size: 12px;
  line-height: 1.2;
  font-weight: bold;
}

@media print, screen and (min-width: 768px) {
  #soccer .u-mainv .soccer-left .left-item h2 {
    font-size: 24px;
    line-height: 1.5;
  }
}

#soccer .u-mainv .soccer-left .left-item h3 {
  font-weight: bold;
}

#soccer .u-mainv .soccer-left .left-item p {
  font-size: 10px;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  #soccer .u-mainv .soccer-left .left-item p {
    width: 70%;
  }
}

@media print, screen and (min-width: 768px) {
  #soccer .u-mainv .soccer-left .left-item p {
    font-size: 12px;
    line-height: 1.5;
  }
}

#soccer .u-mainv .soccer-left .left-item .m-btn-common {
  width: calc(50% - 8px);
}

@media screen and (max-width: 767px) {
  #soccer #l-footer .footer-copy {
    color: #fff;
  }
}