/* Hoppin ── 見た目の土台（デザイントークン・グラデーション・フレーム）
   正＝BAN_Vault/30_Systems/Hoppin設計.md §12。画面はこの部品だけで組む（画面ごとに色やグラデを書かない）。
   確認＝public/styleguide.html を 1x/2x/3x で開く。 */

/* ---------- 1. トークン ---------- */
:root{
  /* 色（LPと同じ系統。面＝cream/mint・文字＝ink・主役＝green/deep） */
  --h-cream:#f8f7ee; --h-cream-2:#fffdf4; --h-mint:#e8f4df; --h-mint-2:#d7ecc9;
  --h-green:#32844b; --h-green-2:#60b268; --h-deep:#155c35; --h-deep-2:#0d4427;
  --h-ink:#193b2a; --h-muted:#485c4f; --h-line:#dce5d7; --h-line-2:#c9dcc1;
  /* 面の上に置く「濃い緑の文字」（eyebrow・ピル・ラベル）。夜は明るい緑に反転する＝必ずこのトークンを使う（--h-deep を文字色に直接使わない） */
  --h-deep-text:#155c35;
  --h-yellow:#ffcf54; --h-yellow-2:#f0c04a; --h-orange:#faab42; --h-coral:#f26d5b; --h-pink:#f7a8c4;
  --h-white:#ffffff;
  /* 文字 */
  --h-font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  /* 角丸の尺度（この5つから選ぶ） */
  --h-r-8:8px; --h-r-12:12px; --h-r-16:16px; --h-r-20:20px; --h-r-28:28px;
  /* ヘアライン＝端末ピクセルに合わせる（2x以上で0.5px） */
  --h-hair:1px;
  /* 影（重ねる。単発の大きなぼかしにしない） */
  --h-shadow-1:0 1px 2px rgba(25,59,42,.06),0 2px 6px rgba(25,59,42,.05);
  --h-shadow-2:0 1px 2px rgba(25,59,42,.07),0 6px 16px rgba(25,59,42,.08),0 18px 40px rgba(36,77,44,.08);
  --h-shadow-3:0 2px 4px rgba(25,59,42,.08),0 12px 28px rgba(25,59,42,.12),0 32px 64px rgba(36,77,44,.12);
  /* 内側のハイライト（枠の上辺に光を乗せる） */
  --h-inset-light:inset 0 1px 0 rgba(255,255,255,.65);
  --h-inset-light-soft:inset 0 1px 0 rgba(255,255,255,.35);
  /* 面の色（グラデの中間色。2色で飛ばさないための“つなぎ”） */
  --h-g-a:#fffdf4; --h-g-b:#f3f8ea; --h-g-c:#e6f2dc; --h-g-d:#d9ecd0; --h-g-e:#c9e4bf;
  /* セーフエリア */
  --h-safe-t:env(safe-area-inset-top,0px); --h-safe-b:env(safe-area-inset-bottom,0px);
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){:root{--h-hair:.5px}}

/* 夜（時間帯で切り替える。色相は同じ・明度だけ落とす） */
:root[data-tod="night"]{
  --h-cream:#12271c; --h-cream-2:#173023; --h-mint:#1b3a2a; --h-mint-2:#214733;
  --h-ink:#eef5ea; --h-muted:#a9c2b0; --h-line:#2a4a38; --h-line-2:#355a44; --h-white:#1e3a2b;
  --h-deep-text:#bfe6b0;
  --h-g-a:#1a3426; --h-g-b:#173022; --h-g-c:#142a1f; --h-g-d:#11251b; --h-g-e:#0e2017;
  --h-inset-light:inset 0 1px 0 rgba(255,255,255,.08); --h-inset-light-soft:inset 0 1px 0 rgba(255,255,255,.05);
  --h-shadow-2:0 1px 2px rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.28),0 18px 40px rgba(0,0,0,.3);
}

/* ---------- 2. 土台 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.h{margin:0;font-family:var(--h-font);color:var(--h-ink);background:var(--h-cream);line-height:1.7;font-feature-settings:"palt" 1}
.h img,.h svg{display:block;max-width:100%}
/* リセットは :where で特異性ゼロにする（.h-btn 等の色を上書きしない。2026-10-30 夜モードの「◎できた」が黒文字になった原因） */
.h :where(button,input,select,textarea){font:inherit;color:inherit}
.h :where(a){color:inherit;text-decoration:none}

