/* ============================================================
 * トップページ
 * ============================================================
 * ヒーローの指定:
 *   ・白い背景／テーマカラー（緑）の文字
 *   ・1段目「その「なんとなく」を」→ 2段目「確かな「気づき」に」
 *   ・文字は最低限。ボタンなどは置かない
 *   ・背景の粒子は、流れながら集まって音符の形になる
 *
 * 表示の順番:
 *   0.25s 1段目
 *   0.75s 2段目
 *   1.2s  背景の粒子がフェードインし、波形として流れ始める
 *   以後   波形 → 音符に集まる → しばらく保つ → ほどけて波形へ戻る（繰り返し）
 *
 * 動かしているのは canvas の中と、文字の transform / opacity だけ。
 * width や top を動かすと再レイアウトが走り CLS が悪化するため
 * （現行サイトで実際に 0.27 まで悪化した経緯がある）。
 * ============================================================ */

/* ---------- ここから下はトップページ専用 ---------- */
/* ================= ヒーロー ================= */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;
  overflow:hidden;background:#fff}

/* 粒子。width/height を明示するのは、ヒーローが place-items:center の
   グリッドで、inset:0 だけでは canvas が伸びず 300x150 のままになるため */
#wavefield{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;
  opacity:0;transition:opacity 1.1s ease}
#wavefield.on{opacity:1}

/* 文字の後ろに白いにじみを敷く。粒子と文字がどちらも緑なので、
   これがないと重なった部分で文字が読みにくくなる */
.hero__in{position:relative;z-index:2;text-align:center;padding:96px 24px}
.hero__in::before{content:'';position:absolute;inset:-8% -12%;z-index:-1;
  background:radial-gradient(58% 52% at 50% 50%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 45%,transparent 78%)}

.hero__h1{margin:0;font-weight:900;letter-spacing:-.005em;
  font-size:clamp(26px,7.4vw,74px);line-height:1.34;color:var(--teal)}
/* opacity は 0 ではなく .01。0 だと Chrome が LCP 候補から外し、
   PageSpeed Insights が NO_LCP になる（見た目は 0 と区別がつかない） */
.hero__h1 .ln{display:block;opacity:.01;
  animation:heroLine .85s cubic-bezier(.16,.84,.3,1) both}
.hero__h1 .ln--1{animation-delay:.25s}
.hero__h1 .ln--2{animation-delay:.75s}
/* かぎかっこの中だけ濃くして視線を集める */
.hero__h1 em{font-style:normal;color:var(--teal-dark)}

@keyframes heroLine{
  from{opacity:.01;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:none}
}


.stats__head{font-size:clamp(24px,4.4vw,44px);font-weight:900;line-height:1.4;margin:0}
.stats__head .tint{color:var(--teal)}
.stats__lead{margin:0;font-size:15px;font-weight:800;color:var(--ink-mid)}

.stats{display:grid;gap:18px;grid-template-columns:1fr;max-width:720px;margin:0 auto}
/* minmax(0,1fr) にするのは、中身が広いときに列そのものが広がるのを防ぐため */
@media(min-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 対象規模の3項目。狭い画面では1列、640px以上で2列、960px以上で3列に並べる */
.stats--3{max-width:1040px}
/* 3列に並ぶと1枚あたりが狭くなる。いちばん長い「約3,619万人」（5.5文字ぶん）が
   はみ出していたので、この行だけ数字の上限を小さくする。
   （48px だと 264px 必要／使えるのは 245px しかなかった） */
.stats--3 .stat__n{font-size:clamp(26px,3.4vw,40px)}
@media(min-width:960px){.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 呼吸器系の疾患の2項目。3項目の下に、同じ幅で2列に並べる */
.stats--2{max-width:1000px}
@media(min-width:640px){.stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats>div{padding:30px;border-radius:22px;background:var(--bg-soft);
  border:1px solid var(--line);text-align:center}
/* 数字と単位のあいだで折り返さないようにする（「約12万施設」が2行になるのを防ぐ） */
.stat__n{font-size:clamp(30px,4.6vw,48px);font-weight:900;color:var(--teal);line-height:1;
  white-space:nowrap}
/* 足りていない数は赤で示す（他の数字＝緑と意味を区別する） */
.stat__n--neg{color:var(--red)}
/* 失われている数はオレンジ。「足りない（赤）」とは意味が違うので色も分ける */
.stat__n--alert{color:var(--orange-dark)}
/* カウントアップ中に桁幅が変わって行が揺れないようにする */
.count{font-variant-numeric:tabular-nums}
/* 数字の幅を、最初から「数え終わった後の幅」で確保しておく。
   見えない控え（count-box__ph）を同じマスに重ね、そちらで幅を決める。
   これで 0 → 204,964 と桁が増えても枠の大きさが変わらない（カクつかない）。 */
.count-box{display:inline-grid;justify-items:center}
.count-box>*{grid-area:1 / 1}
.count-box__ph{visibility:hidden;font-variant-numeric:tabular-nums}
.stat__l{font-size:13px;color:var(--ink-mid);margin-top:10px;font-weight:700}
.stat__s{font-size:11px;color:var(--ink-dim);margin-top:6px}
.note{color:var(--orange);font-weight:700}
/* ターゲット別のカード。1枚目（介護事業者）だけ横幅いっぱいで大きく置く */
.who{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){
  .who{grid-template-columns:repeat(2,1fr)}
  .who__card--lead{grid-column:1 / -1}
}
/* カードの高さは grid がそろえる。中身を縦並びにして、ボタンだけを下端へ寄せると
   カードごとに文章の量が違ってもボタンの位置がそろう。 */
.who__card{padding:36px;border-radius:26px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column}
.who__card .btn{margin-top:auto;align-self:flex-start}
.who__card--lead{background:linear-gradient(150deg,var(--teal-pale),#fff)}
.who__card h3{font-size:19px;font-weight:900;margin:0 0 14px;line-height:1.5}
/* 見出しが1行のカードと2行のカードが並ぶと本文の開始位置がずれるため、
   横に2枚並ぶ幅では見出しに2行分の高さを確保しておく。 */
@media(min-width:900px){
  .who__card:not(.who__card--lead) h3{min-height:3em}
}
.who__card--lead h3{font-size:clamp(20px,2.4vw,26px)}
.who__t{margin:0 0 18px;font-size:14px;color:var(--ink-mid);line-height:1.9}
.who__list{margin:0 0 24px;padding-left:1.15em;font-size:13px;color:var(--ink-mid)}
.who__list li{margin-bottom:7px}

/* ---------- ABOUT US エリアの背景 ----------
   PRICE・ABOUT US ページのヒーローと同じ「きらり」（shared.css の .shine）。
   文字は光より前に出す。 */
.co{position:relative;overflow:hidden}
.co__in{position:relative;z-index:2}


@media(prefers-reduced-motion:reduce){ #wavefield{opacity:1;transition:none} }