/* ============================================================
   YadoForce — common.css
   2ページ以上で使われるスタイル。個別ページの <style> より先に読む。
   トークンの定義は YadoForce_Design.md 第3〜5章・第11章を正とする。
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
h1,h2,h3,h4{color:var(--color-text-heading);margin:0;font-weight:700;line-height:1.25;letter-spacing:-.01em;}
p{margin:0;}
a{color:var(--yf-blue-700);text-decoration:none;}
a:hover{color:var(--yf-blue-500);}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-8);}
.sec--panel{background:var(--color-bg-panel);}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--color-border-strong);}
.h2{font-size:26px;line-height:1.4;text-wrap:balance;}
.cta .h2,.cta h2{max-width:none;}
.lead{font-size:17px;line-height:1.9;color:var(--color-text);margin-top:var(--space-4);text-wrap:pretty;}
.btn--primary{background:var(--color-action);color:#fff;}
.btn--primary:hover{background:var(--color-action-hover);color:#fff;}
.btn--ghost{background:transparent;color:var(--yf-blue-700);border-color:var(--color-border-strong);}
.btn--sm{padding:9px 16px;font-size:14px;}
.btn-note{font-size:13px;color:var(--color-text-muted);margin-top:var(--space-3);}
/* ---------- お知らせバー（βテスト期間中のみ使用） ---------- */
.notice{background:var(--yf-accent);color:#FFF1E4;}
.notice__in{max-width:var(--container);margin:0 auto;padding:9px var(--space-8);
  display:flex;align-items:center;gap:var(--space-3);}
.notice__tag{font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1;
  background:#fff;color:var(--yf-accent);
  padding:5px 9px;border-radius:var(--radius-sm);flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;}
.notice__tag i{width:6px;height:6px;border-radius:50%;background:var(--yf-accent);
  display:block;animation:blip 2.2s ease-in-out infinite;}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.notice__t{font-size:13px;line-height:1.6;}
.notice__t b{color:#fff;font-weight:700;}
.notice__l{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.55);}
.notice__l:hover{color:#fff;border-color:#fff;}
.notice__x{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;
  color:rgba(255,255,255,.75);font-size:19px;line-height:1;padding:6px 2px;font-family:inherit;}
.notice__x:hover{color:#fff;}
.notice.is-hidden{display:none;}
.hdr__in{max-width:var(--container);margin:0 auto;padding:0 var(--space-8);
  height:68px;display:flex;align-items:center;gap:var(--space-8);}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo__mark{width:28px;height:28px;flex-shrink:0;}
.logo__type{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--yf-blue-900);}
.hdr__cta{margin-left:auto;display:flex;gap:var(--space-3);align-items:center;}
.hdr__ghost{background:transparent;color:var(--yf-blue-700);border-color:var(--color-border-strong);}
.hdr__ghost:hover{background:var(--yf-blue-50);border-color:var(--yf-blue-400);}
.hdr.is-solid{border-bottom-color:var(--color-border);}
.hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap;}
.frame__dots{display:flex;gap:6px;}
.frame__dots i{width:10px;height:10px;border-radius:50%;background:#C3CCD6;display:block;}
.ico{width:12px;height:12px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.pill--ok{background:var(--yf-positive-bg);color:var(--yf-positive);}
.pill--no{background:var(--yf-negative-bg);color:var(--yf-negative);}
.fix{border-top:2px solid var(--yf-blue-500);padding-top:var(--space-5);}
.fix__t{font-size:15.5px;font-weight:700;color:var(--yf-sumi-900);}
.fix__d{text-wrap:pretty;font-size:14px;line-height:1.85;color:var(--color-text-muted);margin-top:var(--space-2);}
.soon{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm);
  background:var(--yf-warning-bg);color:var(--yf-warning);margin-left:6px;vertical-align:1px;}
.cta__actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-8);flex-wrap:wrap;}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--space-8);}
.ftr h4{font-size:12px;letter-spacing:.1em;color:#7D91A8;font-weight:600;margin-bottom:var(--space-4);}
.ftr li{margin-bottom:10px;}
.ftr a{color:#C6D2E0;font-size:14px;}
.ftr a:hover{color:#fff;}
.ftr .logo__type{color:#fff;}
.ftr__by{font-size:13px;line-height:1.9;color:#8FA2B7;margin-top:var(--space-4);max-width:300px;}
.ftr__base{margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;color:#7D91A8;display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;}

/* ---------- グローバルナビ：ドロップダウン ---------- */
.nav{display:flex;gap:var(--space-6);margin-left:var(--space-4);align-items:center;}
.nav>a,.nav__trigger{font-size:14.5px;font-weight:500;color:var(--yf-sumi-700);}
.nav>a:hover,.nav__trigger:hover{color:var(--yf-blue-700);}
.nav>a.is-cur,.nav__trigger.is-cur{color:var(--yf-blue-700);font-weight:600;}
.nav__item{position:relative;}
.nav__trigger{display:inline-flex;align-items:center;gap:6px;padding:22px 0;}
.nav__trigger::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .18s;opacity:.7;}
.nav__item:hover .nav__trigger::after,
.nav__item:focus-within .nav__trigger::after{transform:rotate(225deg) translateY(-2px);}
.nav__menu{position:absolute;top:100%;left:-16px;min-width:340px;
  background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);box-shadow:0 16px 40px rgba(12,48,88,.16);
  padding:var(--space-3);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:60;}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav__menu a{display:block;padding:12px var(--space-4);border-radius:var(--radius-md);
  transition:background .14s;}
.nav__menu a:hover{background:var(--yf-blue-50);}
.nav__menu b{display:block;font-size:15px;font-weight:700;color:var(--yf-sumi-900);}
.nav__menu span{display:block;font-size:12.5px;line-height:1.6;color:var(--color-text-muted);margin-top:3px;}
.nav__menu a.is-cur b{color:var(--yf-blue-700);}
.nav__all{margin-top:var(--space-2);padding-top:var(--space-3)!important;
  border-top:1px solid var(--color-border);font-size:13.5px;font-weight:600;
  color:var(--yf-blue-700)!important;border-radius:0 0 var(--radius-md) var(--radius-md)!important;}
@media (prefers-reduced-motion:reduce){
  .nav__menu,.nav__trigger::after{transition:none;}
}


/* 狭い画面：お知らせバーとボタンのラベルを短く */
@media (max-width:700px){
  .notice__t{font-size:12.5px;line-height:1.5;}
  .notice__l,.notice__x2{display:none;}
}

.btn__lb{display:inline;}
@media (max-width:700px){ .btn__opt{display:none;} }

/* ---------- モバイルメニュー ---------- */
.burger{display:none;width:40px;height:40px;margin-left:var(--space-2);padding:0;
  background:none;border:none;cursor:pointer;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;flex-shrink:0;}
.burger span{display:block;width:20px;height:2px;border-radius:1px;
  background:var(--yf-sumi-700);transition:transform .2s,opacity .2s;}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mnav{position:absolute;top:100%;left:0;right:0;background:var(--color-surface);
  border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border-strong);
  box-shadow:0 16px 40px rgba(12,48,88,.14);max-height:calc(100vh - 68px);overflow-y:auto;}
.mnav[hidden]{display:none;}
.mnav__in{max-width:var(--container);margin:0 auto;padding:var(--space-5) var(--space-5) var(--space-8);}
.mnav__g{font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--yf-sumi-400);
  padding:var(--space-5) var(--space-3) var(--space-2);}
.mnav__g:first-child{padding-top:var(--space-2);}
.mnav__in>a{display:block;padding:13px var(--space-3);border-radius:var(--radius-md);
  font-size:16px;font-weight:600;color:var(--yf-sumi-800);border-bottom:1px solid var(--yf-sumi-50);}
.mnav__in>a:hover{background:var(--yf-blue-50);}
.mnav__in>a span{display:block;font-size:12.5px;font-weight:400;line-height:1.6;
  color:var(--color-text-muted);margin-top:3px;}
.mnav__cta{display:grid;gap:var(--space-3);margin-top:var(--space-6);}
.mnav__cta .btn{width:100%;}
.mnav__cta .btn--primary{color:#fff;}
.mnav__cta .btn--ghost{color:var(--yf-blue-700);background:var(--color-surface);}
@media (max-width:1000px){ .burger{display:flex;} }
@media (min-width:1001px){ .mnav{display:none!important;} }
@media (prefers-reduced-motion:reduce){ .burger span{transition:none;} }


/* ---------- アンカーのずれ補正 ----------
   ヘッダーが sticky のため、そのままだと見出しがヘッダーの下に隠れる。 */
[id]{scroll-margin-top:88px;}

/* ---------- 目次：いま見ている節 ---------- */
.fnav a.is-here,.faqnav a.is-here{background:var(--yf-blue-500);border-color:var(--yf-blue-500);color:#fff;}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- FAQ：絞り込み ---------- */
.faqfind{margin-top:var(--space-8);max-width:560px;}
.faqfind .inp{font-size:15px;}
.faqfind__n{font-size:13.5px;color:var(--yf-blue-700);font-weight:600;margin-top:var(--space-3);}
.faqfind__n.is-none{color:var(--yf-warning);}
.faqfind__n[hidden]{display:none;}
.qa__i[hidden],.faqg[hidden]{display:none;}


/* ---------- フォーム：検証・保存・送信状態 ---------- */
.err{font-size:13px;font-weight:600;color:var(--yf-negative);margin-top:6px;
  display:flex;align-items:flex-start;gap:6px;}
.err[hidden]{display:none;}
.err::before{content:"!";flex-shrink:0;width:15px;height:15px;border-radius:50%;
  background:var(--yf-negative);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px;}
.inp.is-err,.sel.is-err,.txa.is-err{border-color:var(--yf-negative);background:var(--yf-negative-bg);}
.fld.is-err .fld__l{color:var(--yf-negative);}
.form__err{display:flex;align-items:flex-start;gap:10px;
  background:var(--yf-negative-bg);border:1px solid rgba(192,57,43,.28);
  border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-8);}
.form__err[hidden]{display:none;}
.form__err::before{content:"!";flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:var(--yf-negative);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;}
.form__err b{display:block;font-size:14.5px;font-weight:700;color:var(--yf-negative);}
.form__err span{display:block;font-size:13.5px;line-height:1.8;color:var(--yf-sumi-700);margin-top:4px;}
.form__save{font-size:12.5px;line-height:1.8;color:var(--color-text-muted);
  background:var(--yf-sumi-50);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);
  margin-top:var(--space-8);}
.form__save[hidden]{display:none;}
.form__clear{background:none;border:none;padding:0;margin-left:8px;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--yf-blue-700);cursor:pointer;
  border-bottom:1px solid var(--yf-blue-300);}
.form__clear:hover{color:var(--yf-blue-500);border-color:var(--yf-blue-500);}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none;}
.form__done{background:var(--yf-positive-bg);border:1px solid rgba(26,127,75,.28);
  border-radius:var(--radius-lg);padding:var(--space-8);text-align:center;}