/* ---------- 3. グラデーション（3色以上・広い範囲・段差を見せない） ---------- */
/* 画面の背景＝複数の radial を重ねたメッシュ。朝/昼/夕/夜で向きと色幅を変える */
.h-bg{
  background:
    radial-gradient(120% 90% at 85% -10%, var(--h-g-e) 0%, rgba(201,228,191,0) 55%),
    radial-gradient(90% 70% at -10% 20%, var(--h-g-c) 0%, rgba(230,242,220,0) 60%),
    radial-gradient(80% 60% at 50% 110%, var(--h-g-d) 0%, rgba(217,236,208,0) 60%),
    linear-gradient(180deg, var(--h-g-a) 0%, var(--h-g-b) 38%, var(--h-g-c) 72%, var(--h-g-d) 100%);
  background-attachment:local;
}
:root[data-tod="morning"] .h-bg{
  background:
    radial-gradient(110% 80% at 80% -5%, #fff1c9 0%, rgba(255,241,201,0) 55%),
    radial-gradient(90% 70% at -10% 25%, #e3f3d3 0%, rgba(227,243,211,0) 60%),
    linear-gradient(180deg,#fffaf0 0%,#fbf7e6 35%,#edf5e0 70%,#dfeed3 100%);
}
:root[data-tod="evening"] .h-bg{
  background:
    radial-gradient(110% 80% at 85% -5%, #ffd9a8 0%, rgba(255,217,168,0) 55%),
    radial-gradient(90% 70% at -10% 30%, #f4e3c9 0%, rgba(244,227,201,0) 60%),
    linear-gradient(180deg,#fff4e6 0%,#f8ead6 35%,#eee3cf 70%,#e3dfcc 100%);
}
:root[data-tod="night"] .h-bg{
  background:
    radial-gradient(110% 80% at 85% -5%, #1f4a3a 0%, rgba(31,74,58,0) 55%),
    radial-gradient(90% 70% at -10% 30%, #1a3a2d 0%, rgba(26,58,45,0) 60%),
    linear-gradient(180deg,#143024 0%,#122a1f 40%,#0f2419 75%,#0c1e15 100%);
}
/* 主役の面（コーチの吹き出し・ランクの帯など）。2色でなく4段で深さを出す */
/* 白文字を載せる面＝いちばん明るい色止めでも白と 4.5 以上（#2b7d47＝4.6） */
.h-grad-green{background:linear-gradient(135deg,#2b7d47 0%,#267342 35%,#1e6a3c 68%,#155c35 100%)}
.h-grad-green-soft{background:linear-gradient(160deg,#f3faee 0%,#e8f4df 40%,#d7ecc9 100%)}
.h-grad-sun{background:linear-gradient(135deg,#ffe08a 0%,#ffcf54 40%,#f7b53e 75%,#f0a030 100%)}
.h-grad-sky{background:linear-gradient(180deg,#eaf6ff 0%,#dff0fb 45%,#d2e9f4 100%)}
/* 大面積のバンディング消し＝薄いノイズを重ねる（3%）。背景の上に ::after で重ねる */
.h-dither{position:relative;isolation:isolate}
.h-dither::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px}
.h-dither>*{position:relative;z-index:1}
:root[data-tod="night"] .h-dither::after{mix-blend-mode:screen;opacity:.05}

/* ---------- 4. フレーム（ヘアライン＋内側のハイライト＋重ねた影の3層） ---------- */
.h-card{
  background:var(--h-white);
  border-radius:var(--h-r-20);
  box-shadow:0 0 0 var(--h-hair) var(--h-line),var(--h-inset-light),var(--h-shadow-2);
}
.h-card.is-flat{box-shadow:0 0 0 var(--h-hair) var(--h-line),var(--h-inset-light),var(--h-shadow-1)}
.h-card.is-raised{box-shadow:0 0 0 var(--h-hair) var(--h-line-2),var(--h-inset-light),var(--h-shadow-3)}
.h-card.is-mint{background:linear-gradient(160deg,#f7fbf3 0%,#eef6e7 100%)}
:root[data-tod="night"] .h-card.is-mint{background:linear-gradient(160deg,#22442f 0%,#1c3a28 100%)}
/* 色面のカード（グラデの上に枠を乗せる＝外側は濃い緑の線・内側は光） */
.h-card.is-green{color:#fff;background:linear-gradient(135deg,#2b7d47 0%,#267342 35%,#1e6a3c 68%,#155c35 100%);box-shadow:0 0 0 var(--h-hair) rgba(13,68,39,.9),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.12),var(--h-shadow-2)}
/* 端末の枠（デモ・説明用）。iPhone 15 系の比率 390×844・角丸 54・ベゼル 10 */
.h-phone{position:relative;width:390px;aspect-ratio:390/844;border-radius:54px;padding:10px;background:linear-gradient(160deg,#2f5a3c 0%,#1d4229 55%,#12301c 100%);
  box-shadow:0 0 0 var(--h-hair) rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.35),var(--h-shadow-3)}
.h-phone>.h-screen{position:absolute;inset:10px;border-radius:44px;overflow:hidden;background:var(--h-cream);box-shadow:inset 0 0 0 var(--h-hair) rgba(0,0,0,.25)}
.h-phone::before{content:"";position:absolute;left:50%;top:22px;width:118px;height:34px;transform:translateX(-50%);border-radius:20px;background:#0a1a10;z-index:2}
.h-phone.is-small{width:230px;border-radius:32px;padding:6px}
.h-phone.is-small>.h-screen{inset:6px;border-radius:26px}
.h-phone.is-small::before{top:12px;width:70px;height:20px;border-radius:12px}
/* ヘアラインの区切り */
.h-hr{height:var(--h-hair);background:var(--h-line);border:0;margin:0}
/* ボタン＝面はグラデ・下に厚み・上に光 */
.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#2b7d47 0%,#226f3e 60%,#1b6338 100%);
  box-shadow:0 0 0 var(--h-hair) rgba(13,68,39,.9),inset 0 1px 0 rgba(255,255,255,.28),0 4px 0 #0d4427,0 6px 14px rgba(13,68,39,.22);
  transition:transform .16s cubic-bezier(.2,.9,.2,1),box-shadow .16s}
.h-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--h-hair) rgba(13,68,39,.9),inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 #0d4427,0 2px 6px rgba(13,68,39,.18)}
.h-btn.is-ghost{color:#155c35;background:linear-gradient(180deg,#ffffff 0%,#f6faf2 100%);box-shadow:0 0 0 var(--h-hair) var(--h-line-2),var(--h-inset-light),var(--h-shadow-1)}
:root[data-tod="night"] .h-btn.is-ghost{color:#eef5ea;background:linear-gradient(180deg,#27503a 0%,#1f4330 100%);box-shadow:0 0 0 var(--h-hair) rgba(191,230,176,.35),inset 0 1px 0 rgba(255,255,255,.08),var(--h-shadow-1)}
.h-btn.is-sun{color:#193b2a;background:linear-gradient(180deg,#ffdc7a 0%,#ffcf54 55%,#f5bd45 100%);box-shadow:0 0 0 var(--h-hair) rgba(170,120,20,.55),inset 0 1px 0 rgba(255,255,255,.55),0 4px 0 #d9a63a,0 6px 14px rgba(217,166,58,.28)}
/* チップ・ピル */
.h-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:800;color:var(--h-deep-text);background:var(--h-mint);box-shadow:0 0 0 var(--h-hair) rgba(50,132,75,.18),var(--h-inset-light-soft)}
:root[data-tod="night"] .h-pill{color:#cfe6c3;background:#214733;box-shadow:0 0 0 var(--h-hair) rgba(207,230,195,.18),inset 0 1px 0 rgba(255,255,255,.06)}
/* 進捗バー＝溝に内影・中身はグラデ・先端に光 */
.h-bar{height:12px;border-radius:999px;background:var(--h-mint-2);box-shadow:inset 0 1px 2px rgba(25,59,42,.14);overflow:hidden}
.h-bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#8fd08a 0%,#60b268 55%,#3f9a5a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.08)}

/* ---------- 5. 文字 ---------- */
.h-h1{font-size:clamp(28px,6vw,40px);line-height:1.3;letter-spacing:-.03em;font-weight:900;margin:0}
.h-h2{font-size:clamp(20px,4.2vw,26px);line-height:1.35;letter-spacing:-.02em;font-weight:900;margin:0}
.h-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--h-deep-text);font-weight:800;font-size:12.5px;letter-spacing:.08em}
.h-eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--h-yellow);box-shadow:4px -3px 0 var(--h-green)}
.h-muted{color:var(--h-muted)}
.h-num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- 6. イラストの置き場（ピョコ） ---------- */
/* 原画のPNGをそのまま使う（描き直さない・2026-10-30 小泉）。精細度は解像度で担保＝表示幅は原画の1/3まで
   （LPの3枚 640px → 最大 213px／決定稿 1254px → 最大 418px）。それより大きく出すときは原画を取り寄せる。
   assets/pyoko/pyoko-basic.png（決定稿・背景を透明にしただけ）／pyoko-jump / learning / celebrate（LPと同じ） */
.h-pyoko{width:var(--size,120px);height:auto;aspect-ratio:1/1;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 10px 10px rgba(34,74,35,.14))}
.h-pyoko.is-xs{--size:32px;filter:none}
.h-pyoko.is-s{--size:72px;filter:drop-shadow(0 4px 5px rgba(34,74,35,.14))}
.h-pyoko.is-m{--size:140px}
.h-pyoko.is-l{--size:260px;filter:drop-shadow(0 18px 16px rgba(34,74,35,.14))}
@keyframes h-float{50%{transform:translateY(-8px) rotate(2deg)}}
.h-pyoko.is-live{animation:h-float 3.8s ease-in-out infinite;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.h-pyoko.is-live{animation:none}.h-btn{transition:none}}

/* ---------- 6.5 文章と改行（見づらい折り返しを出さない・2026-10-30 小泉） ----------
   約束：①文節の途中で折らない ②数字と単位・「」の中の短い語・日付は離さない ③見出しは行の長さを揃える
   ④行頭に「。、」や閉じカッコを出さない ⑤長い英数字（URL・ID）は枠からはみ出させない ⑥1行の文字数はスマホで18〜22字 */
.h{line-break:strict;                 /* 禁則＝厳格（小さい「っ」「ー」も行頭に出さない） */
   /* overflow-wrap:anywhere は全体に掛けない（表の名前の列が字の途中で折れる＝シフト便の指摘 2026-10-30）。本文と .h-code だけに掛ける */
   hanging-punctuation:allow-end;     /* 行末の「。、」を枠の外にぶら下げて揃える（対応ブラウザだけ） */
   text-spacing-trim:trim-start;      /* 行頭の「（」の前の空きを詰める（対応ブラウザだけ） */
   -webkit-text-size-adjust:100%}
/* 本文＝文節で折る（Chrome/Edge は auto-phrase。未対応＝Safari は通常の折り返し＋下のクラスで要所を守る） */
.h p,.h li,.h .h-body,.h .bubble{word-break:normal;overflow-wrap:anywhere}
@supports (word-break:auto-phrase){.h p,.h li,.h .h-body,.h .bubble,.h .h-h1,.h .h-h2,.h-phrase{word-break:auto-phrase}}
/* 本文はみなしごの1文字を残さない（対応ブラウザだけ） */
.h p,.h li,.h .bubble{text-wrap:pretty}
/* 見出し・吹き出しの短文＝行の長さを揃える */
.h-h1,.h-h2,.h-balance{text-wrap:balance}
/* 離したくないかたまり＝数字と単位・日付・項目名の短い語・「」の中。span に付ける */
.h-nb{white-space:nowrap}
/* 数字＋単位は字幅を揃え、単位は少し小さく */
.h-unit{font-size:.78em;margin-left:.08em;font-weight:800}
/* 1行に収めたいラベル（ピル・タブ・ボタン）＝省略記号で切る */
.h-1l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 2行・3行で止めて「…」（一覧の項目名・コーチの要約） */
.h-2l,.h-3l{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.h-2l{-webkit-line-clamp:2}.h-3l{-webkit-line-clamp:3}
/* 本文の行の長さ＝読みやすい上限（全角 ~34字）。スマホでは自然に 18〜22字になる */
.h-measure{max-width:34em}
/* 英数字の塊（ID・URL・メール）＝どこでも折ってよい・等幅寄り */
.h-code{overflow-wrap:anywhere;word-break:break-all;font-feature-settings:"tnum" 1}
/* 改行してよい場所を自分で決める文（短い見出し・ボタン）：<br class="h-br-sp"> はスマホだけ改行 */
.h-br-sp{display:none}
@media (max-width:420px){.h-br-sp{display:inline}}
/* 見出しの palt（詰め）は見出しだけ。本文は詰めない＝読みやすさ優先 */
body.h{font-feature-settings:normal}
.h-h1,.h-h2{font-feature-settings:"palt" 1}

/* ---------- 7. 端末ピクセルに乗せる ---------- */
.h-crisp{transform:translateZ(0)}
.h-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}