.okidx-container {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.okidx-container > a.media {
  flex: 0 1 calc(33.333% - 12px);
  box-sizing: border-box;
  display: block;
  position: relative;
  height: var(--img-height,300px);
  overflow: hidden;
  border-radius: 18px;
  background: #222;
  text-decoration: none;
}

.okidx-container > a.media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  transition: transform 0.35s cubic-bezier(.38,.78,.43,.93), filter 0.35s;
}

.okidx-container > a.media:hover img {
  transform: scale(1.13);
  filter: brightness(1.35);
}

/* キャプション帯に上下 0.1em の余白 */
.okidx-container > a.media .okidx-caption-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  padding: 0.8em 14px;             /* ← 縦にフォントサイズの10%ずつ */
  min-height: 3em;
  background: rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s;
  z-index: 2;
}

.okidx-container > a.media:hover .okidx-caption-bg {
  background: rgba(0,0,0,0.82);
}

.okidx-container > a.media .okidx-caption-text {
  color: #fff;
  font-weight: bold;
  font-size: 1.18em;
  line-height: 1.2;
  text-align: center;
  white-space: pre-line;
  letter-spacing: 0.02em;
}

.okidx-container > a.media .okidx-subcaption {
  color: #ddd;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 1.1;
  margin-top: 4px;
}


.okidx-container > a.media .okidx-caption-text,
.okidx-container > a.media .okidx-subcaption {
  transition: transform 0.2s ease, color 0.2s ease;
  transform-origin: center center;
}

.okidx-container > a.media:hover .okidx-caption-text {
  transform: scale(1.1);
color: #0db5ff;
}

.okidx-container > a.media:hover .okidx-subcaption {
  transform: scale(1.05);
}

/* すべてのタイルをコンテナの上端に揃える */
.okidx-container > a.media {
  /* 既に display:block; になっている想定ですが、念のため flex-item であることを強制 */
  display: flex !important;
  flex-direction: column;
  /* ここで “自身を flex-start に揃える” */
  align-self: flex-start !important;
  margin-top: 0 !important;
}

/* 親の <p> や .level1 からの余白もリセット */
.level1 > p { margin-bottom: 0 !important; }
.level1 > p + .okidx-container,
.level1 > .okidx-container {
  margin-top: 0 !important;
}