@charset "UTF-8";
/*パンクズが長かった場合の処理*/
.pankuzu ul li {
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.page-title {
  background: url("../img/pbc-news/mv-img.jpg") no-repeat top center/cover;
}
@media only screen and (max-width: 767px) {
  .page-title {
    background: url("../img/pbc-news/sp/mv-img.jpg") no-repeat top center/cover;
  }
}

.news-detail {
  margin-bottom: 15rem;
}
@media only screen and (max-width: 767px) {
  .news-detail {
    margin-bottom: 18.6rem;
  }
}
.news-detail .inner {
  width: 110rem;
  margin: auto;
}
@media only screen and (max-width: 767px) {
  .news-detail .inner {
    width: 68.7rem;
  }
}
.news-detail .post-info {
  border-bottom: 1px solid #ccc;
  padding-bottom: 4.5rem;
  margin-bottom: 7.8rem;
}
@media only screen and (max-width: 767px) {
  .news-detail .post-info {
    margin-bottom: 10rem;
    padding-bottom: 5.8rem;
  }
}
.news-detail .post-info .top {
  background: url("../img/pbc-news/detail/info-bg.svg") no-repeat top right/cover;
  width: 40rem;
  line-height: 8rem;
  display: flex;
  align-items: center;
  padding: 0 0 0 5rem;
  margin-bottom: 3.4rem;
}
@media only screen and (max-width: 767px) {
  .news-detail .post-info .top {
    width: 56.7rem;
    line-height: 11rem;
    padding-left: 4rem;
    margin-bottom: 4.7rem;
  }
}
.news-detail .post-info .top time {
  font-size: 1.6rem;
  font-weight: 400;
  margin-right: 4rem;
  color: #fff;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .news-detail .post-info .top time {
    font-size: 2.8rem;
    margin-right: 5rem;
  }
}
.news-detail .post-info .top .category {
  font-size: 1.3rem;
  font-weight: 300;
  color: #ff0014;
  width: 12rem;
  line-height: 2;
  background: #fff;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .news-detail .post-info .top .category {
    width: 17rem;
    line-height: 3.4rem;
    font-size: 2rem;
  }
}
.news-detail .post-info .post-ttile {
  color: #ff0014;
  padding: 0 5rem;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}