.form__done h3{font-size:20px;color:var(--yf-positive);font-weight:700;}
.form__done p{font-size:14.5px;line-height:1.9;color:var(--yf-sumi-700);margin-top:var(--space-4);}
.form__done small{display:block;font-size:12.5px;color:var(--color-text-muted);margin-top:var(--space-5);
  padding-top:var(--space-4);border-top:1px solid rgba(26,127,75,.2);}


/* ---------- 表の最小幅 ----------
   列数に応じて与える。一律に与えると、2〜3列の表が
   狭いカラムに入ったときに不要な横スクロールが出る。 */
.t--c4{min-width:460px;}
.t--c5{min-width:560px;}
.t--c6{min-width:660px;}


/* ---------- 狭い画面での桁あふれ対策 ----------
   ヘッダーは logo(縮まない) + CTA + ハンバーガー を横並びにするため、
   隙間が32pxのままだと約387px以下で溢れる。iPhone SE(375px)が該当する。 */
@media (max-width:700px){
  .hdr__in{gap:var(--space-4);}
  .logo__type{font-size:17px;}
  .logo__mark{width:26px;height:26px;}
  .hdr__cta .btn--sm{padding:9px 13px;}
  .burger{margin-left:4px;}
}
@media (max-width:400px){
  .wrap,.hdr__in{padding:0 var(--space-4);}
  .logo__type{font-size:16px;}
  .hero h1{font-size:27px;}
  .h2,.cta h2{font-size:20px;}
}

/* 保険：どこかが画面幅を超えても、横スクロールを発生させない。
   これは原因の修正ではなく最後の網。overflow-x:hidden は sticky を壊すため clip を使う。 */
html{overflow-x:clip;}

/* 送信ボタンは狭い画面で幅いっぱいに */
@media (max-width:420px){ .form__sub .btn{min-width:0;width:100%;} }

/* ヘッダー内の情報帯は、狭い画面では折り返す */
.board__bar{flex-wrap:wrap;}
.board__meta{margin-left:auto;}
@media (max-width:560px){
  .board__meta{margin-left:0;width:100%;}
}

/* グラフ内の要素（JSから参照する目印。スタイルは持たない） */


/* ---------- プロダクト画面の再現は、狭い幅で潰さない ----------
   縦積みにすると「ダッシュボード」「3ペイン」という product の姿が失われる。
   レイアウトを保ったまま横スクロールさせる。 */
@media (max-width:1000px){
  .kpis{grid-template-columns:repeat(4,1fr);min-width:720px;}
  .kpi--lead{grid-row:span 2;}
  .app{grid-template-columns:212px minmax(0,1.25fr) minmax(0,1fr);min-width:860px;}
  .app__col{border-right:1px solid var(--color-border);border-bottom:none;}
  .app__col:last-child{border-right:none;}
}


/* ---------- グラフ ----------
   viewBox の幅が実寸。拡大させない。拡大すると SVG 内の文字だけが大きくなり、
   カード見出しと釣り合わなくなる。全幅に置くグラフは viewBox も全幅で作ること。 */
.cht{width:100%;height:auto;display:block;font-family:inherit;margin:0 auto;}
.cht text{font-family:inherit;}
.cht .bar,.cht .ln,.cht .dot,.cht .rdr{}
.chart{background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.chart__h{padding:var(--space-4) var(--space-5);background:var(--yf-sumi-50);
  border-bottom:1px solid var(--color-border);font-size:13px;font-weight:600;color:var(--yf-sumi-700);}
.chart__h--ink{background:var(--yf-blue-900);color:#DCE6F2;}
.chart__h--ink b{color:#fff;}
.chart__b{padding:var(--space-6) var(--space-5);overflow:hidden;}
.chart__f{text-wrap:pretty;padding:var(--space-4) var(--space-5);background:var(--yf-blue-50);
  border-top:1px solid var(--yf-blue-100);font-size:13px;line-height:1.8;color:var(--yf-blue-800);}
.chart__f b{font-weight:700;font-variant-numeric:tabular-nums;}


/* ---------- お知らせ ----------
   一覧（news.html）と個別ページ（news/*.html）の両方で使う。
   記事は build_news.py が生成する。手で編集しない。 */
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-border);}
.news__i{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--space-6);
  padding:var(--space-6) 0;border-bottom:1px solid var(--color-border);}
