.marketplace-coverage {
  position: relative;
  overflow: hidden;
  margin: 24px 0;
  scroll-margin-top: var(--topbar-height, 74px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid #ded7ff;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 8%, #ff3ca51c 0 19%, transparent 20%),
    linear-gradient(135deg, #fff 0%, #f8f5ff 58%, #f2f8ff 100%);
  box-shadow: 0 18px 50px #3023660d;
}

.marketplace-coverage-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.marketplace-coverage h2 {
  margin: 4px 0 8px;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -.035em;
}

#marketplaceCoverageLead {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 1.6vw, 15px);
  line-height: 1.7;
}

.marketplace-mobile-line {
  display: inline;
}

.marketplace-count {
  display: grid;
  min-width: 112px;
  margin: 0;
  place-items: center;
  color: #fff;
  border-radius: 22px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--pink), var(--violet), #27b8ed);
  box-shadow: 0 12px 28px #7357ff35;
}

.marketplace-count strong {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.marketplace-count span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.marketplace-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.marketplace-group {
  min-width: 0;
  padding: 14px 0 4px;
  border-top: 1px solid #e5e0ff;
}

.marketplace-group > p {
  display: none;
  margin: 0;
  color: #4f37c8;
  font-size: 12px;
  font-weight: 900;
}

.marketplace-group-direct > p::before {
  content: "+ ";
  color: var(--pink);
}

.marketplace-group ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketplace-group li {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 30px;
  padding: 4px 2px;
  color: #17142d;
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 900;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: default;
}

.marketplace-group li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--violet));
}

.marketplace-group-direct li {
  color: #5140ba;
}

.marketplace-group-direct ul {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.marketplace-coverage-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* 13モールを同じ重みで1行表示する。狭い画面は1行のまま横スクロール可能にし、
   名称を不自然に2行へ割らない。 */
.marketplace-groups {
  grid-template-columns: repeat(13, minmax(82px, 1fr));
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.marketplace-group,
.marketplace-group ul {
  display: contents;
}

.marketplace-group li {
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  overflow-wrap: normal;
}

.marketplace-yahoo span {
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .marketplace-coverage {
    min-width: 0;
  }

  .marketplace-groups {
    /* 等幅13列では長い「Yahoo!ショッピング」が隣の列へはみ出す。
       各名称の実幅を確保し、残りの横幅だけを項目間へ均等配分する。 */
    grid-template-columns: repeat(13, max-content);
    justify-content: space-between;
    column-gap: 8px;
    min-width: 0;
    overflow-x: auto;
  }

  .marketplace-group {
    display: contents;
  }

  .marketplace-group ul {
    display: contents;
  }

  .marketplace-group li {
    min-width: max-content;
    padding: 6px 2px;
    font-size: clamp(11px, .9vw, 13px);
    letter-spacing: -.035em;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .marketplace-group ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.search-journey { margin-top: clamp(2rem, 5vw, 4rem); }
.search-panel { margin-top: 18px; }
.search-panel .panel-heading { margin-bottom: 12px; }
.search-panel .query-field textarea { min-height: 110px; }
.instant-marketplace-handoff { display: grid; gap: 10px; margin: 14px 0 18px; }
.instant-marketplace-status { margin: 0; color: #5140ba; font-weight: 800; line-height: 1.65; }
.instant-marketplace-fallback { border-color: #cfc5ff; background: linear-gradient(135deg, #fff, #f7f4ff); }
.lp-compact-copy { text-wrap: pretty; }

@media (min-width: 900px) {
  .lp-compact-copy { max-width: none !important; white-space: nowrap; }
}

@media (max-width: 760px) {
  .marketplace-mobile-line {
    display: block;
  }

  .marketplace-coverage {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  .marketplace-coverage-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .marketplace-coverage h2 {
    font-size: clamp(19px, 5.7vw, 27px);
  }

  #marketplaceCoverageLead {
    font-size: 12.5px;
    line-height: 1.6;
  }

  /* 2026-08-18: 7〜9pxは実機で読めないという指摘を受けて拡大した。
     縮んでいた原因は white-space: nowrap で1行に押し込んでいたことなので、
     折り返しを許して文字サイズを優先する。 */
  #marketplaceCoverageLead .marketplace-mobile-line:nth-child(2) {
    font-size: clamp(11px, 3vw, 13px);
    letter-spacing: -.01em;
  }

  .marketplace-count {
    min-width: 82px;
    padding: 10px 8px;
    border-radius: 17px;
  }

  .marketplace-count span {
    font-size: 11px;
  }

  .marketplace-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 8px;
    margin-top: 6px;
    overflow-x: hidden;
  }

  .marketplace-group {
    padding: 5px 0 2px;
  }

  .marketplace-group > p {
    margin-bottom: 7px;
    font-size: 12.5px;
  }

  .marketplace-group ul {
    gap: 3px;
  }

  .marketplace-group li {
    min-height: 26px;
    padding: 2px;
    font-size: clamp(12.5px, 3.3vw, 14px);
    justify-content: flex-start;
  }

  /* 2026-08-19: 楽天・Yahoo!だけ中央寄せ・小さい点になっていて、下の11モール
     と縦の位置がズレて見えるとの指摘。個別に探す側と同じ左寄せ・同じ点の
     大きさに統一する。 */
  .marketplace-group-integrated li {
    gap: 4px;
    justify-content: flex-start;
  }

  .marketplace-yahoo span {
    line-height: 1.2;
    text-align: left;
  }

  .marketplace-coverage-note {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.6;
  }
}

@media (max-width: 390px) {
  .marketplace-coverage-heading {
    align-items: start;
  }

  .marketplace-count {
    min-width: 72px;
  }

  /* 2026-08-18: ここが最小7pxまで縮む指定だった。狭い画面ほど読めなく
     なるのは本末転倒なので、1行に収める制約(nowrap)を外して折り返させ、
     文字サイズを確保する。 */
  .marketplace-group-integrated li {
    gap: 3px;
    font-size: clamp(11.5px, 3.2vw, 13px);
  }

  .marketplace-group-direct li {
    gap: 3px;
    font-size: clamp(11.5px, 3.2vw, 13px);
    letter-spacing: -.01em;
  }

  .marketplace-group-direct li::before {
    width: 4px;
    height: 4px;
    flex-basis: 4px;
  }
}