/* ==============================
   Memory Single — Layout 完成版
   ============================== */
.memory-single {
  background: #e4fcff;
  color: #00bcd4;
}

.memory-single .memory-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.memory-single .memory-title {
  color: #00bcd4;
  font-weight: bold;
  font-size: 20px;
  border-left: 3px solid #00bcd4;
  padding-left: 10px;
  margin: 0 0 24px;
  background: #e4fcff;
}

/* 本文（memory-text優先。無ければフォールバック本文） */
.memory-single .memory-content,
.memory-single .memory-text-wrap {
  line-height: 1.9;
  margin-bottom: 20px;
}

/* ===============================
   写真レイアウト（共通サイズ）
   =============================== */
.memory-single .memory-photo-wrap {
  margin: 40px auto 0;
}

/* --- PC表示（769px〜）：2列同サイズグリッド --- */
@media (min-width: 769px) {
  .memory-single .memory-photo-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: start;
  }

  .memory-single .memory-photo-wrap .photo-item {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3; /* ← ここを 1 / 1 に変えれば正方形表示にもできる */
    overflow: hidden;
    border-radius: 8px;
  }

  .memory-single .memory-photo-wrap .photo-item img,
  .memory-single .memory-photo-wrap figure img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいにトリミング */
    display: block;
  }

  /* 画像が1枚だけの場合：中央配置で同じ比率を保つ */
  .memory-single .memory-photo-wrap.is-single {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .memory-single .memory-photo-wrap.is-single .photo-item {
    max-width: 600px;
  }
}

/* --- スマホ表示（〜768px）：1列で同サイズ縦並び --- */
@media (max-width: 768px) {
  .memory-single .memory-photo-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .memory-single .memory-photo-wrap .photo-item {
    width: 100%;
    aspect-ratio: 4 / 3; /* 同じ比率に統一 */
    overflow: hidden;
    border-radius: 8px;
  }

  .memory-single .memory-photo-wrap .photo-item img,
  .memory-single .memory-photo-wrap figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* featured画像クラスの明示（念のため） */
.memory-single .memory-photo-wrap img.memory-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ===============================
   固定テキスト（右下署名など）
   =============================== */
.memory-single .memory-fixed-text {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  margin-right: 6px;
}

.memory-single .memory-fixed-text > div {
  font-size: 14px;
  font-weight: bold;
  color: #00bcd4;
  text-align: left;
  margin: 0;
}