.news__d{font-size:13.5px;color:var(--color-text-muted);font-variant-numeric:tabular-nums;
  padding-top:3px;white-space:nowrap;}
.news__m{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.news__lb{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  color:var(--yf-sumi-600);background:var(--yf-sumi-50);border:1px solid var(--yf-sumi-200);
  border-radius:3px;padding:2px 8px;white-space:nowrap;}
.news__lb--end{color:var(--yf-sumi-500);background:transparent;border-style:dashed;}
.news__t{font-size:17px;font-weight:700;line-height:1.6;color:var(--yf-sumi-900);
  margin-top:var(--space-2);text-wrap:pretty;}
.news__t a{color:inherit;text-decoration:none;border-bottom:1px solid var(--yf-blue-200);}
.news__t a:hover{color:var(--yf-blue-700);border-color:var(--yf-blue-500);}
.news__s{font-size:14.5px;line-height:1.85;color:var(--yf-sumi-600);margin-top:var(--space-2);text-wrap:pretty;}
.news__h1{margin-top:var(--space-4);}
/* トップページ用の抜粋。要約なし・余白を詰める */
.latest{padding-block:var(--space-12);}
.latest__hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
.latest__hd .eyebrow{flex:1;margin:0;}
.latest__more{font-size:14px;font-weight:600;white-space:nowrap;}
.news--compact{margin-top:var(--space-4);}
.news--compact .news__i{padding:var(--space-4) 0;grid-template-columns:130px minmax(0,1fr);gap:var(--space-4);}
.news--compact .news__t{font-size:15.5px;margin-top:6px;}
.news--compact .news__i>div{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-3);}
.news--compact .news__t{margin-top:0;flex:1 1 320px;}
.hero .news__m{margin-top:var(--space-2);}
.hero .news__d{padding-top:0;font-size:14px;}
@media (max-width:640px){
  .news__i{grid-template-columns:1fr;gap:var(--space-2);}
  .news__d{padding-top:0;}
  .news--compact .news__i{grid-template-columns:1fr;gap:6px;}
  .news--compact .news__t{flex-basis:100%;margin-top:4px;}
}

/* 記事本文。Markdown から生成した HTML を整える */
.article{max-width:840px;}
.article p{font-size:16px;line-height:2;color:var(--yf-sumi-700);margin-top:var(--space-5);text-wrap:pretty;}
.article p:first-child{margin-top:0;}
.article h2{font-size:21px;line-height:1.5;color:var(--yf-sumi-900);margin-top:var(--space-12);
  padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);text-wrap:balance;}
.article h3{font-size:17px;line-height:1.6;color:var(--yf-sumi-900);margin-top:var(--space-8);text-wrap:balance;}
.article ul,.article ol{margin-top:var(--space-4);padding-left:1.4em;}
.article li{font-size:15.5px;line-height:1.95;color:var(--yf-sumi-700);margin-top:6px;text-wrap:pretty;}
.article strong{font-weight:700;color:var(--yf-sumi-900);}
.article a{color:var(--yf-blue-700);text-decoration:none;border-bottom:1px solid var(--yf-blue-200);}
.article a:hover{color:var(--yf-blue-500);border-color:var(--yf-blue-500);}
.article table{width:100%;border-collapse:collapse;margin-top:var(--space-6);font-size:14.5px;}
.article th{background:var(--yf-blue-50);text-align:left;padding:10px 14px;font-weight:700;
  color:var(--yf-sumi-700);border-bottom:1px solid var(--yf-blue-100);}
.article td{padding:10px 14px;border-bottom:1px solid var(--color-border);color:var(--yf-sumi-700);line-height:1.8;}
.article blockquote{margin:var(--space-6) 0 0;padding:var(--space-4) var(--space-6);
  border-left:3px solid var(--yf-blue-300);background:var(--yf-blue-50);}
.article blockquote p{margin-top:0;font-size:15px;}
.article__back{margin-top:var(--space-12)!important;padding-top:var(--space-6);
  border-top:1px solid var(--color-border);font-size:14px!important;}
.article__back a{border-bottom:none;font-weight:600;}

/* ---------- 表の横スクロール ----------
   カードごとスクロールさせない。見出しとフッターは固定し、表だけを動かす。
   カードに overflow-x をかけると、見出しの背景が可視幅で途切れる。 */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.scroller table{margin:0;}
/* ---------- 比較表：1列目を固定 ----------
   横スクロール時に行の見出しが消えると、どの行を見ているか分からなくなる。 */
.scroller{position:relative;}
.pm th:first-child,.pm td:first-child,
.t th:first-child,.t td:first-child,
.dtbl th:first-child,.dtbl td:first-child,
.gtbl th:first-child,.gtbl td:first-child,
.rank th:first-child,.rank td:first-child{
  position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--color-border);}
.pm th:first-child,.t th:first-child,.dtbl th:first-child,.gtbl th:first-child,.rank th:first-child{
  background:var(--yf-blue-50);}
.pm td:first-child{background:var(--yf-sumi-50);}
.t td:first-child,.dtbl td:first-child,.gtbl td:first-child,.rank td:first-child{
  background:var(--color-surface);}
.t tr.is-alert td:first-child,.dtbl tr.is-alert td:first-child,
.gtbl tr.is-alert td:first-child{background:var(--yf-warning-bg);}
.rank tr.is-self td:first-child{background:var(--yf-blue-50);}
.t td.rest{position:static;box-shadow:none;}
/* 横スクロールできることを示す（狭い画面のみ） */
/* 横スクロールできることを示す。実際に溢れている要素だけに出す（JSが付与） */
.scroller.is-scrollable::after{content:"← 横にスクロールできます →";display:block;
  position:sticky;left:0;padding:9px 20px;font-size:11.5px;letter-spacing:.02em;
  color:var(--yf-sumi-500);background:var(--yf-sumi-50);
  border-top:1px solid var(--color-border);text-align:center;}
/* スクロールバーを見えるようにする（触れる端末では常に表示） */
.scroller{scrollbar-width:thin;scrollbar-color:var(--yf-sumi-300) transparent;}
.scroller::-webkit-scrollbar{height:8px;}
.scroller::-webkit-scrollbar-track{background:var(--yf-sumi-50);border-radius:4px;}
.scroller::-webkit-scrollbar-thumb{background:var(--yf-sumi-300);border-radius:4px;}
.scroller::-webkit-scrollbar-thumb:hover{background:var(--yf-sumi-400);}
/* ============================================================
   YadoForce Core — Design.md v0.1 準拠
   共通トークンはトップページと同一。差し替えるときは両方直す
   ============================================================ */
