/* 2026-07-13 responsibility refactor: page-specific layout only; shared tokens are referenced from magonote-common.css. Existing selectors remain compatible. */

/* page-tool-search-guide.css
   対象: 100593_tool-search-guide.json
   前提: magonote-common.css + magonote-icons.css
   方針: mgtop-v8共通CSSをベースに、探し方ガイド・条件例・チップ表示を補完。
*/

.magonote-page--tool-search-guide {
  --mgtop-hero-width: var(--mn-width-hero, 1180px);
  --mgtop-wrap: var(--mn-width-normal, 1120px);
}

.magonote-page--tool-search-guide .mgtop-hero__visual {
  padding: var(--mn-space-8, 22px);
  background: radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.12) 0, rgba(245, 158, 11, 0) 35%),
    linear-gradient(135deg, #FFFFFF 0%, #F4FAFF 100%);
}

.magonote-page--tool-search-guide .mgtop-hero__visual .mgtop-feature-grid {
  gap: 14px;
  margin-top: 0;
}

.magonote-page--tool-search-guide .mgtop-hero__visual .mgtop-mini-card {
  min-height: 132px;
}

.magonote-page--tool-search-guide .mgtop-entry-grid--main-two .mgtop-entry-card {
  min-height: 160px;
}

.magonote-page--tool-search-guide .mgtop-entry-card {
  min-height: 150px;
}

.magonote-page--tool-search-guide .mgtop-filter-block {
  display: grid;
  gap: 14px;
  margin-top: var(--mn-space-7, 20px);
  padding: var(--mn-space-8, 22px);
  border: 1px solid rgba(0, 88, 216, 0.14);
  border-radius: var(--mn-radius-lg, 22px);
  background: linear-gradient(135deg, #FFFFFF 0%, #F7FBFF 100%);
  box-shadow: 0 10px 26px rgba(25, 78, 126, 0.06);
}

.magonote-page--tool-search-guide .mgtop-filter-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mn-space-4, 12px);
}

.magonote-page--tool-search-guide .mgtop-filter-title-row h3 {
  margin: 0;
  color: var(--mgtop-blue-dark);
  font-size: 1.08rem;
}

.magonote-page--tool-search-guide .mgtop-filter-title-row small {
  color: var(--mgtop-muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.magonote-page--tool-search-guide .mgtop-chip-group {
  margin-top: 0;
}

.magonote-page--tool-search-guide .mgtop-chip {
  background: #FFFFFF;
  border-color: rgba(0, 88, 216, 0.20);
  box-shadow: 0 4px 12px rgba(25, 78, 126, 0.05);
}

.magonote-page--tool-search-guide #purpose-search .mgtop-filter-block {
  border-color: rgba(31, 155, 91, 0.16);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--mgtop-mint-soft) 100%);
}

.magonote-page--tool-search-guide #purpose-search .mgtop-chip {
  color: var(--mgtop-mint-dark);
  border-color: rgba(31, 155, 91, 0.22);
}

.magonote-page--tool-search-guide #diagnosis .mgtop-entry-card {
  border-left: 6px solid var(--mgtop-line-orange);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--mgtop-orange-soft) 100%);
}

.magonote-page--tool-search-guide .mgtop-linkline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-3, 10px);
}

@media (max-width: 960px) {
  .magonote-page--tool-search-guide .mgtop-hero__visual .mgtop-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .magonote-page--tool-search-guide .mgtop-hero__visual .mgtop-feature-grid,
  .magonote-page--tool-search-guide .mgtop-entry-grid--main-two {
    grid-template-columns: 1fr;
  }

  .magonote-page--tool-search-guide .mgtop-filter-title-row {
    display: grid;
    gap: var(--mn-space-1, 4px);
  }
}


/* 探し方2入口：548×188画像を背景装飾として使用 */
.magonote-page--tool-search-guide .mgtop-search-guide-card {
  position: relative;
  min-height: 188px;
  overflow: hidden;
  padding: 22px 44% 22px 22px;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center, right center;
  background-size: 100% 100%, auto 100%;
  isolation: isolate;
}

.magonote-page--tool-search-guide .mgtop-search-guide-card--conditions {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 42%, rgba(244,250,255,.72) 59%, rgba(244,250,255,.04) 78%),
    url("https://magonotetools.com/wp-content/uploads/magonote-images/magonote_banner_tool_search_conditions_548x188.webp");
}

.magonote-page--tool-search-guide .mgtop-search-guide-card--purpose {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 42%, rgba(242,251,246,.72) 59%, rgba(242,251,246,.04) 78%),
    url("https://magonotetools.com/wp-content/uploads/magonote-images/magonote_banner_tool_search_purpose_548x188.webp");
}

.magonote-page--tool-search-guide .mgtop-search-guide-card > .mgtop-entry-card__label,
.magonote-page--tool-search-guide .mgtop-search-guide-card > strong,
.magonote-page--tool-search-guide .mgtop-search-guide-card > small {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .magonote-page--tool-search-guide .mgtop-search-guide-card {
    min-height: 188px;
    padding-right: 40%;
    background-position: center, right center;
  }
}

@media (max-width: 520px) {
  .magonote-page--tool-search-guide .mgtop-search-guide-card {
    padding: 18px 34% 18px 18px;
  }

  .magonote-page--tool-search-guide .mgtop-search-guide-card--conditions {
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 48%, rgba(244,250,255,.80) 64%, rgba(244,250,255,.10) 86%),
      url("https://magonotetools.com/wp-content/uploads/magonote-images/magonote_banner_tool_search_conditions_548x188.webp");
  }

  .magonote-page--tool-search-guide .mgtop-search-guide-card--purpose {
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 48%, rgba(242,251,246,.80) 64%, rgba(242,251,246,.10) 86%),
      url("https://magonotetools.com/wp-content/uploads/magonote-images/magonote_banner_tool_search_purpose_548x188.webp");
  }
}

/* 2026-07-13 SVG placement map: layout only. */
.magonote-page--tool-search-guide .mgtop-hero__visual .mgtop-mini-card--with-svg-icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--mn-space-3, 10px);
  align-items: center;
}

.magonote-page--tool-search-guide .mgtop-hero__visual .mgtop-mini-card--with-svg-icon > .mn-svg-icon {
  grid-row: 1 / span 2;
  margin-bottom: 0;
}

.magonote-page--tool-search-guide .mgtop-hero__visual .mgtop-mini-card--with-svg-icon > strong,
.magonote-page--tool-search-guide .mgtop-hero__visual .mgtop-mini-card--with-svg-icon > span {
  grid-column: 2;
}

.magonote-page--tool-search-guide #condition-search .mgtop-entry-card > .mn-svg-icon {
  align-self: flex-start;
  margin-bottom: var(--mn-space-3, 10px);
}