/* =========================
   Base
========================= */

.diary-horizontal {
  position: relative;
}

/* =========================
   PC Layout
========================= */

@media (min-width: 768px) {

  .diary-horizontal {
    display: grid;
    grid-template-columns: 240px 1fr 240px;
    min-height: 100vh;
    padding-top: var(--header-height, 80px);
    box-sizing: border-box;
  }

  /* アイキャッチ（左上固定） */
  .diary-eyecatch {
    padding: 32px;
  }

  .diary-eyecatch__img {
    position: sticky;
    top: calc(var(--header-height, 80px) + 32px);

    width: 180px;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    display: block;
  }

  /* 本文中央 */
  .diary-content {
    display: flex;
    justify-content: center;
    padding: 120px 24px;
  }

  .diary-article {
    max-width: 720px;
    width: 100%;
  }
}

/* =========================
   Mobile Layout
========================= */

@media (max-width: 767px) {

  /* 上：アイキャッチ */
  .diary-eyecatch {
    width: 100%;
  }

  .diary-eyecatch__img {
    width: 100%;
    height: auto;
    display: block;
  }

  .diary-eyecatch {
    position: relative;
  }

  /* 本文 */
  .diary-content {
    padding: 40px 20px;
  }

  .diary-article {
    max-width: 100%;
  }
}

/* =========================
   Typography
========================= */

.diary-title {
  font-size: 28px;
  margin-bottom: 48px;
  text-align: center;
}

.diary-body {
  font-size: 16px;
  line-height: 2;
}

.diary-body p {
  margin-bottom: 1.8em;
}