:root{
  --yf-blue-50:#F1F6FC; --yf-blue-100:#DEE9F7; --yf-blue-200:#B9D0EA;
  --yf-blue-300:#6CA0D4; --yf-blue-400:#4A83C3; --yf-blue-500:#2864B0;
  --yf-blue-600:#1852A6; --yf-blue-700:#084098; --yf-blue-800:#093874;
  --yf-blue-900:#0C3058; --yf-blue-950:#071E38;
  --yf-sumi-900:#0E141C; --yf-sumi-800:#1B2530; --yf-sumi-700:#33404E;
  --yf-sumi-600:#4C5A69; --yf-sumi-500:#6B7887; --yf-sumi-400:#8D99A6;
  --yf-sumi-300:#B0BAC5; --yf-sumi-200:#CFD6DE; --yf-sumi-100:#E5EAEF;
  --yf-sumi-50:#F2F5F8;
  --yf-paper:#FCFCFB; --yf-panel:#F5F8FB; --yf-white:#FFFFFF;
  --yf-positive:#1A7F4B; --yf-positive-bg:#E8F5EE;
  --yf-negative:#C0392B; --yf-negative-bg:#FBEAE8;
  --yf-warning:#A96A00;  --yf-warning-bg:#FDF3E2;
  --yf-accent:#DB6D1F;   --yf-accent-bg:#FDF0E5;
  --color-text:var(--yf-sumi-700); --color-text-heading:var(--yf-sumi-900);
  --color-text-muted:var(--yf-sumi-500);
  --color-bg:var(--yf-paper); --color-bg-panel:var(--yf-panel);
  --color-surface:var(--yf-white);
  --color-border:var(--yf-sumi-100); --color-border-strong:var(--yf-sumi-200);
  --color-action:var(--yf-blue-500); --color-action-hover:var(--yf-blue-700);
  --color-focus:var(--yf-blue-400);
  --font-sans:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --space-24:96px; --space-32:128px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --shadow-card:0 1px 3px rgba(12,48,88,.06),0 1px 2px rgba(12,48,88,.04);
  --shadow-float:0 20px 48px rgba(12,48,88,.16),0 3px 10px rgba(12,48,88,.10);
  --container:1200px;
}
body{margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;}
table td,table th,.yf-figure{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.sec{padding-block:var(--space-24);}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--yf-blue-600);
  text-transform:uppercase;display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);}
/* カードの直下に置く注記。カードと同じ幅の親の中に入れること。
   section 直下に置くと、画面幅いっぱいの右端に飛ぶ。 */
.cap{font-size:12.5px;color:var(--color-text-muted);margin-top:var(--space-3);text-align:right;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);white-space:nowrap;
  padding:14px 24px;border-radius:var(--radius-md);font-size:15px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.btn--ghost:hover{border-color:var(--yf-blue-400);background:var(--yf-blue-50);}
/* ---------- ヘッダー ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(238,243,250,.82);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s;}
/* ---------- 01 ヒーロー ---------- */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#E4EDF8 0%,#EDF3FA 62%,#F4F8FC 100%);
  padding-block:var(--space-16) var(--space-16);
  border-bottom:1px solid var(--yf-blue-200);}
.crumb{position:relative;font-size:12.5px;color:var(--yf-sumi-500);margin-bottom:var(--space-6);}
.crumb a{color:var(--yf-sumi-600);}
.hero__in{position:relative;}
.hero__cat{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;color:var(--yf-blue-700);background:rgba(255,255,255,.92);
  border:1px solid var(--yf-blue-200);border-radius:999px;padding:5px 13px;margin-bottom:var(--space-5);}
.hero__cat i{width:7px;height:7px;border-radius:2px;background:var(--yf-blue-500);display:block;}
.hero h1{font-size:50px;line-height:1.26;letter-spacing:-.025em;color:var(--yf-blue-950);}
.hero__lead{font-size:18px;line-height:1.9;color:var(--yf-sumi-600);margin-top:var(--space-5);text-wrap:pretty;}
/* ---------- プロダクト画面の再現（3ペイン） ---------- */
.frame{background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-float);overflow:hidden;margin-top:var(--space-12);}
.frame__chrome{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);
  background:#EDF1F5;border-bottom:1px solid #DCE3EA;}
.frame__url{flex:1;background:#fff;border:1px solid #DCE3EA;border-radius:6px;padding:4px 10px;
  font-size:11.5px;color:var(--yf-sumi-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app{display:grid;grid-template-columns:212px minmax(0,1.25fr) minmax(0,1fr);min-height:430px;}
.app__col{border-right:1px solid var(--color-border);}
.app__col:last-child{border-right:none;}
.app__h{padding:11px var(--space-4);background:var(--yf-sumi-50);border-bottom:1px solid var(--color-border);
  font-size:12px;font-weight:600;color:var(--yf-sumi-600);letter-spacing:.04em;}
.tree li{padding:9px var(--space-4);font-size:13px;color:var(--yf-sumi-600);
  display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--yf-sumi-50);}
.tree li b{font-weight:500;}
.tree li span{color:var(--yf-sumi-400);font-size:12px;font-variant-numeric:tabular-nums;}
.tree li.is-cur{background:var(--yf-blue-50);box-shadow:inset 3px 0 0 var(--yf-blue-500);}
.tree li.is-cur b{color:var(--yf-blue-800);font-weight:700;}
.plancard{padding:11px var(--space-4);border-bottom:1px solid var(--yf-sumi-50);}
.plancard.is-cur{background:var(--yf-blue-50);box-shadow:inset 3px 0 0 var(--yf-blue-500);}
.plancard__t{font-size:13.5px;font-weight:600;color:var(--yf-sumi-800);}
.plancard__m{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap;}
.tag{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:3px;}
.tag--sell{background:var(--yf-positive-bg);color:var(--yf-positive);}
.tag--stop{background:var(--yf-negative-bg);color:var(--yf-negative);}
.tag--ch{background:var(--yf-sumi-50);color:var(--yf-sumi-500);border:1px solid var(--yf-sumi-100);}
.plancard__d{font-size:11px;color:var(--yf-sumi-400);margin-top:5px;font-variant-numeric:tabular-nums;}
.stat{width:100%;border-collapse:collapse;table-layout:fixed;}
.stat th{font-size:11px;font-weight:600;color:var(--color-text-muted);text-align:left;
  padding:8px var(--space-4);background:var(--yf-blue-50);border-bottom:1px solid var(--yf-blue-100);}
.stat td{font-size:12.5px;padding:10px var(--space-4);border-bottom:1px solid var(--yf-sumi-50);color:var(--yf-sumi-700);}
.stat tr:last-child td{border-bottom:none;}
.stat td:last-child{font-variant-numeric:tabular-nums;color:var(--yf-sumi-400);text-align:right;}
.pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:var(--radius-sm);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:80px;}
/* ---------- 汎用：見出し＋図の2カラム ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-16);
  align-items:start;margin-top:var(--space-12);}
.duo--rev .duo__fig{order:-1;}
.card{background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.card__h{padding:var(--space-4) var(--space-5);background:var(--yf-sumi-50);
  border-bottom:1px solid var(--color-border);font-size:13px;font-weight:600;color:var(--yf-sumi-700);}
.card__h--ink{background:var(--yf-blue-900);color:#DCE6F2;}
.card__h--ink b{color:#fff;}
.card__f{text-wrap:pretty;padding:var(--space-4) var(--space-5);background:var(--yf-blue-50);
  border-top:1px solid var(--yf-blue-100);font-size:13px;color:var(--yf-blue-800);}
.card__f b{font-weight:700;font-variant-numeric:tabular-nums;}
.t{width:100%;border-collapse:collapse;table-layout:fixed;}
.t th{font-size:12px;font-weight:600;color:var(--color-text-muted);text-align:left;
  padding:10px var(--space-5);background:var(--yf-blue-50);border-bottom:1px solid var(--yf-blue-100);}
.t td{font-size:13.5px;padding:11px var(--space-5);border-bottom:1px solid var(--yf-sumi-50);color:var(--yf-sumi-700);}
.t tr:last-child td{border-bottom:none;}
.t .n{text-align:right;font-variant-numeric:tabular-nums;}
.t tr.is-alert td{background:var(--yf-warning-bg);}
.t tr.is-alert td.n{color:var(--yf-warning);font-weight:700;}
.t td.rest{color:var(--yf-sumi-400);font-size:12.5px;}
/* ---------- テキストエディタの年間バー ---------- */
.year{padding:var(--space-6) var(--space-5);}
.year__row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
.year__m{border-radius:var(--radius-sm);padding:12px 6px;text-align:center;font-size:12px;font-weight:600;}
.year__m small{display:block;font-size:10.5px;font-weight:500;opacity:.8;margin-top:3px;}
.year__m--base{background:var(--yf-sumi-50);color:var(--yf-sumi-500);border:1px solid var(--yf-sumi-100);}
.year__m--on{background:var(--yf-blue-500);color:#fff;}
.year__m--on2{background:var(--yf-blue-300);color:var(--yf-blue-950);}
.year__lg{display:flex;gap:var(--space-5);margin-top:var(--space-5);flex-wrap:wrap;font-size:12.5px;color:var(--color-text-muted);}
.year__lg i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px;}
/* ---------- マスタのグリッド ---------- */
.mst{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-12);}
.mst__i{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-5);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);}
.mst__t{font-size:14.5px;font-weight:600;color:var(--yf-sumi-800);}
.mst__n{font-size:19px;font-weight:700;color:var(--yf-blue-700);font-variant-numeric:tabular-nums;}
.mst__n small{font-size:12px;color:var(--yf-sumi-400);margin-left:3px;font-weight:500;}
/* ---------- 対応OTA ---------- */
.ota{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-top:var(--space-4);}
.ota__i{height:84px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
  background:var(--color-surface);display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:600;color:var(--yf-sumi-600);text-align:center;padding:var(--space-3);}
