@charset "UTF-8";
/* ==============================================
   ページ固有CSS — 名前空間: .example-page 
   下層共通: .page-hero / .sidebar / .breadcrumb
   ============================================== */
.example-page {
}

:where(.example-page) :where(ol, ul) {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* ========================================
   .example-page スコープ（このページ固有）
   ======================================== */
.example-page .entry-content li {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: auto 1fr;
  column-gap: 10px;
}
.example-page .entry-content li + li {
  margin-top: 40px;
}
.example-page .entry-content li img {
  width: 200px;
  height: auto;
  object-fit: contain;
  grid-column: 1 / 1;
  grid-row: 1 / 3;
}

.example-page .entry-content li > * {
  grid-column: 2 / 3;
}

.example-page .entry-content li p {
  margin-top: 0;
}

@media (width < 48rem) {
  .example-page .entry-content li {
    display: block;
  }
  .example-page .entry-content li img {
    display: block;
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
  }
  .example-page .entry-content li > * {
  }
}