/* ダビデクリニック 公開ページの器(機能一覧のトップ / 404)
 *
 * 2026-09-04 夕方(v61): 発注者が v60 のヒーロー面・埋め込み帯・ナビ付きフッター・
 * 固定 CTA を「無駄しかない・使い勝手が悪くなった・見づらい・わかりづらい・いらない」
 * と却下(本番 1920px の実画面つき)。市場調査型の"面の組み"をやめ、
 * 開いた瞬間に 3 機能のカードが見える道具の画面にした。
 *
 * 消したもの: .home-head の全幅紺面(ヒーロー)、英字ラベル、リード文、ボタン列、
 *   吹き出し、段階表示、scroll() の固定 CTA(.home-fixed-cta)、全幅 cream 帯、.v60-footer。
 * 残すもの: 配色トークン(--portal-*、値は不変)、和文の組み、カード 3 枚
 *   (.home-list / .home-item / .home-art / .home-entry)、設置案内 1 行(.home-embed)、
 *   注記 1 行(.home-note)、404 の器。
 * class 名は据え置き(design.css・各テスト・404 と共有しており、改名すると別の面まで動く)。
 * 素材(カード画像・案内役)の場所は v50-visual.css の :root だけに書く。
 */

/* 配色トークンは :root に置く。body に class が付かない状態(部分描画・印刷プレビュー)でも
   色が解決でき、静的なコントラスト検査からも地色をたどれる。値は旧版から変えていない
   (--portal-muted は shared-design-foundation / customer-experience-polish が値まで固定する)。 */
:root {
  --portal-ink: #182233;
  --portal-muted: #5b6478;
  --portal-line: #e0e5ef;
  --portal-brand: #1a305e;
  --portal-brand-deep: #0b1730;
  --portal-brand-mid: #244079;
  --portal-link: #244079;
  --portal-gold: #b9944e;
  --portal-gold-light: #c9a765;
  --portal-gold-deep: #7d5d25;
  --portal-surface: #ffffff;
  --portal-bg: #eef1f7;
  --portal-ease: cubic-bezier(.22, .68, .36, 1);
}

body.portal-page {
  /* カード 3 枚の器。1200px(他画面のコンテナと同じ)。 */
  --page-max: 1200px;
  /* 段落の行長。和文は1字≒1emなので 40em で約40字。 */
  --home-measure: 40em;
  /* v62(2026-09-04 夜): 地は v60-base.css の共通(html=cream、body::before=紺金の帯)。
     ここで白く塗ると帯が消えるので透明にする。ヘッダーが無い画面なので帯は少し高く。 */
  background: transparent;
  --v62-band: 300px;
  color: var(--portal-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .03em;
}
/* v62: body::before は共通の紺金の帯(v60-base.css)なので消さない。
   v63(2026-09-05夜): body::after は v60-base.css が帯の上を流れる金の光に使うようになった
   ので、抑止をやめる(以前は::afterに用途が無かったための予防的な打ち消しだった)。 */
.portal-page [hidden] { display: none !important; }

/* 日本語の禁則。既定のままだと「目安を整|理。」のように語の途中で折り返す。 */
.portal-page { line-break: strict; }
@supports (word-break: auto-phrase) {
  .portal-page :where(p, h1, h2, h3, dd, dt, span, strong, summary, li) { word-break: auto-phrase; }
}

/* ── 機能一覧のトップ ───────────────────────────────────────────── */
.home-shell {
  padding-top: 0;
  padding-bottom: 0;
}

/* 院名の行。紺金の帯(body::before)の上に白文字で置く。案内役は 96px で呼吸する。
   文はこの行と「利用できる機能」だけ(リード文・英字ラベル・ボタン列は置かない=v61 の裁定)。 */
.home-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  margin: 0 0 8px;
  padding: 20px 0 0;
}
/* v50-visual.css の .home-head-mascot はヒーロー用の絶対配置(150〜320px)なので、
   ここで行内の印(80/96px)に上書きする。素材の差し替え口(:root)はそのまま。 */
body.home-page .home-head-mascot {
  position: static;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  aspect-ratio: 1;
  background: var(--v50-mascot-greet) center / contain no-repeat;
  filter: drop-shadow(0 6px 12px rgba(11, 23, 48, .35));
  animation: none;
}
/* v65(2026-09-05 夜、発注者「もっと明るい、見やすい、わかりやすいにして」): 帯を明るい生成りの絹に
   変えたので、帯の上の文字は白+影から濃紺(--navy-900)+白の薄い縁取りに。 */