.ota__note{text-wrap:pretty;font-size:13px;color:var(--color-text-muted);margin-top:var(--space-6);line-height:1.9;}
.ota__lbl{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--yf-sumi-500);
  margin-top:var(--space-8);}
.ota__i--soon{border-style:dashed;color:var(--yf-sumi-400);background:transparent;font-weight:500;}
.ota--big{grid-template-columns:repeat(2,1fr);}
.ota--big .ota__i{height:104px;font-size:17px;color:var(--yf-blue-800);border-color:var(--yf-blue-300);}
/* ロゴ画像。枠の高さに対して余白を残し、横長ロゴは幅で止める */
.ota__i img{display:block;max-height:40px;max-width:72%;width:auto;height:auto;object-fit:contain;}
.ota--big .ota__i img{max-height:52px;max-width:64%;}
/* ---------- テキストマスタ ---------- */
.h3{text-wrap:balance;font-size:19px;line-height:1.55;color:var(--yf-sumi-900);font-weight:700;}
.t--ref{table-layout:auto;}
.t--ref td:first-child{width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.t--ref td.n{width:96px;}
.mref{padding:var(--space-5) var(--space-5) var(--space-6);}
.mref__b{font-size:13.5px;line-height:1.9;color:var(--yf-sumi-600);
  background:var(--yf-sumi-50);border-left:3px solid var(--yf-blue-300);
  padding:var(--space-4) var(--space-5);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
/* ---------- 手順の3ステップ ---------- */
.howsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-8);}
.howstep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-5);}
.howstep__n{width:26px;height:26px;border-radius:50%;background:var(--yf-blue-500);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.howstep__t{font-size:15px;font-weight:700;color:var(--yf-sumi-900);}
.howstep__d{text-wrap:pretty;font-size:13.5px;line-height:1.8;color:var(--color-text-muted);margin-top:4px;}
/* ---------- 3点 ---------- */
.fixes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-8);}
/* ---------- 節の締め ---------- */
.closing{margin-top:var(--space-12);background:var(--yf-blue-50);
  border-left:4px solid var(--yf-blue-500);border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-8) var(--space-8) var(--space-8) var(--space-8);}
.closing__t{text-wrap:balance;font-size:20px;line-height:1.6;font-weight:700;color:var(--yf-blue-950);letter-spacing:-.01em;}
.closing__s{text-wrap:pretty;font-size:15px;line-height:1.85;color:var(--yf-blue-800);margin-top:var(--space-3);}
/* ---------- MCP ---------- */
.mcp{margin-top:var(--space-12);background:var(--yf-blue-950);border-radius:var(--radius-lg);
  padding:var(--space-12);position:relative;overflow:hidden;}
.mcp::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 84% 8%, rgba(40,100,176,.40) 0%, rgba(7,30,56,0) 60%);}
.mcp__s{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--yf-blue-300);
  margin-bottom:var(--space-3);}
.mcp .h3{position:relative;}
.mcp__l{text-wrap:pretty;position:relative;font-size:15.5px;line-height:1.95;color:#B9C7D8;margin-top:var(--space-4);}
.mcp__l b{color:#fff;}
/* ---------- CTA ---------- */
.cta{text-align:center;}
.cta h2{font-size:30px;line-height:1.45;}
/* ---------- フッター ---------- */
.ftr{background:var(--yf-blue-950);color:#9FB0C4;padding-block:var(--space-16) var(--space-8);}
/* ---------- レスポンシブ ---------- */
@media (max-width:1000px){
.nav{display:none;}
.burger{display:flex;}

  .duo{grid-template-columns:1fr;gap:var(--space-8);}
  .duo--rev .duo__fig{order:0;}
  .fixes,.mst,.howsteps{grid-template-columns:1fr;}
  .ota{grid-template-columns:repeat(2,1fr);}
  .ftr__grid{grid-template-columns:1fr 1fr;}
  .app{grid-template-columns:1fr;min-height:0;}
  .app__col{border-right:none;border-bottom:1px solid var(--color-border);}
}
.pill--less{background:var(--yf-sumi-50);color:var(--yf-sumi-600);border:1px solid var(--yf-sumi-200);}
.pill--new{background:var(--yf-blue-500);color:#fff;}
/* ---------- Enterprise 内訳 ---------- */
.ent__ul{position:relative;margin-top:var(--space-8);display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--space-8);}
.ent__ul li{font-size:14px;line-height:1.9;color:#9DB2CC;
  padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.18);}
.ent__ul li b{display:block;font-size:15px;color:#fff;font-weight:700;margin-bottom:6px;line-height:1.5;}
.ent__f{position:relative;margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;
  align-items:center;gap:var(--space-6);flex-wrap:wrap;}
.ent__p{font-size:17px;font-weight:700;color:#fff;}
/* ---------- Database：指標カード ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.kpi{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-5);}
.kpi--lead{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;
  border-color:var(--yf-blue-200);background:var(--yf-blue-50);}
.kpi__l{font-size:12px;color:var(--color-text-muted);}
.kpi__v{font-size:23px;font-weight:700;color:var(--yf-sumi-900);margin-top:6px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:flex;align-items:baseline;gap:7px;}
.kpi--lead .kpi__v{font-size:31px;}
.kpi__d{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.kpi__d--up{color:var(--yf-positive);}
.kpi__d--dn{color:var(--yf-negative);}
.kpi__c{font-size:11.5px;color:var(--yf-sumi-400);margin-top:6px;font-variant-numeric:tabular-nums;}
.kpi__n{font-size:11.5px;color:var(--yf-sumi-400);margin-top:6px;}
/* ---------- Database：対比 ---------- */
.vs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-12);}
.vs__c{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-8);}
.vs__c--self{background:var(--yf-blue-50);border-color:var(--yf-blue-200);}
.vs__h{font-size:16px;font-weight:700;color:var(--yf-sumi-600);
  padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border);}
.vs__c--self .vs__h{color:var(--yf-blue-800);border-color:var(--yf-blue-200);}
.vs__l li{font-size:14.5px;line-height:1.85;color:var(--color-text-muted);
  padding:var(--space-4) 0;border-bottom:1px solid var(--yf-sumi-50);}
