.article-content{
  margin: 120px auto 0;
  background: #fff;
  width: 100%;
  max-width: 1048px;
  padding: 112px 0;
  @media screen and (max-width: 767px){
    width: 95%;
    margin: 56px auto 0;
    padding: 40px 20px;
  }
}
.single-article{
  width: 95%;
  max-width: 866px;
  margin: 0 auto;
}
.single-meta{
  display: flex;
  gap: 16px;
}
.post-cat{
  font-size: 12px;
  font-weight: 700;
  .cat-item{
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 2px 8px 4px;
    margin-right: 4px;
  }
}
.post-date,
.post-update{
  font-size: 12px;
}
.post-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media screen and (max-width: 767px){
    display: block;
  }
}

.snslist{
  display: flex;
  justify-content: end;
  align-items: center;
  @media screen and (max-width: 767px){
    justify-content: center;
    margin-top: 8px;
  }
  .tw{
    padding-top: 16px;
    margin-left: 8px;
  }
}
.single-title{
  line-height: 1.4;
  margin-bottom: 8px;
  @media screen and (max-width: 767px){
    margin-top: 20px;
  }
}

.single-content{
  margin-top: 40px;
  a{
    color: #0050a0;
    text-decoration: underline;
    position: relative;
    &::after{
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(/_assets/common/images/icon-blank.svg) no-repeat 0 0;
      background-size: cover;
      position: absolute;
      top: 50%;
      right: -25px;
      transform: translateY(-40%);
    }
    &:hover{
      text-decoration: none;
    }
  }
}

.block-title{
  width: 95%;
  max-width: 1048px;
  margin: 120px auto 0;
  border-bottom: 1px solid #808080;
  padding-bottom: 4px;
  position: relative;
  font-size: 28px;
  @media screen and (max-width: 767px){
    font-size: 20px;
    margin-top: 56px;
  }
  &::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    bottom: 3px;
  }
}
.related-posts ul{
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  width: 95%;
  max-width: 1048px;
  margin: 24px auto 0;
  @media screen and (max-width: 767px){
    gap: 28px;
  }
}
.post-item{
  width: calc((100% - 72px) / 3);
  @media screen and (max-width: 767px){
    width: 95%;
    margin: 0 auto;
  }
  &:hover{
    .post-thumb{
      img{
        border-radius: 16px;
        transform: scale(.8);
      }
    }
  }
  .post-cat{
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px 4px;
  }
  .post-date{
    font-size: 12px;
  }
  .meta-date{
    text-align: right;
  }
}
.post-thumb{
  background: #213B92;
  margin-bottom: 8px;
  overflow: hidden;
  img{
    vertical-align: bottom;
    transition: all .4s;
  }
}

.post-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 95%;
  max-width: 1048px;
  margin: 80px auto;
  font-size: 20px;
  @media screen and (max-width: 767px){
    gap: 12px 20px;
    flex-wrap: wrap;
    font-size: 12px;
  }
  p{
    width: 100%;
    max-width: 322px;
    text-align: center;
    position: relative;
    @media screen and (max-width: 767px){
      width: calc((100% - 20px) / 2);
    }
    &::before{
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 0;
      z-index: -1;
      background: transparent;
      border-radius: 999px;
      transition: all .4s cubic-bezier(.42, 0, .58, 1) 0s;
    }
    &:hover{
      &::before{
        background: #000;
        left: 0%;
        right: auto;
        width: 100%;
      }
    }
  }
  a{
    display: block;
    border: 1px solid #000;
    border-radius: 999px;
    padding: 12px 0;
    transition: all .4s;
    &:hover{
      color: #fff;
    }
  }
  p:first-child a{
    background: url(/news/wp-content/themes/gc-news/assets/images/arrow.png) no-repeat 10% 50%;
    &:hover{
      background: url(/news/wp-content/themes/gc-news/assets/images/arrow-wh.png) no-repeat 10% 50%;
    }
  }
  p:last-child a{
    background: url(/news/wp-content/themes/gc-news/assets/images/arrow-r.png) no-repeat 90% 50%;
    &:hover{
      background: url(/news/wp-content/themes/gc-news/assets/images/arrow-r-wh.png) no-repeat 90% 50%;
    }
    @media screen and (max-width: 767px){
      background: none;
    }
  }
  @media screen and (max-width: 767px){
    p:nth-child(2) a{
      background: url(/news/wp-content/themes/gc-news/assets/images/arrow-r.png) no-repeat 90% 50%;
      &:hover{
        background: url(/news/wp-content/themes/gc-news/assets/images/arrow-r-wh.png) no-repeat 90% 50%;
      }
    }
  }
}




.wp-block-image{
  text-align: center;
  img{
    width: 100%;
    height: auto;
  }
}
.wp-element-caption{
  display: none;
}


/* single page tag style */
.single-content{
  h2.wp-block-heading{
    color: #0050A0;
    font-size: 24px;
  }
  h3.wp-block-heading{
    color: #0050A0;
    font-size: 20px;
  }
  p{
    color: #5A5F64;
    margin-bottom: 24px;
  }
  strong{
    color: #333639;
  }
}