@charset "UTF-8";

/* =====================
  01
===================== */
.tab-message {
  .article[data-id='1'] {
    padding-block-end: 152px;

    @media (width <=768px) {
      padding-block-end: var(--nudge-9);
    }

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;

      @media (width <=768px) {
        gap: 0;
      }
    }

    /* ==== catch ==== */
    .catch {
      display: block grid;
      margin-block-start: 89px;
      margin-inline: auto;
      font-size: 44px;
      font-weight: 500;
      line-height: 190%;

      @media (width > 768px) {
        translate: -72px 0;

        span {
          padding-inline-start: calc(var(--_indent) * 1.45em);
        }
      }

      @media (width <=768px) {
        margin-block-start: var(--nudge-5);
        margin-inline: auto;
        font-size: calc((100 / 390) * 31 * 1vw);
        text-align: center;
      }
    }

    /* ==== body ==== */
    .body {
      margin-block-start: 37px;
      line-height: 1.9;
      letter-spacing: 0.16px;

      @media (width > 768px) {
        max-inline-size: 760px;
        margin-inline: auto 0;
        margin-inline-end: 159px;
      }

      @media (width <=768px) {
        margin-block-start: var(--nudge-4);
        font-size: calc((100 / 390) * 15 * 1vw);
        line-height: 2;
      }
    }

    /* ==== author ==== */
    .author {
      display: block grid;
      margin-block-start: 40px;

      @media (width <=768px) {
        margin-block-start: var(--nudge-5);
        margin-inline: auto 0;
      }

      h3 {
        font-family: var(--sanserif);
        font-size: 15px;
        font-weight: 400;
        color: #111;

        @media (width <=768px) {
          font-size: calc((100 / 390) * 13 * 1vw);
        }
      }

      @media (width > 768px) {
        margin-inline: auto 0;
        margin-inline-end: 160px;
      }

      dl {
        display: block flex;
        gap: 20px;
        align-items: center;
        margin-block: calc((1em - 1lh) / 2);

        @media (width <=768px) {
          gap: var(--nudge-2);
        }

        dt {
          font-family: var(--sanserif);
          font-size: 15px;
          font-weight: 400;
          color: #111;

          @media (width <=768px) {
            font-size: calc((100 / 390) * 13 * 1vw);
          }
        }

        dd {
          font-family: 'Yuji Syuku', serif;
          font-size: 32px;
          font-weight: 400;
          color: #000;
          letter-spacing: 1.28px;

          @media (width <=768px) {
            font-size: calc((100 / 390) * 28 * 1vw);
          }
        }
      }
    }
  }
}