.vs__l li:last-child{border-bottom:none;}
.vs__l li b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  color:var(--yf-sumi-400);margin-bottom:4px;}
.vs__c--self .vs__l li{color:var(--yf-sumi-700);}
.vs__c--self .vs__l li b{color:var(--yf-blue-600);}
/* ---------- Database：セグメント ---------- */
.segs{padding:var(--space-5);display:flex;flex-wrap:wrap;gap:7px;}
.seg{font-size:12.5px;font-weight:600;color:var(--yf-blue-800);background:var(--yf-blue-50);
  border:1px solid var(--yf-blue-200);border-radius:999px;padding:4px 12px;}
/* ---------- Database：ベンチマーク ---------- */
.bm{background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);margin-top:var(--space-8);}
.bm__r{display:grid;grid-template-columns:190px minmax(0,1fr) 90px;gap:var(--space-5);
  align-items:center;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--yf-sumi-50);}
.bm__r:last-child{border-bottom:none;}
.bm__k{font-size:14px;color:var(--yf-sumi-700);font-weight:500;}
.bm__k small{display:block;font-size:11.5px;color:var(--yf-sumi-400);font-weight:400;margin-top:2px;}
.bm__bar{height:12px;border-radius:2px;background:var(--yf-sumi-100);position:relative;overflow:hidden;}
.bm__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;display:block;}
.bm__v{font-size:15px;font-weight:700;color:var(--yf-sumi-900);text-align:right;
  font-variant-numeric:tabular-nums;}
.bm__r--self{background:var(--yf-blue-50);box-shadow:inset 4px 0 0 var(--yf-blue-500);}
.bm__r--self .bm__k{font-weight:700;color:var(--yf-blue-900);}
.bm__r--self .bm__v{color:var(--yf-blue-800);}
/* ---------- Database：分析の切り口 ---------- */
.cuts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-12);}
.cut{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-6);}
.cut__t{font-size:15.5px;font-weight:700;color:var(--yf-sumi-900);}
.cut__d{text-wrap:pretty;font-size:13.5px;line-height:1.85;color:var(--color-text-muted);margin-top:6px;}
/* ---------- Marketing：順位トラッカー ---------- */
.rank{width:100%;border-collapse:collapse;table-layout:fixed;}
.rank th{font-size:12px;font-weight:600;color:var(--color-text-muted);text-align:left;
  padding:10px var(--space-5);background:var(--yf-blue-50);border-bottom:1px solid var(--yf-blue-100);}
.rank td{font-size:14px;padding:12px var(--space-5);border-bottom:1px solid var(--yf-sumi-50);
  color:var(--yf-sumi-700);}
.rank tr:last-child td{border-bottom:none;}
.rank .n{text-align:right;font-variant-numeric:tabular-nums;}
.rank tr.is-self{background:var(--yf-blue-50);box-shadow:inset 4px 0 0 var(--yf-blue-500);}
.rank tr.is-self td{font-weight:700;color:var(--yf-blue-900);}
.rk{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--yf-sumi-900);}
.dl{font-size:12px;font-weight:700;margin-left:6px;font-variant-numeric:tabular-nums;}
.dl--up{color:var(--yf-positive);}
.dl--dn{color:var(--yf-negative);}
.wip{background:var(--yf-warning-bg);border:1px solid rgba(169,106,0,.28);
  border-radius:var(--radius-md);padding:var(--space-6);margin-top:var(--space-8);
  display:flex;gap:var(--space-4);align-items:flex-start;}
.wip__t{font-size:15px;font-weight:700;color:var(--yf-warning);}
.wip__d{font-size:14px;line-height:1.85;color:var(--yf-sumi-700);margin-top:5px;}
/* 表の最小幅（これ未満は横スクロール） */
.todo{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm);
  background:var(--yf-accent-bg);color:var(--yf-accent);margin-left:var(--space-2);vertical-align:middle;}
.tier{background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);}
.tier--wide{grid-column:1/-1;background:var(--yf-blue-50);border-color:var(--yf-blue-200);}
.tier__s{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--yf-blue-600);}
.tier__n{font-size:19px;font-weight:700;color:var(--yf-sumi-900);margin-top:var(--space-2);}
.tier__p{font-size:34px;font-weight:700;color:var(--yf-blue-900);margin-top:var(--space-4);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.tier__p small{font-size:14px;font-weight:600;color:var(--yf-sumi-500);margin-left:4px;letter-spacing:0;}
.tier__d{font-size:13.5px;line-height:1.85;color:var(--color-text-muted);margin-top:var(--space-3);}
.once{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-4);}
.once__i{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-6);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);}
.once__t{font-size:15px;font-weight:600;color:var(--yf-sumi-800);}
.once__t span{display:block;font-size:13px;font-weight:400;color:var(--color-text-muted);margin-top:4px;}
.once__p{font-size:24px;font-weight:700;color:var(--yf-blue-900);font-variant-numeric:tabular-nums;white-space:nowrap;}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-12);}
.incl__c{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-8);}
.incl__h{font-size:16px;font-weight:700;color:var(--yf-sumi-900);padding-bottom:var(--space-4);
  border-bottom:1px solid var(--color-border);}
.incl li{font-size:14.5px;line-height:1.8;color:var(--yf-sumi-700);padding:11px 0 11px 26px;
  position:relative;border-bottom:1px solid var(--yf-sumi-50);}
.incl li:last-child{border-bottom:none;}
.incl li::before{position:absolute;left:0;top:11px;font-size:13px;font-weight:700;}
.incl--in li::before{content:"✓";color:var(--yf-positive);}
.incl--out li::before{content:"—";color:var(--yf-sumi-300);}
.incl--out li{color:var(--color-text-muted);}
.qa{margin-top:var(--space-12);border-top:1px solid var(--color-border-strong);}
.qa__i{border-bottom:1px solid var(--color-border);}
.qa__q{font-size:16px;font-weight:700;color:var(--yf-sumi-900);line-height:1.6;
  padding:var(--space-5) 44px var(--space-5) 0;cursor:pointer;position:relative;
  list-style:none;display:block;transition:color .15s;}
.qa__q::-webkit-details-marker{display:none;}
.qa__q:hover{color:var(--yf-blue-700);}
.qa__q::after,.qa__q::before{content:"";position:absolute;right:10px;top:50%;
  background:var(--yf-blue-500);border-radius:1px;transition:transform .22s,opacity .22s;}
.qa__q::after{width:15px;height:2px;transform:translateY(-50%);}
.qa__q::before{width:2px;height:15px;right:16px;transform:translateY(-50%);}
.qa__i[open] .qa__q::before{opacity:0;transform:translateY(-50%) rotate(90deg);}
.qa__i[open] .qa__q{color:var(--yf-blue-700);}
.qa__a{text-wrap:pretty;font-size:14.5px;line-height:1.9;color:var(--color-text-muted);
  padding:0 var(--space-12) var(--space-6) 0;max-width:none;margin:0;}
.qa__a b{color:var(--yf-sumi-700);}
.tl__i:first-child{border-top:1px solid var(--color-border-strong);}
.tl__n{width:30px;height:30px;border-radius:50%;background:var(--yf-blue-500);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tl__d{font-size:13px;color:var(--yf-blue-700);font-weight:600;margin-top:4px;}
.tl__w{text-wrap:pretty;font-size:14px;line-height:1.85;color:var(--yf-sumi-700);}
.tl__w b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  color:var(--yf-sumi-400);margin-bottom:5px;}
.tl__w--you{color:var(--color-text-muted);}
/* 表の最小幅（これ未満は横スクロール） */
.stat{min-width:300px;}
/* ---------- セキュリティ：仕様一覧 ---------- */
.spec{margin-top:var(--space-8);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);}
.spec__g{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--yf-blue-700);
  background:var(--yf-blue-50);padding:11px var(--space-6);border-bottom:1px solid var(--yf-blue-100);}
