@charset "utf-8";

/* ------------------------------------------------------------ */
/* 投稿一覧ページ（archive） */

:root {
  --index-card-container-gap: 20px;
  --index-card-radius: 5px;
  --index-card-shadow: 2px;
  --index-card-outline-color: yellow;
  --index-container-size-pc: 1100px;
}
@media only screen and (max-width: 750px) { /* SP */
  :root {
    --index-card-container-gap: 3vw;
    --index-card-radius: 1vw;
    --index-card-shadow: 0.25vw;
  }
}

.index__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--index-card-radius) var(--index-card-radius) 0 0; }
.index__h1_box .mywp_page_basic__h1 { margin-block: 0; } /* 打ち消し */
.index__h2 { border-top: 1px solid black; padding: 0.75em 1em; font-size: var(--fs_xs); }
.index__category { font-size: var(--fs_s); text-align: center; }
.index__card { display: grid; background-color: white; border-radius: var(--index-card-radius); box-shadow: var(--index-card-shadow) var(--index-card-shadow) var(--index-card-shadow) rgba(0, 0, 0, 0.1); }
.index__card:hover { outline: 2px solid var(--index-card-outline-color); }

/* ------------------------------------------------------------ */
@media only screen and (min-width: 751px) { /* PC */
  .index__h1_box { margin-block: 40px 30px; }
  .index__h1_box + .index__category { margin-top: -15px; }
  .index__category { margin-bottom: 30px;}
  .index__container { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: space-between; gap: 40px; padding-inline: var(--container-padding-inline); max-width: var(--index-container-size-pc); margin-inline: auto; }
  .index__container aside { width: 150px; }
  .index__card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--index-card-container-gap); width: 100%; }
  .index__pager { margin: 30px auto; padding-inline: var(--container-padding-inline); max-width: var(--index-container-size-pc); }
}

/* ------------------------------------------------------------ */
@media only screen and (max-width: 750px) { /* SP */
  .index__h1_box { margin-block: 5vw 5vw; }
  .index__h1_box + .index__category { margin-top: -2vw; }
  .index__category { margin-bottom: 3vw; }
  .index__container { padding-inline: var(--container-padding-inline); }
  .index__container aside { margin-bottom: 6vw; }
  .index__container aside ul { margin-block: 0 !important; } /* 打ち消し */
  .index__container aside h2 { text-align: center; margin-bottom: 3vw !important; }
  .index__card-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--index-card-container-gap) * 1.25) var(--index-card-container-gap); width: 100%; }
  .pager { margin-block: 7vw !important; } /* 打ち消し */
  .index__pager { padding-inline: var(--container-padding-inline); }
}