/* 書体の調整（全ページ共通）。
   和文はゴシック1系統。見出しは太さと字詰め（palt）で締め、数字だけ欧文の書体にする。
   国内のサービスサイト（SmartHR・freee・STORES・BASE・note など）の実測をもとにしている。 */

h1, h2, h3, .section-title, .step-title, .running-title, .doc-title, .about-h1, .about-h2,
.pdf-side-title, .help-demo-label, .sample-verdict, .score-summary, .kpi-name .kpi-value, .btn {
  font-feature-settings: "palt" 1;
}
h1 { font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }
h2, .section-title { font-weight: 700; letter-spacing: 0; line-height: 1.45; }
h3 { font-weight: 700; }

/* 大きな数字だけ欧文の書体 */
.level-num, .level-num span, .kpi-value > span, .pdf-num, .sample-no, .pager-no, .action-num, .price-amount, .stat-value,
.previous-lv strong, .ranking .rval, .matrix tfoot td {
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1;
}
.level-num span, .kpi-value > span { font-weight: 700; letter-spacing: -.01em; }

/* トップ: ファーストビューの見出し */
.hero-wide h1 { font-size: clamp(30px, 3vw, 42px); line-height: 1.4; }
@media (max-width: 767px) { .hero-wide h1 { font-size: 26px; line-height: 1.45; } }

/* 料金は数字を大きく */
.price-figure { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; color: var(--public-primary); }
.price-figure .price-amount { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.price-figure .price-unit { font-weight: 700; font-size: 17px; color: var(--public-text); }
@media (max-width: 767px) { .price-figure .price-amount { font-size: 50px; } }

/* 330円を目立たせる。数字だけ欧文の書体で大きく（書体は増やさない。数字用の Outfit を使う） */
.yen { font-family: var(--font-num); font-weight: 700; font-size: 1.42em; line-height: 1; letter-spacing: -.01em; margin: 0 .04em 0 .06em; vertical-align: -.07em; }
.lp-sticky small .yen { font-size: 1.6em; }
.about-table strong .yen { font-size: 1.5em; }
.price-figure .price-amount { font-size: 88px; letter-spacing: -.03em; }
.price-figure .price-unit { font-size: 18px; }
@media (max-width: 767px) {
  .price-figure .price-amount, .lp .price-figure .price-amount { font-size: 72px; }
  .price-figure .price-unit { font-size: 15px; }
}

/* トップの見出し「おすすめ」に、チョークで引いたような青い二本線（水平。鉤括弧の始めから終わりまで）。
   線はSVGで描き、ノイズのフィルターでかすれとにじみを出す。読み込み時に左から引く */
.chalk { position: relative; display: inline-block; z-index: 0; }
.chalk::after {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: -.22em; height: .46em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='c' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='3' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='11' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.5 1.9' result='ga'/%3E%3CfeComposite in='d' in2='ga' operator='in'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23c)' fill='none' stroke='%232F80ED' stroke-linecap='round'%3E%3Cpath d='M4 9 C 60 8, 140 10, 196 9' stroke-width='7.5' opacity='.95'/%3E%3Cpath d='M4 22 C 60 23, 140 21, 196 22' stroke-width='5.5' opacity='.85'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); animation: chalk-draw .9s cubic-bezier(.3,.7,.2,1) .35s forwards;
}
@keyframes chalk-draw { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .chalk::after { animation: none; clip-path: none; } }