.spec__r{display:grid;grid-template-columns:230px minmax(0,1fr);border-bottom:1px solid var(--color-border);}
.spec__r:last-child{border-bottom:none;}
.spec__k{padding:var(--space-5) var(--space-6);font-size:14px;font-weight:600;color:var(--yf-sumi-700);
  background:var(--yf-sumi-50);border-right:1px solid var(--color-border);}
.spec__v{padding:var(--space-5) var(--space-6);font-size:14.5px;line-height:1.85;color:var(--yf-sumi-700);}
.spec__v small{display:block;font-size:12.5px;color:var(--color-text-muted);margin-top:5px;}
/* ---------- セキュリティ：データの流れ ---------- */
.flowmap{margin-top:var(--space-12);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-card);}
.flowmap__r{display:grid;grid-template-columns:minmax(0,1fr) 250px;
  border-bottom:1px solid var(--color-border);align-items:center;}
.flowmap__r:last-child{border-bottom:none;}
.flowmap__r--self{background:var(--yf-blue-50);box-shadow:inset 4px 0 0 var(--yf-blue-500);}
.flowmap__l{padding:var(--space-6);}
.flowmap__l b{display:block;font-size:16.5px;font-weight:700;color:var(--yf-sumi-900);}
.flowmap__l span{display:block;font-size:13.5px;line-height:1.75;color:var(--color-text-muted);margin-top:5px;}
.flowmap__v{padding:var(--space-6);border-left:1px solid var(--color-border);}
/* ---------- セキュリティ：返却の区分 ---------- */
.ret{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-12);}
.ret__c{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-8);}
.ret__c--yes{border-color:var(--yf-blue-200);background:var(--yf-blue-50);}
.ret__h{font-size:16px;font-weight:700;color:var(--yf-sumi-900);padding-bottom:var(--space-4);
  border-bottom:1px solid var(--color-border);}
.ret__c--yes .ret__h{color:var(--yf-blue-800);border-color:var(--yf-blue-200);}
.ret__l li{font-size:14.5px;line-height:1.8;color:var(--yf-sumi-700);padding:10px 0 10px 24px;
  position:relative;border-bottom:1px solid var(--yf-sumi-50);}
.ret__l li:last-child{border-bottom:none;}
.ret__l li::before{position:absolute;left:0;top:10px;font-size:13px;font-weight:700;}
.ret__c--yes .ret__l li::before{content:"↓";color:var(--yf-blue-600);}
.ret__c--no .ret__l li::before{content:"—";color:var(--yf-sumi-300);}
.ret__c--no .ret__l li{color:var(--color-text-muted);}
.ret__n{font-size:13px;line-height:1.85;color:var(--color-text-muted);margin-top:var(--space-5);
  padding-top:var(--space-4);border-top:1px solid var(--color-border);}
/* ---------- 非公開資料への案内 ---------- */
.gate{margin-top:var(--space-12);background:var(--yf-blue-950);border-radius:var(--radius-lg);
  padding:var(--space-12);position:relative;overflow:hidden;}
.gate::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 84% 8%, rgba(40,100,176,.40) 0%, rgba(7,30,56,0) 60%);}
.gate__s{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.22em;
  color:var(--yf-blue-300);margin-bottom:var(--space-3);}
.gate__t{text-wrap:balance;position:relative;font-size:26px;line-height:1.4;color:#fff;font-weight:700;letter-spacing:-.02em;}
.gate__l{position:relative;font-size:15.5px;line-height:1.95;color:#B9C7D8;margin-top:var(--space-5);}
.gate__ul{position:relative;margin-top:var(--space-8);display:grid;
  grid-template-columns:repeat(2,1fr);gap:var(--space-4) var(--space-8);}
.gate__ul li{font-size:14px;line-height:1.8;color:#9DB2CC;padding:11px 0 11px 22px;position:relative;
  border-bottom:1px solid rgba(255,255,255,.12);}
.gate__ul li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;
  border-radius:2px;background:var(--yf-blue-400);}
.gate__f{position:relative;margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;
  align-items:center;gap:var(--space-6);flex-wrap:wrap;}
.gate__n{font-size:14px;color:#9DB2CC;}
/* ---------- FAQ：カテゴリナビ ---------- */
.faqnav{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8);}
.faqnav a{font-size:14px;font-weight:600;color:var(--yf-blue-800);
  background:rgba(255,255,255,.9);border:1px solid var(--yf-blue-200);
  border-radius:999px;padding:9px 18px;transition:background .15s,border-color .15s;}
.faqnav a:hover{background:var(--yf-blue-500);border-color:var(--yf-blue-500);color:#fff;}
.faqg{margin-top:var(--space-16);}
.faqg:first-of-type{margin-top:var(--space-12);}
.faqg__h{font-size:22px;font-weight:700;color:var(--yf-sumi-900);
  padding-bottom:var(--space-4);border-bottom:2px solid var(--yf-blue-500);
  display:flex;align-items:baseline;gap:var(--space-3);}
.faqg__h span{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--yf-sumi-400);}
.faqg .qa{margin-top:0;border-top:none;}
.qa__a a{font-weight:600;}
.qa__a ul{margin-top:var(--space-3);}
.qa__a li{padding:4px 0 4px 18px;position:relative;}
.qa__a li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;
  border-radius:2px;background:var(--yf-blue-300);}
/* ---------- フォーム ---------- */
.form{background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);padding:var(--space-12);box-shadow:var(--shadow-card);}
.fld{margin-bottom:var(--space-6);}
.fld:last-of-type{margin-bottom:0;}
.fld__l{display:flex;align-items:center;gap:var(--space-3);font-size:14px;font-weight:600;
  color:var(--yf-sumi-800);margin-bottom:var(--space-2);}
.req{font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:3px;
  background:var(--yf-negative-bg);color:var(--yf-negative);}
.opt{font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:3px;
  background:var(--yf-sumi-50);color:var(--yf-sumi-500);border:1px solid var(--yf-sumi-100);}
.fld__h{font-size:12.5px;line-height:1.7;color:var(--color-text-muted);margin-top:6px;}
.inp,.sel,.txa{width:100%;font-family:inherit;font-size:15px;line-height:1.6;color:var(--yf-sumi-800);
  background:var(--yf-paper);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
  padding:12px 14px;transition:border-color .15s,background .15s;}
.inp:focus,.sel:focus,.txa:focus{background:#fff;border-color:var(--yf-blue-400);outline:none;
  box-shadow:0 0 0 3px rgba(74,131,195,.15);}
