@charset "UTF-8";

/* 共通ユーティリティ：数字はpx。例 u-mt-24 = margin-top:24px。 */
/* 明示的な余白指定が既存デザインより優先されるよう !important を使用。 */
.u-mt-0 {
  margin-top: 0px !important;
}
.u-mt-4 {
  margin-top: 4px !important;
}
.u-mt-8 {
  margin-top: 8px !important;
}
.u-mt-12 {
  margin-top: 12px !important;
}
.u-mt-16 {
  margin-top: 16px !important;
}
.u-mt-24 {
  margin-top: 24px !important;
}
.u-mt-32 {
  margin-top: 32px !important;
}
.u-mt-48 {
  margin-top: 48px !important;
}
.u-mt-64 {
  margin-top: 64px !important;
}
.u-mb-0 {
  margin-bottom: 0px !important;
}
.u-mb-4 {
  margin-bottom: 4px !important;
}
.u-mb-8 {
  margin-bottom: 8px !important;
}
.u-mb-12 {
  margin-bottom: 12px !important;
}
.u-mb-16 {
  margin-bottom: 16px !important;
}
.u-mb-24 {
  margin-bottom: 24px !important;
}
.u-mb-32 {
  margin-bottom: 32px !important;
}
.u-mb-48 {
  margin-bottom: 48px !important;
}
.u-mb-64 {
  margin-bottom: 64px !important;
}
.u-ml-0 {
  margin-left: 0px !important;
}
.u-ml-4 {
  margin-left: 4px !important;
}
.u-ml-8 {
  margin-left: 8px !important;
}
.u-ml-12 {
  margin-left: 12px !important;
}
.u-ml-16 {
  margin-left: 16px !important;
}
.u-ml-24 {
  margin-left: 24px !important;
}
.u-ml-32 {
  margin-left: 32px !important;
}
.u-ml-48 {
  margin-left: 48px !important;
}
.u-ml-64 {
  margin-left: 64px !important;
}
.u-mr-0 {
  margin-right: 0px !important;
}
.u-mr-4 {
  margin-right: 4px !important;
}
.u-mr-8 {
  margin-right: 8px !important;
}
.u-mr-12 {
  margin-right: 12px !important;
}
.u-mr-16 {
  margin-right: 16px !important;
}
.u-mr-24 {
  margin-right: 24px !important;
}
.u-mr-32 {
  margin-right: 32px !important;
}
.u-mr-48 {
  margin-right: 48px !important;
}
.u-mr-64 {
  margin-right: 64px !important;
}
.u-mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.u-mx-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.u-mx-16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.u-mx-24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.u-mx-32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}
.u-mx-48 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}
.u-my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.u-my-8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.u-my-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.u-my-24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.u-my-32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.u-my-48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}
.u-mx-auto {
  margin-inline: auto !important;
}
.u-text-center {
  text-align: center !important;
}

/* 単独の画像を中央に。img に直接付けて使用します。 */
.u-image-center {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* 日記の本文画像：figure に付けると説明文もまとめて中央へ。 */
.diary-image {
  width: min(100%, var(--diary-image-width, 600px));
  margin: 26px auto;
  text-align: center;
}
.diary-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 4px;
}
.diary-image figcaption {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted, #4379ab);
}

/* 画像グリッド：1→2→3列と、画面幅に合わせて折り返します */
.l-image-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
  gap: var(--grid-gap, 16px);
}
.l-image-grid--2 {
  --grid-columns: 2;
}
.l-image-grid--4 {
  --grid-columns: 4;
}
.l-image-grid > * {
  min-width: 0;
}
.l-image-grid figure {
  margin: 0;
}
.l-image-grid img {
  display: block;
  width: 100%;
  height: auto;
}
.l-image-grid--square img {
  aspect-ratio: 1;
  object-fit: cover;
}
.l-image-grid--contain img {
  object-fit: contain;
  background: var(--pale, #e2f4ff);
}
.l-image-grid figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.8;
}
@media (max-width: 900px) {
  .l-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .l-image-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .l-image-grid--sp-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}