.home-head .home-title {
  margin: 0;
  color: var(--navy-900);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
@media (min-width: 640px) {
  .home-head { gap: 20px; min-height: 112px; padding-top: 28px; }
  body.home-page .home-head-mascot { width: 96px; height: 96px; }
  .home-head .home-title { font-size: 32px; }
}

/* 「利用できる機能」。帯の上の小さな白ラベル。カードが主役。 */
.home-sub {
  margin: 0 0 14px;
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
@media (min-width: 640px) {
  .home-sub { font-size: 17px; }
}

.home-list {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* カード列は帯にかぶせる(z-index 1)。 */
.home-list { position: relative; z-index: 1; }
/* 内余白は v50-visual.css の --home-pad(カード画像の負のマージン)と同じ値にする。
   v62: 白カード+柔らかい影、hover で 3px 浮く(v60-base の .v62-card と同じ値)。 */
.home-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--portal-line);
  border-radius: var(--r-card);
  background: var(--portal-surface);
  box-shadow: 0 10px 30px rgba(11, 23, 48, .10), 0 1px 2px rgba(11, 23, 48, .05);
  transition: border-color .2s var(--portal-ease), box-shadow .2s var(--portal-ease);
}
/* 2026-09-15: hover の持ち上がり transform を削除(発注者「なぞのアニメーション」)。 */
.home-item:hover,
.home-item:focus-within {
  border-color: var(--navy-500);
  box-shadow: 0 16px 40px rgba(11, 23, 48, .14), 0 1px 2px rgba(11, 23, 48, .05);
}
.home-item h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--portal-ink);
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
}
.home-tag {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--portal-gold-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.home-item p, .home-embed p, .home-lead {
  max-width: var(--home-measure);
  margin: 0 0 16px;
  color: var(--portal-muted);
  font-size: 16px;
  line-height: 1.8;
}

/* 入口。紺のボタンとして見せ、カード全体を押せるようにする(::before をカードいっぱいに
   広げる)。3 枚で高さが違っても、ボタンは必ずカードの下端に揃う。 */
.home-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 44px;
  margin-top: auto;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background-color: var(--navy-700);
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .2s var(--portal-ease);
}
/* v63(2026-09-05夜): hover の光の走り(主ボタン共通、brief-v63 §1-5)。background-color
   （上、既存の色）とは別レイヤーの background-image を足すだけなので既存の色は変わらない。 */
@media (hover: hover) {
  .home-entry {
    background-image: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .35) 48%, rgba(255, 255, 255, .35) 54%, transparent 70%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 140% 0;
    transition: background-color .2s var(--portal-ease), background-position 700ms var(--ease-out);
  }
  .home-entry:hover { background-position: -60% 0; }
}
.home-entry::after {
  margin-left: 8px;
  font-weight: 400;
  content: "\2192";
}
.home-entry:hover, .home-entry:focus-visible {
  background: var(--navy-900);
  color: #ffffff;
}
.home-item .home-entry::before {
  position: absolute;
  inset: 0;
  content: "";
}
/* 転送ページの1文の中では、丸ボタンではなく文中リンクとして振る舞わせる。 */
.home-lead .home-entry {
  display: inline;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--portal-link);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.home-lead .home-entry:hover,
.home-lead .home-entry:focus-visible { background: none; color: var(--portal-brand-deep); }
.home-lead .home-entry::after { content: none; }

/* 設置案内は 1 行(文+小さなボタン)。帯・見出し・英字ラベルは置かない。 */
.home-embed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: 16px;
  border-top: 1px solid var(--portal-line);
}
.home-embed p { flex: 1 1 320px; margin: 0; }
.home-embed .home-entry {
  flex: 0 0 auto;
  align-self: auto;
  margin-top: 0;
  padding: 0 18px;
  border: 1px solid var(--navy-500);
  background: none;
  color: var(--portal-link);
}
.home-embed .home-entry:hover,
.home-embed .home-entry:focus-visible { background: var(--navy-100); color: var(--portal-brand-deep); }

