/* 注: swiper の CSS はこのファイルでは @import しない（vendor として別途 enqueue する）。
   旧 news.sass の `@import '~swiper/swiper-bundle.css'` は webpack 専用記法で、
   ビルド廃止後はテーマで swiper-bundle.css を直接読み込む構成にする。 */

body.post-type-archive,
body.single-post {
  main {
    section.mv {
      @media only screen and (min-width: 768px) {
        height: 70vh;
      }
      .slide1 {
        background-image: url('../../../image/news/mv/1@2x.jpg');
        @media only screen and (max-width: 767px) {
          background-image: url('../../../image/news/mv/1-sp@2x.jpg');
        }
      }
    }
    .post + .post {
      margin-top: 200px;
      @media only screen and (max-width: 767px) {
        margin-top: 156px;
      }
    }
    .post {
      header {
        a {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 23px;
          @media only screen and (max-width: 767px) {
            margin-bottom: 0;
          }
        }
        h1 {
          font-size: 2.4rem;
          letter-spacing: 0.04em;
          line-height: calc(50 / 24);
          text-align: left;
          width: 446px;
          @media only screen and (max-width: 767px) {
            width: 206px;
            font-size: 1.8rem;
            line-height: calc(32 / 18);
            br {
              display: none;
            }
          }
        }
        .date {
          margin-top: 10px;
          display: flex;
          align-items: center;
          font-size: 1.4rem;
          letter-spacing: 0.006em;
          @media only screen and (max-width: 767px) {
            margin-top: 3px;
          }
          i {
            display: block;
            width: 94px;
            border-top: 1px solid #707070;
            margin-right: 10px;
            opacity: 0.36;
            @media only screen and (max-width: 767px) {
              width: 33px;
            }
          }
        }
      }
      .categories {
        margin-top: 24px;
        @media only screen and (max-width: 767px) {
          margin-top: 17px;
        }
        .category + .category {
          margin-left: 2em;
        }
        .category {
          display: inlin-block;
          font-size: 1.3rem;
          img {
            align-self: center;
            vertical-align: middle;
            margin-right: 2px;
            position: relative;
            top: -1px;
          }
        }
      }
      article {
        margin-top: 62px;
        font-size: 1.5rem;
        letter-spacing: 0.025em;
        line-height: calc(34 / 15);
        @media only screen and (max-width: 767px) {
          margin-top: 56px;
          font-size: 1.4rem;
          line-height: 2;
        }
        a[href] {
          color: #575757;
          transition: color 0.2s;
          &:hover {
            color: inherit;
          }
        }
        p {
          min-height: calc(34 / 15 * 1em); /* 空行がつまらないように */
          @media only screen and (max-width: 767px) {
            min-height: calc(2 * 1em);
          }
        }
        p + p {
          margin-top: 1em;
        }
        figure.wp-block-image {
          margin-top: 2em;
          margin-bottom: 2em;
          > a {
            &:after {
              margin-top: 30px;
              content: url(../../../image/news/zoom-image.svg);
              display: flex;
              justify-content: center;
              align-items: center;
              width: 136px;
              height: 36px;
              padding-top: 6px; /* 上下中央配置 */
              border: 1px solid #7B7B78;
              opacity: 0.75;
              transition: opacity 0.2s;
            }
            &:hover {
              &:after {
                opacity: 1;
              }
            }
          }
          > a + figcaption {
            margin-top: 25px;
          }
        }
        figcaption {
          font-size: 1.2rem;
          @media only screen and (max-width: 767px) {
            font-size: 1rem;
          }
        }
      }
    }
    .pagination {
      margin-top: 160px;
      padding-bottom: 121px;
      display: flex;
      justify-content: center;
      @media only screen and (max-width: 767px) {
        margin-top: 110px;
        padding-bottom: 60px;
      }
      .screen-reader-text {
        display: none;
      }
      .nav-links {
        display: flex;
        align-items: center;
      }
      .page-numbers + .page-numbers {
        margin-left: 24px;
      }
      .page-numbers {
        font-family: var(--font-palatino-l);
        font-weight: normal;
        font-size: 2.1rem;
        letter-spacing: 0.06em;
        height: 2em;
        &.current {
          border-bottom: 1px solid #1A1A1A;
        }
      }
      .next,
      .prev {
        display: flex;
        justify-content: center;
        align-items: center;
        &.disabled {
          opacity: 0.26;
        }
      }
      .next {
        &::before {
          content: url(../../../image/news/next.svg);
        }
      }
      .prev {
        &::before {
          content: url(../../../image/news/prev.svg);
        }
      }
    }
  }
}