/**
 * トップのファーストビュー（ヒーロー）と、その下の黒帯「ご支援できること」（design/fv-2b）
 * 黒帯は 2026-10-02 にトップから外した（はるちゃんの判断。ブロックを消しただけで、CSS とメニューは残している）
 *
 * 1024px 以上：左に文章、右に写真の2カラム
 * 1023px 以下：1カラム。写真は文章の下
 * 767px 以下：スマホ。最初の画面（高さ 667px）に、キャッチコピーと「無料で相談する」まで収める
 */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  /* ヘッダー（白 88px ＋黒 52px）を足して、画面の高さに収まるくらい。中身が多ければ伸びる */
  min-height: clamp(560px, calc(100svh - 140px), 720px);
  /* すぐ下のセクションA も白いので、区切りの線（ヘッダーの下の線と同じ色） */
  border-bottom: 1px solid var(--sh-line-header);
}

.hero__body {
  padding: 56px var(--sh-gutter) 40px;
}

/* 本文フィールドの入れ物を縦に並べる */
.hero__body > div {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__body :is(p, h1, ul) {
  margin: 0;
}

.hero__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.hero__label-mark {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--sh-accent);
}

.hero__title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.4;
}

.hero__lead {
  max-width: 520px;
  color: var(--sh-text);
  font-size: 16px;
  line-height: 1.9;
  text-wrap: pretty;
}

/* ---------- 温度別の入口（相談する／料金を見る／資料をダウンロード） ---------- */

.hero__body .hero__entries {
  margin-top: 8px;
  padding: 0;
  border-top: 1px solid var(--sh-line);
  list-style: none;
}

.hero__entry {
  display: grid;
  grid-template-columns: 170px 1fr 24px;
  align-items: center;
  line-height: 1.5;
  padding: 16px 4px;
  border-bottom: 1px solid var(--sh-line);
  text-decoration: none;
}

.hero__entry-note {
  color: var(--sh-muted);
  font-size: 12px;
}

.hero__entry-label {
  font-size: 17px;
  font-weight: 700;
}

.hero__entry-arrow {
  text-align: right;
}

.hero__entry--primary {
  color: var(--sh-accent);
}

/* ---------- 写真と経産省のバッジ ---------- */

.hero__media {
  position: relative;
  min-height: 200px;
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真が届くまでの仮の枠（斜線） */
.hero__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: repeating-linear-gradient(135deg, #e3e3de 0 12px, #dcdcd6 12px 24px);
  color: var(--sh-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}

/* バッジは本文に書いて、左の列の3つの入口の下に置く（2026-10-02。前は写真の左下に重ねていた）。
   上から基準の名前、短い説明、SSS のサービス登録番号（文字だけ。FV には SSS のロゴは置かない） */
.hero__body .hero__badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-start;
  max-width: 480px;
  margin-top: 8px;
  padding: 12px 18px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  background: var(--sh-surface);
  line-height: 1.5;
}

.hero__badge-text {
  font-size: 14px;
  font-weight: 700;
}

.hero__badge-desc {
  color: var(--sh-text);
  font-size: 13px;
}

.hero__badge-number {
  margin-top: 2px;
  color: var(--sh-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 黒帯「ご支援できること」（4つのサービス） ---------- */

.support-band {
  display: grid;
  grid-template-columns: auto 1fr;
  background: var(--sh-black);
  color: #fff;
  line-height: 1.5;
}

.support-band__title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 18px 28px 18px var(--sh-gutter);
  color: var(--sh-muted-on-dark);
  font-size: 12px;
  font-weight: 400;
}

.support-band > ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-band__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 24px;
  border-left: 1px solid var(--sh-line-dark);
  text-decoration: none;
}

.support-band__name {
  font-size: 15px;
  font-weight: 700;
}

.support-band__desc {
  color: var(--sh-muted-on-dark);
  font-size: 12px;
}

/*
 * セキュリティ診断の下の6つの診断（小さいリスト）
 * PC はマウスを乗せると開く。キーボードで項目に移ったときも開く。スマホは ▼ のボタンで開く（js/submenu.js）
 */
.support-band > ul > li {
  position: relative;
}

.support-band__toggle {
  position: absolute;
  top: 10px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* スマホで押しやすい大きさ */
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}

.support-band__toggle::before {
  content: "▼" / "";
  transition: transform 0.15s;
}

.support-band__toggle[aria-expanded="true"]::before {
  transform: rotate(180deg);
}

.support-band__sub {
  position: absolute;
  z-index: 10; /* 帯の下のセクションより前に出す */
  top: 100%;
  left: 0;
  display: none;
  width: max-content;
  min-width: 100%;
  max-width: calc(100vw - 40px);
  margin: 0;
  padding: 8px 0;
  border: 1px solid var(--sh-line-header);
  border-top: 2px solid var(--sh-accent);
  background: var(--sh-surface);
  color: var(--sh-black);
  list-style: none;
}

.support-band__sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.support-band__toggle[aria-expanded="true"] + .support-band__sub,
.support-band__item--has-sub:has(a:focus-visible) .support-band__sub {
  display: block;
}

@media (hover: hover) {
  .support-band__item--has-sub:hover .support-band__sub {
    display: block;
  }
}

/* ---------- 1023px 以下：1カラム ---------- */

@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__media {
    height: 320px;
  }

  /* 見出しを上に出して、2列×2段 */
  .support-band {
    grid-template-columns: 1fr;
  }

  .support-band__title {
    padding: 20px var(--sh-gutter) 8px;
  }

  .support-band > ul {
    grid-template-columns: 1fr 1fr;
  }

  .support-band__link {
    border-top: 1px solid var(--sh-line-dark);
  }

  /* 左の列は画面の端なので、左の罫線はいらない */
  .support-band li:nth-child(odd) .support-band__link {
    border-left: 0;
  }
}

