/* レスポンシブ列数対応のokidxプラグインCSS */
.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;
  
  /* CSS変数のデフォルト値 */
  --col-count: 3;
  --img-height: 300px;
}

/* 基本列幅計算 */
.okidx-container > a.media,
.okidx-container > div.media {
  /* 動的に列数に基づいた幅を計算 */
  flex: 0 1 calc((100% - (var(--col-count) - 1) * 18px) / var(--col-count));
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-self: flex-start !important;
  position: relative;
  height: var(--img-height);
  overflow: hidden;
  border-radius: 18px;
  background: #222;
  text-decoration: none;
  margin: 0 !important;
}

/* レスポンシブブレークポイント - 1200px以下は最大4列 */
@media screen and (max-width: 1200px) {
  /* 5列以上の場合は4列に制限 */
  .okidx-container[style*="--col-count:5"] > a.media,
  .okidx-container[style*="--col-count:5"] > div.media,
  .okidx-container[style*="--col-count:6"] > a.media,
  .okidx-container[style*="--col-count:6"] > div.media,
  .okidx-container[style*="--col-count:7"] > a.media,
  .okidx-container[style*="--col-count:7"] > div.media,
  .okidx-container[style*="--col-count:8"] > a.media,
  .okidx-container[style*="--col-count:8"] > div.media {
    flex: 0 1 calc((100% - 3 * 18px) / 4);
  }
}

/* 900px以下は最大3列 */
@media screen and (max-width: 900px) {
  /* 4列以上の場合は3列に制限 */
  .okidx-container[style*="--col-count:4"] > a.media,
  .okidx-container[style*="--col-count:4"] > div.media,
  .okidx-container[style*="--col-count:5"] > a.media,
  .okidx-container[style*="--col-count:5"] > div.media,
  .okidx-container[style*="--col-count:6"] > a.media,
  .okidx-container[style*="--col-count:6"] > div.media,
  .okidx-container[style*="--col-count:7"] > a.media,
  .okidx-container[style*="--col-count:7"] > div.media,
  .okidx-container[style*="--col-count:8"] > a.media,
  .okidx-container[style*="--col-count:8"] > div.media {
    flex: 0 1 calc((100% - 2 * 18px) / 3);
  }
}

/* 600px以下は最大2列 */
@media screen and (max-width: 600px) {
  /* 3列以上の場合は2列に制限 */
  .okidx-container[style*="--col-count:3"] > a.media,
  .okidx-container[style*="--col-count:3"] > div.media,
  .okidx-container[style*="--col-count:4"] > a.media,
  .okidx-container[style*="--col-count:4"] > div.media,
  .okidx-container[style*="--col-count:5"] > a.media,
  .okidx-container[style*="--col-count:5"] > div.media,
  .okidx-container[style*="--col-count:6"] > a.media,
  .okidx-container[style*="--col-count:6"] > div.media,
  .okidx-container[style*="--col-count:7"] > a.media,
  .okidx-container[style*="--col-count:7"] > div.media,
  .okidx-container[style*="--col-count:8"] > a.media,
  .okidx-container[style*="--col-count:8"] > div.media {
    flex: 0 1 calc((100% - 1 * 18px) / 2);
  }
}

/* 400px以下は1列 */
@media screen and (max-width: 400px) {
  .okidx-container > a.media,
  .okidx-container > div.media {
    flex: 0 1 100%;
  }
}

/* 画像スタイル */
.okidx-container > a.media img,
.okidx-container > div.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,
.okidx-container > div.media:hover img {
  transform: scale(1.13);
  filter: brightness(1.35);
}

/* キャプション背景 */
.okidx-container > a.media .okidx-caption-bg,
.okidx-container > div.media .okidx-caption-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  padding: 0.8em 14px;
  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,
.okidx-container > div.media:hover .okidx-caption-bg {
  background: rgba(0,0,0,0.82);
}

/* キャプションテキスト */
.okidx-container > a.media .okidx-caption-text,
.okidx-container > div.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;
  transition: transform 0.2s ease, color 0.2s ease;
  transform-origin: center center;
}

.okidx-container > a.media .okidx-subcaption,
.okidx-container > div.media .okidx-subcaption {
  color: #ddd;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 1.1;
  margin-top: 4px;
  transition: transform 0.2s ease, color 0.2s ease;
  transform-origin: center center;
}

/* ホバー時のテキスト効果 */
.okidx-container > a.media:hover .okidx-caption-text,
.okidx-container > div.media:hover .okidx-caption-text {
  transform: scale(1.1);
  color: #0db5ff;
}

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

/* 列数別の最適化 */
.okidx-container[style*="--col-count:1"] > a.media .okidx-caption-text,
.okidx-container[style*="--col-count:1"] > div.media .okidx-caption-text {
  font-size: 1.5em;
}

.okidx-container[style*="--col-count:5"] > a.media .okidx-caption-text,
.okidx-container[style*="--col-count:5"] > div.media .okidx-caption-text,
.okidx-container[style*="--col-count:6"] > a.media .okidx-caption-text,
.okidx-container[style*="--col-count:6"] > div.media .okidx-caption-text,
.okidx-container[style*="--col-count:7"] > a.media .okidx-caption-text,
.okidx-container[style*="--col-count:7"] > div.media .okidx-caption-text,
.okidx-container[style*="--col-count:8"] > a.media .okidx-caption-text,
.okidx-container[style*="--col-count:8"] > div.media .okidx-caption-text {
  font-size: 1.0em;
}

.okidx-container[style*="--col-count:5"] > a.media .okidx-subcaption,
.okidx-container[style*="--col-count:5"] > div.media .okidx-subcaption,
.okidx-container[style*="--col-count:6"] > a.media .okidx-subcaption,
.okidx-container[style*="--col-count:6"] > div.media .okidx-subcaption,
.okidx-container[style*="--col-count:7"] > a.media .okidx-subcaption,
.okidx-container[style*="--col-count:7"] > div.media .okidx-subcaption,
.okidx-container[style*="--col-count:8"] > a.media .okidx-subcaption,
.okidx-container[style*="--col-count:8"] > div.media .okidx-subcaption {
  font-size: 0.8em;
}

/* 親要素からの余白リセット */
.level1 > p { 
  margin-bottom: 0 !important; 
}

.level1 > p + .okidx-container,
.level1 > .okidx-container {
  margin-top: 0 !important;
}