/* ペルコモのトンマナ（斉藤さん 2026-10-25「トンマナなんだから。帯だけでなく、ボタンやカラー、すべて」）。
 * トップと相手を選ぶ画面（顔の壁）のほかは、どのページも 白いヘッダー → 紺の帯 → 白い地の本文 の同じ形にする。
 * 帯は public/js/band.js の bandHTML。高さはどのページも同じ（斉藤さん「それぐらいが一番美しい」）。
 * 値は kosei.css の名前（--brand-12 の紺、--gold、--on-navy-sub、--font-mincho）。最後に読む。 */

/* ── 紺の帯 ── */
html[data-top='new'] .page-band {
  /* main の左右の余白を越えて端から端まで、上はヘッダーの線にぴったり */
  margin: calc(-1 * var(--space-5)) calc(50% - 50vw) var(--space-6);
  width: 100vw;
  background: var(--brand-12);
  color: #fff;
  padding: 14px 0 12px;
}
html[data-top='new'] .page-band-in {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 74px;
}
html[data-top='new'] .page-band-text {
  min-width: 0;
}
html[data-top='new'] .page-band-eyebrow {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-top='new'] .page-band h1 {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: #fff;
}
/* 入りきらないときの段の名前（band.js・fit.js）：ふだんは題だけ、fit-short で段の名前だけ */
html[data-top='new'] .page-band h1 .band-short,
html[data-top='new'] .page-band h1.fit-short .band-full {
  display: none;
}
html[data-top='new'] .page-band h1.fit-short .band-short {
  display: inline;
}
html[data-top='new'] .page-band h1:focus {
  outline: none;
}
html[data-top='new'] .page-band-lead {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--on-navy-sub);
}

/* 道のり：済んだところは金の輪に✓、いまいるところは金の丸、まだのところは淡い輪 */
html[data-top='new'] .band-road {
  display: flex;
  gap: 4px;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-top='new'] .band-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  min-height: 0;
  padding: 2px 4px;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: #8e98ad;
  background: none;
  border: 0;
}
html[data-top='new'] .band-step i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #3b4a6b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
html[data-top='new'] .band-road .done .band-step {
  color: #e6d3a3;
}
html[data-top='new'] .band-road .done i {
  border-color: var(--gold);
  color: var(--gold);
}
html[data-top='new'] .band-road .now .band-step {
  color: #fff;
  font-weight: 700;
}
html[data-top='new'] .band-road .now i {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brand-12);
  box-shadow: 0 0 0 4px rgb(242 193 78 / 0.22);
}
html[data-top='new'] button.band-step:hover {
  color: #fff;
}
html[data-top='new'] button.band-step:hover i {
  border-color: var(--gold-hover);
}
html[data-top='new'] button.band-step[aria-disabled='true'] {
  cursor: help;
}
html[data-top='new'] button.band-step:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 帯の高さは、どのページも同じ（斉藤さん 2026-10-25）。上の小さな字がないページも、同じ高さの中で真ん中に */
html[data-top='new'] .page-band-in {
  height: 79px;
}
/* 狭い画面（900px 以下）：PC と同じく道のりは題の右に。名前は出さず、番号の丸だけ（題がいまの段の名前）。
   一行の説明はしまい、どのページも 上の小さな字＋題 の同じ高さにする（はみ出し・高さのばらつきをなくす。点検 2026-10-25） */