.inp::placeholder,.txa::placeholder{color:var(--yf-sumi-300);}
.txa{min-height:150px;resize:vertical;}
.sel{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236B7887' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px;}
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7;color:var(--yf-sumi-700);}
.chk input{margin-top:4px;width:17px;height:17px;accent-color:var(--yf-blue-500);flex-shrink:0;}
.radios{display:grid;gap:var(--space-2);}
.radio{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;}
.radio:hover{border-color:var(--yf-blue-300);background:var(--yf-blue-50);}
.radio input{margin-top:3px;width:17px;height:17px;accent-color:var(--yf-blue-500);flex-shrink:0;}
.radio b{display:block;font-size:14.5px;font-weight:600;color:var(--yf-sumi-800);}
.radio span{display:block;font-size:12.5px;line-height:1.7;color:var(--color-text-muted);margin-top:3px;}
.form__f{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-border);}
.form__sub{margin-top:var(--space-6);text-align:center;}
.form__sub .btn{min-width:280px;}
.form__note{font-size:12.5px;color:var(--color-text-muted);margin-top:var(--space-4);text-align:center;}
/* ---------- 資料の中身 ---------- */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-8);}
.doc{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-6);}
.doc__n{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--yf-blue-500);}
.doc__t{font-size:15.5px;font-weight:700;color:var(--yf-sumi-900);margin-top:6px;}
.doc__d{font-size:13.5px;line-height:1.8;color:var(--color-text-muted);margin-top:7px;}
.doc__p{font-size:12px;color:var(--yf-sumi-400);margin-top:var(--space-4);
  padding-top:var(--space-3);border-top:1px solid var(--yf-sumi-50);}
/* ---------- 連絡先 ---------- */
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-12);}
.ct{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-8);}
.ct__t{font-size:16px;font-weight:700;color:var(--yf-sumi-900);}
.ct__d{font-size:14px;line-height:1.85;color:var(--color-text-muted);margin-top:var(--space-2);}
.ct__v{font-size:22px;font-weight:700;color:var(--yf-blue-800);margin-top:var(--space-4);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.ct__n{font-size:12.5px;color:var(--yf-sumi-400);margin-top:5px;}
/* ---------- 規約・ポリシー ---------- */
.legal{max-width:840px;}
.legal h2{font-size:20px;line-height:1.5;color:var(--yf-sumi-900);
  margin-top:var(--space-16);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border-strong);}
.legal h2:first-of-type{margin-top:var(--space-12);}
.legal p{text-wrap:pretty;font-size:15px;line-height:2;color:var(--yf-sumi-700);margin-top:var(--space-5);}
.legal ul{margin-top:var(--space-4);}
.legal li{font-size:15px;line-height:1.95;color:var(--yf-sumi-700);
  padding:7px 0 7px 22px;position:relative;}
.legal li::before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;
  border-radius:2px;background:var(--yf-blue-300);}
.legal li ul{margin-top:var(--space-2);margin-left:var(--space-2);}
.legal li li::before{background:var(--yf-sumi-200);width:5px;height:5px;top:19px;}
.window{margin-top:var(--space-6);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);}
.window__r{display:grid;grid-template-columns:150px minmax(0,1fr);border-bottom:1px solid var(--color-border);}
.window__r:last-child{border-bottom:none;}
.window__k{padding:var(--space-4) var(--space-5);font-size:13.5px;font-weight:600;
  color:var(--yf-sumi-700);background:var(--yf-sumi-50);border-right:1px solid var(--color-border);}
.window__v{padding:var(--space-4) var(--space-5);font-size:14.5px;line-height:1.8;color:var(--yf-sumi-700);}
.rev{margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid var(--color-border-strong);
  font-size:13.5px;color:var(--color-text-muted);line-height:1.9;}

@media (prefers-reduced-motion:reduce){
.notice__tag i{animation:none;}
html{scroll-behavior:auto;}
.qa__q::after,.qa__q::before{transition:none;}
}

@media (max-width:640px){
.notice__in{padding:9px var(--space-5);align-items:center;}
.wrap,.hdr__in{padding:0 var(--space-5);}
.sec{padding-block:var(--space-16);}
.h2,.cta h2{font-size:22px;}
.ftr__grid{grid-template-columns:1fr;}
.closing{padding:var(--space-6);}
.closing__t{font-size:17px;}
.mcp{padding:var(--space-8) var(--space-6);}
.hero{padding-block:var(--space-12) var(--space-12);}
.hero h1{font-size:32px;}
.hdr__cta .hdr__ghost{display:none;}
.kpis{grid-template-columns:1fr;}
.bm__r{grid-template-columns:1fr auto;}
.bm__bar{display:none;}
.form{padding:var(--space-6);}
.two{grid-template-columns:1fr;}
.window__r{grid-template-columns:1fr;}
.window__k{border-right:none;border-bottom:1px solid var(--color-border);}
}

@media (max-width:900px){
.year__row{grid-template-columns:repeat(6,1fr);min-width:560px;}
.card{overflow-x:auto;}
}

@media (max-width:1000px){
.ent__ul{grid-template-columns:1fr;gap:var(--space-5);}
.kpis{grid-template-columns:repeat(2,1fr);}
.kpi--lead{grid-row:auto;}
.cuts,.vs{grid-template-columns:1fr;}
.bm__r{grid-template-columns:150px minmax(0,1fr) 78px;gap:var(--space-4);}
.tiers,.once,.incl{grid-template-columns:1fr;}
.tl__i{grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);}
.tl__i > .tl__w{grid-column:2;}
.ret{grid-template-columns:1fr;}
.spec__r,.flowmap__r{grid-template-columns:1fr;}
.spec__k{border-right:none;border-bottom:1px solid var(--color-border);}
.flowmap__v{border-left:none;border-top:1px solid var(--color-border);}
.gate{padding:var(--space-8) var(--space-6);}
.gate__ul{grid-template-columns:1fr;}
.gate__t{font-size:21px;}
.docs{grid-template-columns:1fr;}
.contacts{grid-template-columns:1fr;}
}


/* ============================================================
   12. モーション（site.js 11. と対）
   html.js-motion は BaseLayout の先頭スクリプトが、動きを減らす設定でない
   ときだけ付ける。付かなければ以下は一切効かず、最初から全部表示される。
   data-reveal は site.js が付けるので、JS が止まっても何も隠れない。
   ============================================================ */
html.js-motion [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease-out,transform .7s cubic-bezier(.22,.8,.3,1);
  transition-delay:var(--rv-delay,0ms);}
html.js-motion [data-reveal].is-in{opacity:1;transform:none;}
html.js-motion [data-reveal].is-in.no-anim{transition:none;}

/* ヘッダー：下へ読み進めている間は隠れ、戻ると出る */
html.js-motion .hdr{transition:border-color .25s,transform .35s cubic-bezier(.22,.8,.3,1);}
html.js-motion .hdr.is-hidden{transform:translateY(-100%);}

/* 触れるものは触れると分かる（ホバーできる端末だけ） */
@media (hover:hover){
  html.js-motion .feat,html.js-motion .voice,html.js-motion .card,html.js-motion .pair__c{
    transition:transform .25s cubic-bezier(.22,.8,.3,1),box-shadow .25s,border-color .25s;}
  html.js-motion .feat:hover,html.js-motion .voice:hover,html.js-motion .card:hover,html.js-motion .pair__c:hover{
    transform:translateY(-3px);box-shadow:0 12px 28px -14px rgba(12,48,88,.28);border-color:var(--yf-blue-200);}
  html.js-motion .btn{transition:transform .18s cubic-bezier(.22,.8,.3,1),box-shadow .18s,background-color .18s,color .18s,border-color .18s;}
  html.js-motion .btn:hover{transform:translateY(-1px);}
  html.js-motion .btn--primary:hover{box-shadow:0 10px 22px -10px rgba(40,100,176,.7);}
  html.js-motion .btn:active{transform:translateY(0);}
}

/* ヒーローの盤面：未反映→反映済みに変わった行を一瞬だけ照らす */
html.js-motion .row{transition:background-color .9s ease-out;}
html.js-motion .row.is-hit{background:var(--yf-positive-bg);transition:background-color .15s ease-out;}
html.js-motion .pill{transition:background-color .35s,color .35s,border-color .35s;}

/* 数字のカウントアップ中に桁幅でガタつかせない */
.num__v{font-variant-numeric:tabular-nums;}