/* 注記 1 行(最小フッター .v61-foot の中)。 */
.home-note {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.portal-page a:focus-visible,
.portal-page button:focus-visible,
.portal-page summary:focus-visible,
.portal-page input:focus-visible { outline: 3px solid var(--portal-brand); outline-offset: 3px; border-radius: 6px; }
.portal-page .skip-link { border-color: var(--portal-brand); color: var(--portal-link); }
/* design.css の .skip-link は画面外へ退避しても影だけが左上に残る。フォーカスされるまで影を出さない。 */
.portal-page .skip-link:not(:focus) { box-shadow: none; }

/* ── 幅 ─────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .home-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .home-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-item p { max-width: none; }
}
/* v76(2026-09-09、納品前検査 I5): 機能が 2 つの院では 3 列固定のままだと右の 1 列が空く
   (ジュエルの 1280px で実測: カード列は x=56..827、器は x=56..1224 で右 397px が空白)。
   使わない機能の <li> は server/lib/brand-page.js が配信時に落とすので、DOM の子の数で判る。
   ダビデは 3 つあるので :has() が一致せず、描画は 1px も変わらない。
   :has() が無い実装では従来どおり 3 列に落ちるだけで崩れない。 */
@media (min-width: 940px) {
  .home-list:has(> .home-item:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 狭幅はカードの間を少し詰める(market-layout-v5 が 680px の分岐を固定している)。 */
@media (max-width: 680px) {
  .home-list { gap: 14px; }
}

/* v80(2026-09-14、市場比較 M-3 / G2): 375 実測で最初の主導線(高さ36px・幅96px 以上のボタン)が
   y=567(ダビデ)/617(ジュエル)。相手 13 社の中央値は y≒24(ヘッダーの中)だった。HTML は変えられない
   ため、狭い幅だけカードの組み方を変える: 挿絵は消さずに見出しの横へ置き(全体が見えるよう contain)、
   説明・チップ・ボタンを上へ詰める。640px 以上の並び・動きはそのまま。 */
@media (max-width: 680px) {
  body.home-page .home-head { min-height: 72px; padding-top: 12px; margin-bottom: 6px; gap: 12px; }
  body.home-page .home-head-mascot { width: 64px; height: 64px; }
  .home-sub { margin-bottom: 10px; }
  body.home-page .home-item {
    display: grid;
    grid-template-columns: clamp(96px, 30vw, 128px) 1fr;
    column-gap: 14px;
    align-items: start;
    padding-top: clamp(16px, 4vw, 22px);
  }
  body.home-page .home-art {
    grid-column: 1; grid-row: 1 / span 2;
    margin: 0; aspect-ratio: 1; border-radius: 12px;
  }
  /* 枠が小さくなるので切り取らずに全体を出す(地色は素材と同じ生成りのまま)。 */
  .home-art::before { background-size: contain; }
  .home-item h3 { grid-column: 2; grid-row: 1; margin-bottom: 4px; }
  .home-item p { grid-column: 2; grid-row: 2; margin-bottom: 10px; font-size: 15px; line-height: 1.7; }
  .home-chips { grid-column: 1 / -1; margin-bottom: 10px; }
  .home-entry { grid-column: 1 / -1; }
}

/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): 院名→ラベル→カード3枚→
 * 設置案内の段差せり上がり(v63-rise-lg)と、案内役の登場ポップ+無限浮遊(v60-mascot-in・
 * v63-idle)を削除。最初から静止して全要素が表示される。 */
@media (max-width: 767px) { body.portal-page { --v62-band: 220px; } }

@media (prefers-reduced-motion: reduce) {
  .portal-page *, .portal-page *::before, .portal-page *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ── 印刷 ───────────────────────────────────────────────────────── */
@media print {
  body.portal-page { background: #fff; color: #000; }
  .home-head .home-title, .home-sub { color: #000; text-shadow: none; }
  body.home-page .home-head-mascot { display: none; }
  .home-item {
    break-inside: avoid;
    page-break-inside: avoid;
    border-color: #999;
  }
  .home-entry { border: 1px solid #999; background: none; color: #000; }
  /* 押せない矢印は紙から外す(操作できるように見えてしまう)。 */
  .home-entry::after { display: none; }
  .home-embed { border-top-color: #999; }
}

/* v66(2026-09-05 深夜): 初めての人向けの事実の札(登録不要/約2分/結果はその場 など)。説明文とボタンの間、
   金の細枠の小さな札(visual-customer-v30 の <li> 走査を壊さないよう span で組む)。文は増やさず事実だけ。印刷では省く。 */
.home-item .home-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.home-item .home-chips > span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px;
  border: 1px solid var(--gold-line); border-radius: 999px; background: #ffffff;
  color: var(--navy-800); font-size: 12.5px; font-weight: 800; line-height: 1.3;
}
.home-item .home-chips > span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #e3cf9a, var(--gold-line)); }
@media print { .home-item .home-chips { display: none; } }

/* ══ v83(2026-09-15) 事実の札を注記に直す(P-12)══════════════════════════
 * grok 依頼 4 の指摘(v82 N7 と同じ指摘の 2 回目): 「登録不要」「約3分」「結果はその場で」が
 * 金の細枠+金の丸の札で、押せる部品(絞り込みの札)に見える。
 * 枠・地・金の丸を外し、「・」で区切った 1 行の注記にする(v82 A6= skin.css 2877 の
 * 診断 1 問目と同じ見せ方)。HTML(public/index.html 51/58/65)と文言はそのまま。
 * 区切りの「・」は ::after に置く(A6 は ::before)。飾りが消えたかは ::before を見て確かめる
 * ため、そちらは content:none のままにしておく。見た目・読み上げの順は A6 と同じ。 */
.home-item .home-chips { gap: 0; margin: 0 0 12px; }
.home-item .home-chips > span {
  min-height: auto; gap: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--portal-muted); font-size: 13px; font-weight: 700; line-height: 1.5;
}
/* 金の丸は content:none で作られなくなるが、計算値だけを見たときに残って見えないよう
 * 幅・地・角丸も戻しておく。 */
.home-item .home-chips > span::before { content: none; width: auto; height: auto; border-radius: 0; background: none; }
.home-item .home-chips > span:not(:last-child)::after {
  content: "・"; display: inline; margin: 0 6px; color: var(--portal-muted); font-weight: 400;
}

/* ══ v83(2026-09-15) 設置案内は小さな 1 段に(P-16)══════════════════════════
 * gemini 文言監査 #1: 「公式サイトへの埋め込みは、コードを1行貼るだけで設置できます。」+
 * 釦は Web 担当者向けの案内で、来院を考えている人が開くトップに機能カードと同じ大きさで
 * 並んでいた。HTML(public/index.html 71-74)と文言はそのままで、見た目だけを
 * 「枠も地も無い小さな 1 段+文字リンク」にする(リンクは残す= 担当者は今までどおり行ける)。
 * 押せる高さ 44px は触らない(指で押す大きさの下限)。 */
.home-embed {
  gap: 4px 12px;
  margin-top: clamp(20px, 2.5vw, 28px);
  padding-top: 12px;
  border-top: 0;
}
.home-embed p {
  flex: 1 1 auto;
  max-width: none;
  color: var(--portal-muted);
  font-size: 13px;
  line-height: 1.7;
}
.home-embed .home-entry {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--portal-link);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.home-embed .home-entry:hover,
.home-embed .home-entry:focus-visible { background: none; color: var(--portal-brand-deep); }
@media print { .home-embed { border-top: 0; } }

/* 共通URLの入口。既存の診断・チャットのカードとは分けて、全サービスを先に選べる。 */
.home-services { margin: 8px 0 28px; }
.home-service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-service {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--portal-line);
  border-top: 3px solid var(--portal-brand);
  border-radius: 12px;
  background: var(--portal-surface);
  color: var(--portal-ink);
  text-decoration: none;
}
.home-service strong { font-size: 18px; line-height: 1.5; }
.home-service > span { font-size: 13px; color: var(--portal-muted); }
.home-service .home-service-action {
  margin-top: auto;
  padding-top: 5px;
  color: var(--portal-link);
  font-size: 14px;
  font-weight: 700;
}
.home-service:hover { border-color: var(--portal-brand); background: #f8f9fc; }
.home-service-jewel { border-top-color: #76263f; }
.home-service-jewel .home-service-action { color: #76263f; }
#davide-features { scroll-margin-top: 20px; }
@media (max-width: 680px) {
  .home-services { margin-bottom: 22px; }
  .home-service-list { grid-template-columns: 1fr; gap: 10px; }
  .home-service { padding: 12px 16px; gap: 2px; }
  .home-service strong { font-size: 17px; }
  .home-service .home-service-action { padding-top: 2px; }
}