@media (max-width: 900px) {
  html[data-top='new'] .page-band {
    padding: 10px 0;
  }
  html[data-top='new'] .page-band-in {
    height: 58px;
    gap: var(--space-3);
  }
  html[data-top='new'] .page-band-lead {
    display: none;
  }
  /* 道のりのないページ（マーケ機能・料金など）は、何をするページかの一文を残す（初めての人がスマホで分かるように。
     saito-review 2026-10-28）。高さは中身に合わせる。道のりのある段（in-flow）は、上のとおり同じ高さのまま */
  html[data-top='new'] .page-band:not(.in-flow) .page-band-in {
    height: auto;
    min-height: 58px;
  }
  html[data-top='new'] .page-band:not(.in-flow) .page-band-lead {
    display: block;
  }
  /* 段は丸だけ。押す所は指の下限（--tap）の幅と高さ（タブレットで 22px 幅のままだった。q2-m7） */
  html[data-top='new'] .band-road {
    gap: 0;
  }
  html[data-top='new'] .band-step {
    min-width: 0;
    width: var(--tap);
    min-height: var(--tap);
    padding: 0;
    justify-content: center;
  }
  /* 指の幅の道のりが帯の行の半分を超えるとき（band.js fitRoads が測って band-stack）：道のりを題の下の2行目に置く。題と企画名は
     行の幅いっぱいに使え、段は指の幅のまま。同じ幅なら、流れのどのページも同じ並びと同じ高さ（題の長さでは決めない） */
  html[data-top='new'] .page-band-in.band-stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    height: auto;
    gap: var(--space-1);
  }
  html[data-top='new'] .page-band-in.band-stack .page-band-text {
    width: 100%;
  }
  /* 2行目の道のりは、押す所（44px）を帯の上下の余白と左の余白にはみ出させ、見える丸は題の左の端にそろえる。帯は1行のときと
     ほぼ同じ厚さに（2行目で帯が厚くなり、320×568 の対話で答えが見えなくなった。saito-review 2026-10-29） */
  html[data-top='new'] .page-band-in.band-stack .band-road {
    margin: calc((var(--tap) - 22px) / -2 + 2px) 0 calc((var(--tap) - 22px) / -2) calc((var(--tap) - 22px) / -2);
  }
  /* 2行目でも入りきらないほど狭いとき（band-tight）だけ、丸の幅まで詰める */
  html[data-top='new'] .page-band-in.band-tight .band-road {
    gap: 4px;
  }
  html[data-top='new'] .page-band-in.band-tight .band-step {
    width: 22px;
  }
  html[data-top='new'] .band-step span {
    display: none;
  }
  html[data-top='new'] .band-step i {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
  }
  html[data-top='new'] .band-road .now i {
    box-shadow: 0 0 0 3px rgb(242 193 78 / 0.22);
  }
}
@media (max-width: 700px) {
  html[data-top='new'] .page-band h1 {
    font-size: 20px;
    white-space: nowrap;
  }
}
@media print {
  html[data-top='new'] .page-band {
    display: none;
  }
}

/* ── ヘッダーのメニュー（斉藤さん 2026-10-25）──
 * 左から 使い方・料金・データと出典（使うかを決める人のための3つ）｜ログイン か マイページ・相手を探す。
 * スマホ（700px 以下）は ロゴ・相手を探す・メニュー の3つにし、ページとアカウントはメニューの中へ。
 * 指で押すものは 44px 四方以上（メニューの中の項目、スマホの「壁打ちする」とメニュー。tools/dev/qa-mobile/l1-l6）。 */
