/* CAPXLE family.css v1（2026-10-03）
   全サイト共通の土台。https://site-corp.capsule.work/family.css から読み込み、各サイトの style.css の後に置く。
   - 色の芯（--f-primary）は各サイトの --accent（ai は --brand）をそのまま使う＝サービスの色は残し、1 ページの主ボタンは 1 色に揃える。
   - 文字の段・余白・押す所・札（状況）・ボタン・フッターは全サイト同じ値。
   - 元: dev_handoff/reviews/design_mockups/tokens.css（レビュー案）。 */
:root{
  --f-primary:var(--accent,var(--brand,#1E4E86));
  --f-primary-ink:var(--accent-ink,var(--brand-ink,#FFFFFF));
  --f-ink:var(--ink,#16181C);
  --f-ink-2:var(--ink-2,var(--ink-sub,#464B53));
  --f-line:var(--rule,var(--line,#D9D5CB));
  --f-card:var(--card,var(--surface,#FFFFFF));
  /* status badge（背景と文字を固定＝どのサイトでも 4.5:1 以上） */
  --f-ok-fg:#1F6B45;--f-ok-bg:#E6F2EB;
  --f-try-fg:#7A4F00;--f-try-bg:#FBF0D9;
  --f-plan-fg:#464B53;--f-plan-bg:#EEEDE8;
  /* type */
  --f-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --f-fs-xs:12px;--f-fs-sm:14px;--f-fs-md:16px;--f-fs-lg:18px;--f-fs-xl:22px;--f-fs-2xl:28px;
  /* space（4 の倍数） */
  --f-s1:4px;--f-s2:8px;--f-s3:12px;--f-s4:16px;--f-s5:24px;--f-s6:32px;--f-s7:48px;
  --f-r:10px;--f-r-pill:999px;
  --f-tap:48px;--f-tap-min:44px;
}
@media (prefers-color-scheme:dark){:root{
  --f-ok-fg:#8EE0B4;--f-ok-bg:#12291D;
  --f-try-fg:#F5CF7A;--f-try-bg:#2E2410;
  --f-plan-fg:#C9CDD3;--f-plan-bg:#24272C;
}}

/* ---------- 文字 ---------- */
body{-webkit-text-size-adjust:100%}
h1,h2,h3{text-wrap:balance;word-break:auto-phrase;line-break:strict}
p,li,dd{line-break:strict}
/* 日本語の札を等幅の欧文字体で書かない */
.eyebrow,.brand-sv,.tag,.ledger-h,.foot-small,.pcard-h,.kicker,.badge,.ex-tag,.sec-h .k,.card .k{font-family:var(--f-sans)!important}
.eyebrow{font-size:var(--f-fs-xs);letter-spacing:.06em;color:var(--f-ink-2)}
.foot-small{font-size:var(--f-fs-xs)}
/* 本文の補足は 14px 以上、注記は 12px 以上 */
.note,.small,.ledger-foot,.ex-foot{font-size:max(14px,1em)}
small{font-size:max(12px,.8em)}

/* ---------- フォーカス ---------- */
:focus-visible{outline:3px solid var(--f-primary);outline-offset:2px;border-radius:4px}

/* ---------- ヘッダー（サービス名 by CAPXLE） ---------- */
.fam-brand{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;min-height:var(--f-tap-min);text-decoration:none;color:var(--f-ink)!important;line-height:1.25;min-width:0}
.fam-brand svg{width:26px;height:26px;flex:none}
.fam-pill{flex:none;width:24px;height:13px;border-radius:7px;border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transform:rotate(-35deg)}
.fam-brand-txt{display:flex;flex-direction:column;min-width:0}
.fam-brand-txt b{font-family:var(--f-sans);font-size:15px;font-weight:700;letter-spacing:.04em;white-space:normal}
.fam-brand-txt small{font-family:var(--f-sans);font-size:var(--f-fs-xs);font-weight:400;color:var(--f-ink-2);letter-spacing:.04em;line-height:1.3;margin:0}
@media (max-width:420px){.fam-brand-txt b{font-size:14px}}
.top-in,.top .wrap{min-width:0}
/* ヘッダーの主ボタン＝本文の主ボタンと同じ色 */
.nav-cta{background:var(--f-primary)!important;color:var(--f-primary-ink)!important;font-weight:700!important;border-radius:var(--f-r)!important;min-height:var(--f-tap-min);display:inline-flex!important;align-items:center;padding:0 14px!important;white-space:nowrap;font-size:var(--f-fs-sm)!important;text-decoration:none!important;border:0!important}
.nav-cta:hover{filter:brightness(1.08);background:var(--f-primary)!important;color:var(--f-primary-ink)!important}

/* ---------- ボタン（主＝塗り 1 色・副＝枠） ---------- */
.fam-primary,.fam-secondary{display:inline-flex!important;align-items:center;justify-content:center;min-height:var(--f-tap);padding:0 24px!important;border-radius:var(--f-r)!important;font-family:var(--f-sans);font-weight:700;font-size:var(--f-fs-md)!important;line-height:1.3!important;text-decoration:none!important;text-align:center;word-break:keep-all;transform:none}
.fam-primary{background:var(--f-primary)!important;color:var(--f-primary-ink)!important;border:0!important;box-shadow:none!important}
.fam-primary:hover{filter:brightness(1.08)}
.fam-secondary{background:transparent!important;color:var(--f-ink)!important;border:1.5px solid currentColor!important;box-shadow:none!important}
.fam-secondary:hover{background:color-mix(in srgb,currentColor 8%,transparent)!important}
/* 暗い節（問い合わせ）の中の副ボタンは地の色で縁取る */
.contact .fam-secondary,.sec-ink .fam-secondary{color:inherit!important}
.fam-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0}
.fam-cta .fam-primary{flex:1 1 200px;max-width:320px}
.fam-cta .fam-secondary{flex:0 1 auto}
.fam-more{margin:12px 0 0!important;font-size:var(--f-fs-sm);color:var(--f-ink-2);display:flex;flex-wrap:wrap;gap:0 16px}
.fam-more a{display:inline-flex;align-items:center;min-height:var(--f-tap-min);color:var(--f-ink)!important;font-weight:600;text-underline-offset:4px}

/* ---------- 値段の 1 行（見出しの直下） ---------- */
.fam-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 20px!important;padding:10px 14px;border-left:4px solid var(--f-primary);background:color-mix(in srgb,var(--f-primary) 7%,transparent);border-radius:0 var(--f-r) var(--f-r) 0;max-width:36em;line-height:1.5}
.fam-price b{font-family:var(--f-sans);font-size:var(--f-fs-xl);font-weight:800;color:var(--f-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fam-price span{font-size:var(--f-fs-sm);color:var(--f-ink-2)}
.fam-price a{font-size:var(--f-fs-sm);font-weight:600;color:var(--f-ink)}

/* ---------- 状況の札 ---------- */
.tag{font-size:var(--f-fs-xs)!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1.6!important;padding:1px 8px!important;border-radius:var(--f-r-pill)!important;border:1px solid currentColor!important}
.tag-ok,.tag-live{color:var(--f-ok-fg)!important;background:var(--f-ok-bg)!important}
.tag-wait,.tag-test,.tag-part{color:var(--f-try-fg)!important;background:var(--f-try-bg)!important}
.tag-plan{color:var(--f-plan-fg)!important;background:var(--f-plan-bg)!important;border-style:dashed!important}
.tag::before{background:currentColor}

/* ---------- 押す所（指で押す所は 44px 以上） ---------- */
.foot-links a,.foot-nav a,.site-foot li a,.site-foot a,.ftr nav a,footer nav a,.svc-list li a{display:inline-flex!important;align-items:center;min-height:var(--f-tap-min)}
.foot-links{gap:0 20px!important}
.foot-links a{border-bottom:0!important;text-decoration:underline;text-decoration-color:var(--f-line);text-underline-offset:4px}
details>summary{min-height:var(--f-tap-min)}

/* ---------- 試作の 2 本目の帯は 1 行に ---------- */
.draft{font-size:var(--f-fs-xs)!important;line-height:1.5!important;padding:4px 16px!important}

/* ---------- 見出しの札を前の語と離さない・ナビの押す所 ---------- */
.fam-nw{white-space:nowrap}
.fam-price a{display:inline-flex;align-items:center;min-height:var(--f-tap-min);text-underline-offset:4px}
.nav a:not(.nav-cta){min-height:var(--f-tap-min);line-height:var(--f-tap-min);padding-top:0!important;padding-bottom:0!important}
.mock{font-family:var(--f-sans)!important}
.btn-s{min-height:var(--f-tap-min)}
/* スマホの最初の画面に、値段と主ボタンまで入れる */
@media (max-width:959px){.hero{padding-top:28px!important}.hero .eyebrow{margin-bottom:10px}.hero h1{margin-bottom:16px}}