/* 教室だより：左に英字の見出し、右に写真と文の横並びのカード */
.journal {
  position: relative;
  padding: 18rem 0 10rem;
  background: linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, #f0f0f0 30%, #f3f3f3 70%, #ededed 100%);
  overflow: clip;
}
.journal__in { width: min(102rem, 100% - 4rem); margin-inline: auto; }
.journal__head { position: relative; }
.journal__ttl { width: max-content; font-weight: 500; letter-spacing: 0.22em; font-size: 3.4rem; }
.journal__ghost { left: 0; top: 50%; transform: translateY(-50%) translateX(-9rem) translateY(-3rem); font-size: 24rem; }
.journal__list { position: relative; z-index: 1; display: grid; gap: 4.2rem; width: 70.4rem; margin: -9rem 0 0 auto; }
.journal__item { display: grid; grid-template-columns: 27rem auto; gap: 4.4rem; align-items: center; }
.journal__ph { aspect-ratio: 309 / 206; }
.journal__ph img { transition: transform 0.5s; object-position: center 45%; }
.journal__name { font-size: 1.8rem; line-height: 1.6; letter-spacing: 0.1em; }
.journal__txt { margin-top: 1.5rem; line-height: 1.8; }
.journal__more { margin-top: 0.5rem; border-color: #555; }
@media (hover: hover) {
  .journal__item:hover .journal__ph img { transform: scale(1.05); }
}

@media (max-width: 1023px) {
  .journal { padding: 14rem 0 5rem; }
  .journal__in { width: auto; max-width: 40rem; padding-inline: 3rem; }
  .journal__ttl { font-size: 2.4rem; }
  .journal__ghost { transform: translateY(-50%) translateX(2rem) translateY(-3rem); font-size: 11rem; }
  .journal__list { width: 100%; margin-top: 2.4rem; }
  .journal__item { grid-template-columns: 1fr; gap: 1.6rem; }
  .journal__name { font-size: 1.7rem; }
  .journal__more { margin-top: 1rem; letter-spacing: 0.2em; }
}