.header nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header nav > .nav-page {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-12);
  padding: 4px 0;
  white-space: nowrap;
}
.header nav > .nav-page.active {
  font-weight: 700;
  color: var(--brand-12);
  border-bottom: 2px solid var(--gold, #f2c14e);
}
.header .nav-sep {
  width: 1px;
  height: 18px;
  background: var(--line);
}
.header nav > .nav-go {
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-round);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
/* ログインと一斉に聞く：囲みなしの文字だけ（斉藤さん 2026-10-26「一斉に聞く」「囲みもなしで」）。並びは左のページと同じ形 */
.header nav > .nav-login,
.header nav > .nav-many {
  min-height: 36px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-12);
  background: transparent;
  white-space: nowrap;
}
.header nav > .nav-login:hover,
.header nav > .nav-many:hover {
  color: var(--brand-12);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.header nav > .nav-many[aria-current='page'] {
  color: var(--brand-12);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--gold, #f2c14e);
}
.header nav > .nav-go {
  background: var(--gold, #f2c14e);
  color: var(--brand-12);
}
.header nav > .nav-go:hover {
  color: var(--brand-12);
  background: var(--gold-hover, #e6b43c);
}
.header .nav-mine > summary {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-12);
  min-height: 36px;
}
.header .header-menu > div {
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(22 35 63 / 0.12);
}
.header .header-menu .menu-label {
  margin: 0;
  padding: 8px 12px 4px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.header .header-menu .menu-label.menu-sep {
  margin-top: 6px;
  padding-top: 12px;
}
.header .header-menu button {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-12);
}
.header .header-menu button:hover {
  background: var(--surface-quiet);
  color: var(--brand-12);
}
.header .nav-burger {
  display: none;
}
@media (max-width: 1100px) {
  .header nav {
    gap: 16px;
  }
}
@media (max-width: 700px) {
  .header nav > .nav-page,
  .header .nav-sep,
  .header nav > .nav-login,
  .header nav > .nav-many,
  .header .nav-mine {
    display: none !important;
  }
  .header .nav-burger {
    display: block;
  }
  /* 「壁打ちする」：指で押せる高さ（44px）はそのまま、見える金の面は細く（32px）。ヘッダーいっぱいに詰まって見えていた（2026-10-26） */
  .header nav > .nav-go,
  .header nav > .nav-go:hover {
    position: relative;
    isolation: isolate;
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.8125rem;
    background: transparent;
  }
  .header nav > .nav-go::before {
    content: '';
    position: absolute;
    inset: 6px 0;
    z-index: -1;
    border-radius: var(--radius-round);
    background: var(--gold, #f2c14e);
  }
  .header .nav-burger > summary {
    min-height: 44px;
    font-size: 0.8125rem;
    color: var(--brand-12);
  }
}

/* 1行に入りきらないとき（nav.js の fitHeader が実際に測って決める。幅では決めない）は、スマホと同じ ロゴ・壁打ちする・メニュー に。
 * 測るあいだ（.measuring）は、ロゴも項目も縮めない（縮んで収まったように見えるのを防ぐ） */
.header.measuring,
.header.measuring * {
  flex-shrink: 0 !important;
}
.header.folded .perukomo-formal,
.header.folded .perukomo-divider,
.header.folded nav > .nav-page,
.header.folded .nav-sep,
.header.folded nav > .nav-login,
.header.folded nav > .nav-many,
.header.folded .nav-mine {
  display: none !important;
}
.header.folded .nav-burger {
  display: block;
}
.header.folded .nav-burger > summary {
  min-height: 44px;
  font-size: 0.8125rem;
  color: var(--brand-12);
}

/* ── 色とボタンの決まり（新しいトップの流れの全ページ。監査 2026-10-25 の根っこを、ここ1か所で直す）──
 * 色：紺・金・灰だけ。kosei.css の brand の段（青）を紺の段に置き換えると、青いリンク・焦点の輪・青い数字・選んだ札の青み
 * が一度に紺になる。印（--mark）は朱でなく金。
 * ボタン：トップの「相手を探す」と同じ形をすべての主役に（金の塗り・紺の字・丸い端・太字）。脇役は白に細い枠の丸い端、
 * 文字だけのボタンも丸い端。角はボタン・札が丸、カードが 16px、入力欄が --radius-field の3つだけ。
 * 画面ごとの CSS で、ボタンの形と色を変えない（parts.css の決まりと同じ）。 */
html[data-top='new'] {
  --brand-1: #f7f8fb;
  --brand-2: #eef1f6;
  --brand-3: #e1e6ef;
  --brand-4: #d0d7e4;
  --brand-5: #b9c3d5;
  --brand-6: #9aa7bf;
  --brand-7: #7a89a6;
  --brand-8: #56678a;
  --brand-9: #3a4b6e;
  --brand-10: #22355e;
  --fill-hover: #22355e;
  --mark: var(--gold);
  --mark-tint: #fdf6e3;
  --mark-line: #ecd9a0;
  --button-surface: #fff;
  --button-line: var(--line);
  --button-chosen: var(--brand-2);
}
html[data-top='new'] :is(button, a, label).primary {
  color: var(--brand-12) !important;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-weight: 700;
}
html[data-top='new'] :is(button, a, label).secondary {
  color: var(--brand-12);
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  font-weight: 600;
}
@media (hover: hover) {
  html[data-top='new'] :is(button, a, label).primary:hover:not(:disabled) {
    background: var(--gold-hover);
    border-color: var(--gold-hover);
  }
  html[data-top='new'] :is(button, a, label).secondary:hover:not(:disabled) {
    background: #fff !important;
    border-color: var(--brand-12) !important;
  }
}
html[data-top='new'] :is(button, a, summary, span).small-button::before,
html[data-top='new'] button.link.small::before {
  border-radius: 999px;
}
/* 紺の上のボタン（帯・紺のパネル）：脇役と文字だけは、白い字に淡い白の枠 */
html[data-top='new'] :is(.page-band, .on-navy) :is(button, a).secondary,
html[data-top='new'] :is(.page-band, .on-navy) .small-button {
  color: #fff;
  background: rgb(255 255 255 / 0.08) !important;
  border-color: rgb(255 255 255 / 0.3) !important;
}
html[data-top='new'] :is(.page-band, .on-navy) .small-button::before {
  background: rgb(255 255 255 / 0.08) !important;
  border-color: rgb(255 255 255 / 0.3) !important;
}
/* 文の中のリンクと焦点の輪は紺 */
html[data-top='new'] main a:not(.primary):not(.secondary):not(.small-button) {
  color: var(--brand-12);
}
html[data-top='new'] :is(button, a, summary, input, textarea, select):focus-visible {
  outline-color: var(--brand-12);
}

/* 足元のリンク（株式会社hint など）も紺。青を残さない */
html[data-top='new'] footer a {
  color: var(--brand-12);
}

/* 文字だけのボタン（.small-button）は、枠も地もない紺の字（脇役の白い丸と見分けがつくように。ボタンは3つの形だけ、点検 2026-10-25）。
   選んだ・開いた印（aria-pressed・aria-expanded）だけは、淡い紺の地を残す */
html[data-top='new'] :is(button, a, summary, span).small-button:not([aria-pressed='true']):not([aria-expanded='true'])::before,
html[data-top='new'] button.link.small::before {
  background: transparent !important;
  border-color: transparent !important;
}
html[data-top='new'] :is(button, a, summary, span).small-button {
  color: var(--brand-12);
  font-weight: 600;
}
@media (hover: hover) {
  html[data-top='new'] :is(button, a, summary, span).small-button:hover:not(:disabled) {
    color: var(--brand-12);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
}
/* 押せないボタン：薄くしすぎて読めない、をやめる（斉藤さん「押せないボタンが薄すぎて読めない、もだめ」） */
html[data-top='new'] button:disabled,
html[data-top='new'] button[aria-disabled='true'] {
  opacity: 0.7;
}
html[data-top='new'] :is(button, a).primary:disabled,
html[data-top='new'] :is(button, a).secondary:disabled,
html[data-top='new'] .small-button:disabled {
  opacity: 1;
}
html[data-top='new'] :is(button, a).primary:disabled,
html[data-top='new'] :is(button, a).primary[aria-disabled='true'] {
  color: #5b667c !important;
  background: #e9ecf1;
  border-color: #e9ecf1;
}
html[data-top='new'] :is(button, a).secondary:disabled,
html[data-top='new'] .small-button:disabled {
  color: #7a849a !important;
}
/* マーケ機能の名前の横の小さな「Pro」（使える段。壁打ちするはどの段でも、マーケ機能は Pro だけ、をヘッダーだけで分かるように。
   統括6 2026-10-28）。帯の題の横の札（.band-badge）と同じ、小さな金の札。丸い札にはしない */
.nav-pro {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--gold, #f2c14e);
  color: var(--brand-12);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: 1px;
  text-decoration: none;
}
/* 帯の題の横の小さな金の札（band.js の badge。マーケ機能の「Pro」）。ヘッダーの .nav-pro と同じ見た目 */
html[data-top='new'] .page-band h1 .band-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--gold, #f2c14e);
  color: var(--brand-12);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  vertical-align: 4px;
}