/*
 * Mixin for placeholder
 * @include placeholderColor(#00ff00);
 */
#l-content .content-ttl h1 {
  width: 250px;
  margin-left: -125px;
}

@media screen and (min-width: 768px) {
  #l-content .content-ttl h1 {
    width: 500px;
    margin-left: -250px;
  }
}

.u-news-area {
  background: #ffffff;
  margin: 0 15px;
  padding: 25px 15px 40px;
}

@media screen and (min-width: 768px) {
  .u-news-area {
    width: 1080px;
    margin: 0 auto;
    padding: 60px 180px 80px;
  }
}

.u-news-area .news-date {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.u-news-area .news-date dt {
  color: #7f7f7f;
  margin-right: 10px;
}

@media screen and (min-width: 768px) {
  .u-news-area .news-date dt {
    font-size: 2.0rem;
    margin-right: 20px;
  }
}

.u-news-area .news-date dd .news-cat {
  display: inline-block;
  border: 1px solid #ff6500;
  line-height: 1;
  font-size: 10px;
  font-size: 1.0rem;
  color: #ff6500;
  padding: 3px 15px;
  border-radius: 10px;
}

@media screen and (min-width: 768px) {
  .u-news-area .news-date dd .news-cat {
    font-size: 1.4rem;
    padding: 2px 18px 3px;
    border: 2px solid #ff6500;
    border-radius: 12px;
  }
}

.u-news-area .news-date dd .news-cat.cat-news {
  color: #0da0ff;
  border-color: #0da0ff;
}

.u-news-area .news-date dd .news-cat.cat-goods {
  color: #ff7d3d;
  border-color: #ff7d3d;
}

.u-news-area .news-ttl {
  margin-top: 15px;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.5;
  padding-bottom: calc(3% + 10px);
  position: relative;
  background: url(/tv/bo-bobo/images/news/ttl_bg_sp.svg) bottom center no-repeat;
  background-size: 100% auto;
}

@media screen and (min-width: 768px) {
  .u-news-area .news-ttl {
    margin-top: 25px;
    padding-bottom: 45px;
    background: url(/tv/bo-bobo/images/news/ttl_bg_pc.png) bottom center no-repeat;
    background-size: auto auto;
  }
}

.u-news-back {
  margin: 40px 15px 0;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .u-news-back {
    width: 1080px;
    margin: 80px auto 0;
  }
}

.u-news-content {
  margin-top: 30px;
}

.u-news-content > *:first-child {
  margin-top: 0 !important;
}

@media screen and (min-width: 768px) {
  .u-news-content > .image-position-left:first-child + *,
  .u-news-content > .image-position-right:first-child + * {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .u-news-content > [data-gs]:first-child [data-gs-col]:first-child > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="12"]:nth-child(-n+1) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="12"]:nth-child(-n+1) > [data-gs]:first-child > [data-gs-col="12"]:nth-child(-n+1) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="12"]:nth-child(-n+1) > [data-gs]:first-child > [data-gs-col="6"]:nth-child(-n+2) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="6"]:nth-child(-n+2) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="6"]:nth-child(-n+2) > [data-gs]:first-child > [data-gs-col="12"]:nth-child(-n+1) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="6"]:nth-child(-n+2) > [data-gs]:first-child > [data-gs-col="6"]:nth-child(-n+2) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="4"]:nth-child(-n+3) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="4"]:nth-child(-n+3) > [data-gs]:first-child > [data-gs-col="12"]:nth-child(-n+1) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="4"]:nth-child(-n+3) > [data-gs]:first-child > [data-gs-col="6"]:nth-child(-n+2) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="3"]:nth-child(-n+4) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="3"]:nth-child(-n+4) > [data-gs]:first-child > [data-gs-col="12"]:nth-child(-n+1) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs]:first-child > [data-gs-col="3"]:nth-child(-n+4) > [data-gs]:first-child > [data-gs-col="6"]:nth-child(-n+2) > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content > [data-gs-group]:first-child > [data-gs-col] > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .u-news-content {
    margin-top: 60px;
  }
}

.u-news-content h3 {
  margin-top: 30px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .u-news-content h3 {
    margin-top: 55px;
    font-size: 2.0rem;
  }
}

.u-news-content h4 {
  margin-top: 15px;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .u-news-content h4 {
    margin-top: 25px;
  }
}

.u-news-content p {
  margin-top: 15px;
}

@media screen and (min-width: 768px) {
  .u-news-content p {
    margin-top: 25px;
  }
}

.u-news-content .p-strong {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .u-news-content .p-strong {
    font-size: 2.0rem;
  }
}

.u-news-content .p-att {
  margin-top: 10px;
  position: relative;
  padding-left: 1.1em;
}

.u-news-content .p-att .att-icon {
  position: absolute;
  left: 0px;
  top: 0px;
}

.u-news-content a {
  text-decoration: underline;
}

.u-news-content table {
  margin-top: 20px;
  width: 100%;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

@media screen and (min-width: 768px) {
  .u-news-content table {
    margin-top: 55px;
  }
}

.u-news-content table th, .u-news-content table td {
  vertical-align: middle;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 2px 5px 3px;
}

@media screen and (min-width: 768px) {
  .u-news-content table th, .u-news-content table td {
    padding: 10px;
  }
}

.u-news-content table th.nowrap, .u-news-content table td.nowrap {
  white-space: nowrap;
}

.u-news-content table th {
  background: #000;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

.u-news-content table td {
  text-align: left;
}

.u-news-content table thead th, .u-news-content table thead td {
  text-align: center;
  background: #000;
  color: #ffffff;
  font-weight: bold;
}

.u-news-content .news-goods + .news-goods {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .u-news-content .news-goods + .news-goods {
    margin-top: 0;
  }
}

.u-news-content .news-goods h4 {
  margin-top: 10px;
}

.u-news-content .news-goods table {
  margin-top: 10px;
}