/* ==========================================================================
   記事詳細（single）
   旧 resources/styles/layouts/_single.sass
   ========================================================================== */

body.single-post {
  & main {
    .postHeader {
      & h1 {
        font-family: 'Aoto Gothic Extra Bold', 'NotoSansJP-ExtraBold';
        font-size: 3.2rem;
        line-height: 1.625; /* calc(52 / 32) */
        text-align: center;
        @media only screen and (max-width: 767px) {
          font-size: 2rem;
          line-height: 1.8; /* calc(36 / 20) */
        }
      }
    }

    .postContent {
      margin-top: 62px;
      font-family: 'Aoto Gothic Bold', 'NotoSansJP-Bold';
      font-size: 1.5rem;
      letter-spacing: 0.025em;
      line-height: 2.2666666667; /* calc(34 / 15) */
      @media only screen and (max-width: 767px) {
        margin-top: 46px;
        font-size: 1.4rem;
        line-height: 2;
      }

      & p {
        /* 旧 @extend .wrap600 ＋ --outer-margin: 10px。
           %wrap 相当の宣言をインライン展開している。
           旧 SASS では %wrap の SP 用 --outer-margin: 16px も出力されていたが、
           あとから来る --outer-margin: 10px が後勝ちするため元から効いていない。 */
        --outer-margin: 10px;
        width: calc(100% - var(--outer-margin) * 2);
        margin: 0 auto;
        max-width: 600px;
      }

      & figure.wp-block-image {
        margin-top: 3.6rem;
        margin-bottom: 4.4rem;
        @media only screen and (max-width: 767px) {
          margin-top: 1.6rem;
          margin-bottom: 0;
        }
        & img {
          width: 100%;
          height: auto;
          border-radius: 15px;
          @media only screen and (max-width: 767px) {
            border-radius: 10px;
          }
        }
        > a {
          &:hover {
            &:after {
              opacity: 1;
            }
          }
        }
      }

      & figcaption {
        opacity: 0.5;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 1.2rem;
        text-align: right;
        @media only screen and (max-width: 767px) {
          margin-top: 6px;
          margin-right: 10px;
          font-size: 1rem;
        }
      }
    }
  }

  .postFooter {
    > .date {
      text-align: center;
      margin-top: 70px;
      margin-bottom: 122px;
      font-size: 1.9rem;
      line-height: 1;
      @media only screen and (max-width: 767px) {
        margin-top: 58px;
        margin-bottom: 75px;
      }
    }

    .adjacentPosts {
      /* 旧 @extend %wrap をインライン展開 */
      --outer-margin: 76px;
      width: calc(100% - var(--outer-margin) * 2);
      margin: 0 auto;
      max-width: 1048px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      --gap: 48px;
      column-gap: var(--gap);
      row-gap: var(--gap);
      @media only screen and (max-width: 767px) {
        grid-template-columns: 1fr;
        --gap: 58px;
        --outer-margin: 16px;
      }

      .hideInSp {
        @media only screen and (max-width: 767px) {
          display: none;
        }
      }

      & h6 {
        font-size: 1.9rem;
        letter-spacing: 0.025em;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 47px;
        justify-content: flex-start;
        @media only screen and (max-width: 767px) {
          margin-left: 10px;
          margin-bottom: 27px;
        }
        &:before {
          content: '';
          background-color: #000;
          display: block;
          width: 38px;
          height: 3px;
          @media only screen and (max-width: 767px) {
            display: none;
          }
        }
        &:after {
          @media only screen and (max-width: 767px) {
            content: '';
            background-color: #000;
            display: block;
            width: 26px;
            height: 2px;
            margin-left: 12px;
          }
        }
      }

      .next {
        & h6 {
          &:before {
            margin-right: 30px;
          }
        }
      }

      .prev {
        & h6 {
          flex-direction: row-reverse;
          @media only screen and (max-width: 767px) {
            flex-direction: row;
          }
          &:before {
            margin-left: 30px;
          }
        }
      }

      .post {
        .title {
          @media only screen and (max-width: 950px) {
            font-size: 1.8rem;
          }
        }
      }
    }

    .center {
      margin-top: 56px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}