/* ---------- 767px 以下：スマホ ---------- */

@media (max-width: 767px) {
  .hero__body {
    padding: 28px 20px 24px;
  }

  .hero__body > div {
    gap: 16px;
  }

  .hero__label {
    font-size: 12px;
  }

  .hero__label-mark {
    width: 6px;
    height: 6px;
  }

  /* 3行目が12文字あるので、28px から下げて1行に収める（design/fv-2b） */
  .hero__title {
    font-size: 26px;
    line-height: 1.5;
  }

  .hero__lead {
    font-size: 14px;
    line-height: 1.85;
  }

  /* 入口は「無料で相談する」を大きなボタンに、残り2つを2列のボタンにする */
  .hero__body .hero__entries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
    border-top: 0;
  }

  .hero__entries li:first-child {
    grid-column: 1 / -1;
  }

  .hero__entry {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 8px;
    border: 1.5px solid var(--sh-black);
    border-radius: var(--sh-radius);
    text-align: center;
  }

  .hero__entry-label {
    font-size: 14px;
  }

  .hero__entry :is(.hero__entry-note, .hero__entry-arrow) {
    display: none;
  }

  .hero__entry--primary {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: stretch;
    min-height: 60px;
    padding: 14px 18px;
    border: 0;
    background: var(--sh-accent);
    color: #fff;
    text-align: left;
  }

  .hero__entry--primary .hero__entry-note {
    display: block;
    grid-row: 1;
    /* デザインは #F6E3DB。赤茶の上で 4.1:1 と基準に足りないので白にした（5.1:1） */
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
  }

  .hero__entry--primary .hero__entry-label {
    grid-row: 2;
    font-size: 16px;
    line-height: 1.4;
  }

  .hero__entry--primary .hero__entry-arrow {
    display: block;
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .hero__media {
    height: 200px;
  }

  /* PC と同じく2段（上に基準の名前、下に登録番号） */
  .hero__body .hero__badge {
    margin-top: 0;
    padding: 10px 14px;
  }

  .hero__badge-text {
    font-size: 12px;
  }

  .hero__badge-desc {
    font-size: 12px;
  }

  .hero__badge-number {
    font-size: 11px;
  }

  .support-band {
    gap: 12px;
    padding: 20px;
  }

  .support-band__title {
    padding: 0;
  }

  /* 罫線はすき間（1px）から見える背景の色で出す */
  .support-band > ul {
    gap: 1px;
    background: var(--sh-line-dark);
  }

  .support-band__link {
    padding: 14px 12px;
    border: 0;
    background: var(--sh-black);
  }

  .support-band__name {
    font-size: 14px;
  }

  .support-band__desc {
    font-size: 11px;
  }
}