/* ==========================================================================
   TOP 前半: ヒーロー＋検索カード群（docs/design/02-top.md §2〜3 / SP §2〜5、部品は 01-components §4〜8・§11）
   SP < 768 / 768〜1079 はカード 586 の 1 列 / 1080 以上で 2 列
   ========================================================================== */

/* ---------- ヒーロー（SP 375×189 / PC 1440×500） ---------- */
.p-top-hero__img { display: block; width: 100%; height: auto; }

/* ---------- 検索カード群（SP） ---------- */
.p-top-search {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
/* あしらい 468×804 @-39,267（地域〜条件の背面） */
.p-top-search::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 17px;
  left: -39px;
  width: 468px;
  height: 804px;
  background: url("../img/deco-sp.svg") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}
.p-top-search__inner { display: flex; flex-direction: column; }

.p-top-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 var(--jn-gutter);
}
.p-top-card--area { padding-top: 20px; }
.p-top-card--area .p-top-card__heading { margin-bottom: 4px; } /* 見出し→グリッド 20、グリッド→ボタン 16 */
.p-top-card--cond { margin-top: 28px; }
.p-top-card--nat,
.p-top-card--ind { margin-top: 28px; }
.p-top-card--ind { margin-bottom: 28px; }

.p-top-card__grid { display: grid; margin: 0; padding: 0; list-style: none; }
.p-top-card__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.p-top-card__grid--ind { grid-template-columns: minmax(0, 1fr); gap: 16px; }

.p-top-card__more { display: flex; justify-content: center; }
.p-top-card__more-form { display: flex; justify-content: center; width: 100%; margin: 0; }
.p-top-card__more-btn { font-family: inherit; cursor: pointer; }
.p-top-card__more-btn { width: 100%; }

/* 地域: SP は地図無しの 3 列×2 行グリッド（§5 SP 106×88） */
.p-top-map__art { display: none; }
.p-top-map__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-top-pref {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: 12px 4px;
  background: var(--jn-color-primary-soft);
  border-radius: var(--jn-radius-md);
  color: var(--jn-color-text);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--jn-duration-hover), color var(--jn-duration-hover);
}
.p-top-pref__pin { width: 24px; height: 24px; flex: none; background-color: var(--jn-color-primary); }
.p-top-pref__ja { font-size: 18px; line-height: 25.2px; letter-spacing: 0.1em; }
.p-top-pref__en { font-family: var(--jn-font-latin); font-size: 11px; line-height: 15.4px; }

/* 無料登録（SP のみ。343×56） */
.p-top-register { padding: 16px var(--jn-gutter); }
.p-top-register__btn { width: 100%; }

/* 条件・国籍（§6・§7） */
.p-top-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--jn-color-primary-soft);
  border-radius: var(--jn-radius-md);
  color: var(--jn-color-text);
  font-size: var(--jn-fs-choice);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--jn-duration-hover), color var(--jn-duration-hover);
}
.p-top-choice--cond { gap: 4px; height: 116px; padding: 16px 0 20px; }
.p-top-choice--nat { height: 90px; padding: 12px 0 20px; }
.p-top-choice__icon { width: 40px; height: 40px; flex: none; background-color: var(--jn-color-primary); }
.p-top-choice__flag { width: 40px; height: 40px; flex: none; }
.p-top-choice__label { white-space: nowrap; }

/* 業種（§8 SP 343×60） */
.p-top-ind {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 24px;
  background: var(--jn-color-primary-soft);
  border-radius: var(--jn-radius-md);
  color: var(--jn-color-text);
  font-size: var(--jn-fs-choice-wide);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--jn-duration-hover), color var(--jn-duration-hover);
}
.p-top-ind__icon { width: 40px; height: 40px; flex: none; background-color: var(--jn-color-primary); }

.p-top-pref:hover,
.p-top-choice:hover,
.p-top-ind:hover { background: var(--jn-color-primary); color: var(--jn-color-white); }
/* hover で地がピンクになるので、アイコン（型抜き）も文字と同じ白にする（先方指摘 TOP②③ 2026-09-30） */
.p-top-pref:hover .p-top-pref__pin,
.p-top-choice:hover .p-top-choice__icon,
.p-top-ind:hover .p-top-ind__icon { background-color: var(--jn-color-white); }
.p-top-pref:focus-visible,
.p-top-choice:focus-visible,
.p-top-ind:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }

/* ---------- 768 以上: 白カード 586 幅（PC 部品寸法） ---------- */
@media (min-width: 768px) {
  .p-top-br-sp { display: none; }

  .p-top-search {
    padding: 80px var(--jn-gutter);
    /* 柄は Figma（238:58101 1522×1089 を x-40）を等倍で 3 群に分けて置く（先方指摘 TOP⑦ 2026-09-30）。
       左群は画面左端・右群は画面右端・中央群は画面中央に固定し、1440 では元の位置と同じ。
       広い画面でも左右の霞が消えず、枠の切り口も見せない。地図で伸びた下側は地色のみ */
    background:
      url("../img/deco-search-pink-l.svg") no-repeat left -225px top 0 / 445px 1089px,
      url("../img/deco-search-pink-c.svg") no-repeat calc(50% - 27.5px) 0 / 999px 1089px,
      url("../img/deco-search-pink-r.svg") no-repeat right -226px top 0 / 475px 1089px,
      var(--jn-color-primary);
  }
  .p-top-search::before { content: none; }
  .p-top-search__inner { gap: 28px; width: 586px; max-width: 100%; margin: 0 auto; }

  .p-top-card,
  .p-top-card--cond,
  .p-top-card--nat,
  .p-top-card--ind { gap: 20px; margin: 0; padding: 24px 40px; background: var(--jn-color-white); border-radius: var(--jn-radius-lg); }
  .p-top-card--area { padding-top: 45px; }
  .p-top-card--area .p-top-card__heading { margin-bottom: 0; }

  .p-top-register { display: none; }

  .p-top-card__grid--3 { gap: 20px; }
  .p-top-card__grid--ind { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .p-top-card__more-btn { width: 320px; }

  /* 都道府県地図（Figma 301:58347 1217×1117 を地図幅に縮小。先方指摘 TOP① 2026-09-30）。
     絵（ドット・赤丸・尾）は img、吹き出しの箱は <a> を重ねる。座標・寸法は 1217 基準の値に --u（地図幅/1217）を掛ける */
  .p-top-map { position: relative; width: 100%; aspect-ratio: 1217 / 1117; margin: 0 auto; container-type: inline-size; }
  .p-top-map__art { display: block; width: 100%; height: 100%; }
  .p-top-map__list { position: absolute; inset: 0; display: block; --u: calc(100cqw / 1217); }
  .p-top-map__item {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
  }
  .p-top-pref {
    flex-direction: row;
    gap: calc(7 * var(--u));
    height: 100%;
    padding: 0;
    background: var(--jn-color-white);
    border: calc(3 * var(--u)) solid var(--jn-color-pref-pin);
    border-radius: calc(18.3 * var(--u));
    transition: background-color var(--jn-duration-hover), color var(--jn-duration-hover);
  }
  .p-top-pref__pin { width: calc(48.6 * var(--u)); height: calc(48.6 * var(--u)); background-color: var(--jn-color-pref-pin); }
  /* 文字は Figma 原寸比（地名 31.1 / ローマ字 20.8）。小さくなる幅では下限（日本語 12px・英字 10px） */
  .p-top-pref__ja { font-size: max(12px, calc(31.12 * var(--u))); line-height: 1.4; letter-spacing: 0.1em; }
  .p-top-pref__en { margin-left: calc(10 * var(--u)); font-size: max(10px, calc(20.81 * var(--u))); line-height: 1.4; }
  .p-top-pref:hover { background: var(--jn-color-pref-pin); color: var(--jn-color-white); }
  .p-top-pref:hover .p-top-pref__pin { background-color: var(--jn-color-white); }

  .p-top-choice { border-radius: var(--jn-radius-lg); }
  .p-top-choice--cond { gap: 8px; height: 113px; padding: 20px 0; }
  .p-top-choice--nat { height: 113px; padding: 8px 0 20px; }
  .p-top-choice__flag { width: 60px; height: 60px; }

  .p-top-ind { gap: 16px; height: 80px; padding: 0 20px; border-radius: var(--jn-radius-lg); }
}

/* 1080〜1279 は 2 列で業種カードが狭く「ビルクリーニン/グ」「工業製品製造/業」と 1 字落ちるので、余白を詰め字を幅に比例させて 1 行に（14 幅点検） */
@media (min-width: 1080px) and (max-width: 1279px) {
  .p-top-ind { gap: 10px; padding: 0 12px; }
  .p-top-ind__label { white-space: nowrap; font-size: min(18px, 1.45vw); }
}

/* ---------- 1080 以上: 2 列（左 地域・国別 / 右 条件・業種） ---------- */
@media (min-width: 1080px) {
  .p-top-search__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 586px));
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "area cond" "area ind" "nat ind";
    gap: 28px;
    width: 1200px;
    max-width: 100%;
    justify-content: center;
  }
  .p-top-card { align-self: start; }
  .p-top-card--area { grid-area: area; }
  .p-top-card--cond { grid-area: cond; }
  .p-top-card--nat { grid-area: nat; }
  .p-top-card--ind { grid-area: ind; }
}