@media only screen and (max-width: 767px) {
  .news-detail .post-info .post-ttile {
    font-size: 3.64rem;
    padding: 0;
    line-height: 1.714;
  }
}
.news-detail .news-detail-content {
  width: 110rem;
  margin: 0 auto 5.2rem;
  padding: 0 5rem 3.5rem;
  border-bottom: 1px solid #ccc;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content {
    padding: 0 0 4.4rem;
    width: 100%;
    margin-bottom: 5.8rem;
  }
}
.news-detail .news-detail-content .decoration {
  margin: 0 auto 5rem;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .news-detail .news-detail-content .decoration {
    width: 70rem;
  }
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content .decoration {
    width: 60.7rem;
    margin: 0 auto 7.4rem;
  }
}
.news-detail .news-detail-content .decoration::after {
  content: "";
  background: url("../img/pbc-news/detail/decoration-bg.svg") no-repeat center/cover;
  width: 10rem;
  height: 30rem;
  position: absolute;
  right: -2rem;
  bottom: -2rem;
}
.news-detail .news-detail-content .decoration figure {
  position: relative;
  z-index: 1;
}
.news-detail .news-detail-content .grid-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  margin-bottom: 4.2rem;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content .grid-image {
    grid-template-columns: 1fr;
    width: 44.7rem;
    margin: 0 auto 5.5rem;
    gap: 7.2rem;
  }
}
.news-detail .news-detail-content h3 {
  position: relative;
  display: inline-block;
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content h3 {
    margin-bottom: 2rem;
    padding: 0 2.3rem;
  }
}
.news-detail .news-detail-content h3::before {
  content: "";
  position: absolute;
  transform: skewX(-15deg);
  width: 100%;
  height: 1.2rem;
  background: rgba(250, 242, 33, 0.3);
  transform: skewX(-15deg);
  bottom: 0.3rem;
  left: 0;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content h3::before {
    height: 1.8rem;
  }
}
.news-detail .news-detail-content h3 mark {
  position: relative;
  z-index: 1;
  font-size: 2.6rem;
  font-weight: 700;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #ff0014;
  background: none;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content h3 mark {
    font-size: 3.4rem;
    line-height: 2.029;
  }
}
.news-detail .news-detail-content p {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.875;
  letter-spacing: 0.025em;
  margin-bottom: 3.3rem;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content p {
    font-size: 2.8rem;
    line-height: 1.714;
    margin-bottom: 4.4rem;
  }
}
.news-detail .news-detail-content h4 {
  position: relative;
  padding-left: 5.5rem;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content h4 {
    font-size: 3.2rem;
    line-height: 1.78125;
    padding-left: 8rem;
    letter-spacing: 0.1em;
    margin-bottom: 2.7rem;
  }
}
.news-detail .news-detail-content h4::before {
  content: "";
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 0;
  left: 0.1em;
  background: url("../img/pbc-news/detail/title-decoration.svg") no-repeat center/cover;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content h4::before {
    width: 6rem;
    height: 6rem;
    left: 0;
  }
}
.news-detail .news-detail-content .image-box {
  margin: 7rem auto 4rem;
}
@media only screen and (max-width: 767px) {
  .news-detail .news-detail-content .image-box {
    margin: 8.4rem auto 6.2rem;
  }
}
.news-detail .content-box__comment p {
  margin-bottom: 0;
}
.news-detail .content-box__comment p:empty::before {
  content: " ";
}
.news-detail .content-box__comment strong {
  font-weight: bold;
}
.news-detail .content-box__comment u {
  text-decoration: underline;
}
.news-detail .content-box__comment em {
  font-style: italic;
}
.news-detail .content-box__comment a {
  color: #ff0014;
  text-decoration: underline;
}
.news-detail .content-box__comment a:hover {
  text-decoration: none;
}
.news-detail .content-box__comment span.color {
  color: var(--color);
}

.detail-link-area {
  display: flex;
  align-items: center;
  padding: 0 3rem;
}
@media only screen and (max-width: 767px) {
  .detail-link-area {
    flex-wrap: wrap;
    padding: 0;
  }
}
.detail-link-area .prev,
.detail-link-area .next {
  min-width: 12rem;
}
.detail-link-area .prev a,
.detail-link-area .next a {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ff0014;
  position: relative;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .detail-link-area .prev a,
.detail-link-area .next a {
    font-size: 3.06rem;
  }
}
.detail-link-area .prev a::before,
.detail-link-area .next a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1.3rem;
  height: 1.3rem;
}
@media only screen and (max-width: 767px) {
  .detail-link-area .prev a::before,
.detail-link-area .next a::before {
    width: 2.2rem;
    height: 2.2rem;
  }
}
.detail-link-area .prev a {
  padding-left: 5.1rem;
}
@media only screen and (max-width: 767px) {
  .detail-link-area .prev a {
    padding-left: 9rem;
  }
}
.detail-link-area .prev a::before {
  border-top: 2px solid #ff0014;
  border-left: 2px solid #ff0014;
  transform: rotate(-45deg);
  left: 0;
}
@media only screen and (max-width: 767px) {
  .detail-link-area .next {
    margin-left: auto;
  }
}
.detail-link-area .next a {
  padding-right: 5.1rem;
}
@media only screen and (max-width: 767px) {
  .detail-link-area .next a {
    padding-right: 9rem;
  }
}
.detail-link-area .next a::before {
  border-top: 2px solid #ff0014;
  border-right: 2px solid #ff0014;
  transform: rotate(45deg);
  right: 0;
}
.detail-link-area .link-btn {
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .detail-link-area .link-btn {
    order: 3;
    margin-top: 6rem;
  }
}
.detail-link-area .link-btn a::after {
  position: absolute;
  top: 0;
  right: 2rem;
  bottom: 0;
  margin: auto;
}