/* kabau-ui.css — 藍と生成りをガイド・パック・台帳・tools・法務面へ浸透する層
   正典トークンは index-inline.css と同じ。後勝ちで blk / rich-tools の
   スレート・ティール・グラデ・ピル・絵文字カードを帳票へ戻す。
   フォントはここから1回だけ読む（HTML側で fonts.css を二重に張らない）。 */
@import url("fonts.css");
:root{
  --sumi:#211F1C;
  --sumi-2:#4B463E;
  --sumi-3:#6B6456;
  --ai:#165E83;
  --ai-deep:#0F4362;
  --ai-wash:#EDF3F6;
  --kami:#F7F4EC;
  --shiro:#FFFFFF;
  --keisen:#E2DCCE;
  --keisen-2:#CFC7B4;
  --keisen-table:#A89E87;
  --input-border:#9A9078;
  --tokiwa:#10714C;
  --tokiwa-bg:#EDF5F0;
  --kohaku:#7D5708;
  --kohaku-bg:#F8F2E4;
  --shu:#B94047;
  --shu-bg:#F9EEEE;
  --radius:4px;
  --font-display:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;
  --font-body:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --blue:var(--ai);
  --blue-dark:var(--ai-deep);
  --text:var(--sumi);
  --text2:var(--sumi-2);
  --text3:var(--sumi-3);
  --bg:var(--kami);
  --bg2:var(--kami);
  --border:var(--keisen);
  --teal:var(--ai);
  --teal-cta:var(--ai);
  --teal-bg:var(--ai-wash);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--kami);
  color:var(--sumi);
  font-size:15px;
  font-weight:400;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ai-wash);color:var(--sumi)}
a{color:var(--ai)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ai-deep);outline-offset:2px;
}

/* ナビ：紙＋髪の毛罫。ガラスもグラデも使わない */
.nav, header nav, nav.nav{
  background:var(--kami) !important;
  border-bottom:1px solid var(--keisen) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.nav-brand, .nav-logo{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  color:var(--sumi);
  letter-spacing:.02em;
  text-decoration:none;
}
.nav-brand span, .nav-logo span{color:var(--ai)}
.nav-back, .nav-main{color:var(--ai);font-size:13.5px;text-decoration:none}

/* ヒーロー：生成りの紙。グラデ禁止 */
.hero{
  background:var(--kami) !important;
  padding:48px 24px 40px;
  text-align:center;
}
.hero::after, .hero::before{display:none !important}
.hero h1, .article h1, h1{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--sumi);
  letter-spacing:.04em;
  line-height:1.4;
}
.hero p{color:var(--sumi-2);max-width:40em;margin-left:auto;margin-right:auto}

/* 帳票ラベル。ピル（100px）は使わない */
.hero-badge, .board-kicker, .tool-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--shiro);
  border:1px solid var(--ai);
  border-radius:2px !important;
  padding:6px 16px;
  font-size:12.5px;
  font-weight:500;
  color:var(--ai) !important;
  letter-spacing:.1em;
  margin-bottom:16px;
}
.board-kicker{
  display:block;
  width:fit-content;
  color:var(--ai) !important;
}

/* 本文カラム */
.article, .container, .main{
  max-width:680px;
}
.article h2, .container h2, .main h2, .faq-title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  color:var(--sumi);
  border-bottom:1px solid var(--keisen-table);
  padding-bottom:8px;
  margin:36px 0 14px;
}
.article h3{font-size:16px;font-weight:500;color:var(--sumi);margin:22px 0 8px}
.article p, .article li, .container p{color:var(--sumi-2);line-height:1.9}
.article .lead{color:var(--sumi);font-size:16px}

/* 表：ゼブラ禁止。ヘッダは藍ベタ */
table{border-collapse:collapse;width:100%}
th{
  background:var(--ai) !important;
  color:#fff !important;
  font-weight:500;
  text-align:left;
  padding:10px 14px;
  border:1px solid var(--ai) !important;
}
td{
  background:var(--shiro);
  color:var(--sumi-2);
  padding:10px 14px;
  border:1px solid var(--keisen-table) !important;
}

/* 注記・コールアウト：左3pxのティールではなく紙＋罫 */
.note, .callout, .confirmed, .board-note, .handoff-banner{
  background:var(--shiro) !important;
  border:1px solid var(--keisen) !important;
  border-radius:var(--radius) !important;
  color:var(--sumi-2) !important;
  box-shadow:none !important;
}
.confirmed{color:var(--sumi-3) !important;font-size:13px}

/* 購入ブロック：帳票の注文書 */
.buy-block{
  background:var(--shiro);
  border:1px solid var(--ai);
  border-radius:var(--radius);
  padding:28px 24px;
  text-align:center;
  margin:28px auto;
  max-width:520px;
}
.buy-block-fold{max-width:520px;margin:28px auto}
.buy-price{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:600;
  color:var(--sumi);
  letter-spacing:.04em;
  margin:0 0 14px;
}
.buy-btn, .gap-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 32px;
  background:var(--ai);
  color:#fff !important;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  text-decoration:none;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
}
.buy-btn:hover, .gap-submit:hover{background:var(--ai-deep)}
.buy-sub{font-size:13px;color:var(--sumi-3);margin:12px 0 0;line-height:1.7}

/* フォーム：紙の記入欄 */
.gap-form fieldset, .rec-form fieldset{
  border:1px solid var(--keisen);
  border-radius:var(--radius);
  background:var(--shiro);
  padding:16px 18px 10px;
  margin:0 0 16px;
}
.gap-form legend, .rec-form legend{
  font-size:13px;
  font-weight:500;
  color:var(--ai);
  letter-spacing:.06em;
  padding:0 6px;
}
.rec-form input, .rec-form textarea, .rec-form select,
.gap-row input{
  border:1px solid var(--input-border);
  border-radius:var(--radius);
  font:inherit;
}
.gap-result{
  background:var(--shiro);
  border:1px solid var(--keisen);
  border-radius:var(--radius);
  padding:20px 22px;
}
.gap-score{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
}

/* FAQ・関連：角丸12のカードを紙へ */
.faq-item, .related, .sources, .bot-cta, .banto, .ai-cta{
  background:var(--shiro) !important;
  border:1px solid var(--keisen) !important;
  border-radius:var(--radius) !important;
  box-shadow:none !important;
}
.bot-cta, .banto, .ai-cta{
  background:var(--kami) !important;
}
.banto-note{color:var(--sumi-2);font-size:13px;margin-top:10px}
.bot-cta-btn, .banto-btn, .btn-white, .tool-cta, .cta-btn, .calc-btn{
  background:var(--ai) !important;
  color:#fff !important;
  border-radius:var(--radius) !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}
.bot-cta-btn:hover, .banto-btn:hover, .tool-cta:hover, .cta-btn:hover, .calc-btn:hover{
  background:var(--ai-deep) !important;
  transform:none !important;
}
.calc-btn::after{display:none !important}
.ai-cta h2, .ai-cta p{color:var(--sumi) !important}
.btn-white{background:var(--shiro) !important;color:var(--ai) !important;border:1px solid var(--ai) !important}

/* tools カード：絵文字と浮上を止める */
.tool-icon{display:none !important}
.tool-card{
  background:var(--shiro) !important;
  border:1px solid var(--keisen) !important;
  border-radius:var(--radius) !important;
  box-shadow:none !important;
  transform:none !important;
}
.tool-card::before{display:none !important}
.tool-card:hover{
  border-color:var(--ai) !important;
  transform:none !important;
  box-shadow:none !important;
  background:var(--shiro) !important;
}
.tool-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  color:var(--sumi);
}
.tool-tag{
  background:var(--kami) !important;
  color:var(--sumi-3) !important;
  border-radius:2px !important;
}
.tools-grid{gap:12px}

/* コード／文例 */
pre.tpl{
  background:var(--shiro);
  border:1px solid var(--keisen);
  border-radius:var(--radius);
  font-family:inherit;
  color:var(--sumi-2);
}

footer, .footer{
  background:var(--kami);
  border-top:1px solid var(--keisen);
  color:var(--sumi-3);
}
footer a, .footer a{color:var(--sumi-3)}

.search-entry a{color:var(--ai)}

.sku-chooser{
  margin:20px 0 8px;
  padding:16px 18px;
  background:var(--shiro);
  border:1px solid var(--keisen);
  border-radius:var(--radius);
}
.sku-chooser-label{
  margin:0 0 10px;
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--sumi-3);
}
.sku-chooser ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.sku-chooser a, .sku-chooser [aria-current="page"]{
  display:block;
  padding:10px 12px;
  border:1px solid var(--keisen);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--sumi);
  font-size:14px;
  line-height:1.5;
}
.sku-chooser a:hover{border-color:var(--ai)}
.sku-chooser [aria-current="page"]{
  border-color:var(--ai);
  background:var(--ai-wash);
}

/* 支払直前の事実。buy-block の中央揃えから外す */
.checkout-facts{
  text-align:left;
  margin:0 0 16px;
}
.checkout-facts-label{
  margin:0 0 8px;
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--sumi-3);
}
.checkout-facts ul{
  margin:0;
  padding:0 0 0 1.15em;
  font-size:13px;
  line-height:1.65;
  color:var(--sumi-2);
}
.checkout-facts li{margin:0 0 6px}

.pack-sample{
  max-width:720px;
  margin:8px auto 32px;
  padding:20px 22px;
  background:var(--shiro);
  border:1px solid var(--keisen);
  border-radius:var(--radius);
  text-align:left;
}
.pack-sample-label{
  margin:0 0 8px;
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--sumi-3);
}
.pack-sample .tpl{
  margin:12px 0;
  padding:16px 18px;
  background:var(--kami);
  border:1px solid var(--keisen);
  border-radius:var(--radius);
  font-size:13.5px;
  line-height:1.85;
  color:var(--sumi-2);
}
.pack-sample .tpl-label{
  margin:0 0 8px;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--sumi-3);
}
.pack-sample-note{
  margin:10px 0 0;
  font-size:13px;
  color:var(--sumi-3);
  line-height:1.65;
}

/* 2026-09-01 実測にもとづく追加。
   記事サイト1,006人に対し /zure 着地は13人（1.29%）。最大の645人記事では、
   無料の入口が段落内のテキストリンク、その直下の有料が見出し・説明・ボタン付きの箱で、
   **視覚的な重みが逆転していた**（名前を取る前に売っている＝gtm-doctrine 段2飛ばし）。
   無料側を同じ重みの箱にし、有料より前に置くための変種。構造は .pack-cta と同一。 */
.free-cta{
  margin:24px 0;
  padding:22px 20px;
  background:var(--shiro);
  border:2px solid var(--ai);
  border-radius:var(--radius);
  text-align:left;
}
.free-cta-title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--sumi);
}
.free-cta-sub{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.7;
  color:var(--sumi-2);
}
.free-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  background:var(--ai);
  color:#fff !important;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  border-radius:var(--radius);
}
.free-cta-btn:hover{background:var(--ai-deep)}
@media (max-width:600px){.free-cta-btn{width:100%}}
.pack-cta{
  margin:24px 0;
  padding:22px 20px;
  background:var(--shiro);
  border:1px solid var(--ai);
  border-radius:var(--radius);
  text-align:left;
}
.pack-cta-title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--sumi);
}
.pack-cta-sub{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.7;
  color:var(--sumi-2);
}
.pack-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  background:var(--ai);
  color:#fff !important;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  border-radius:var(--radius);
}
.pack-cta-btn:hover{background:var(--ai-deep)}
.sister-note{
  margin:28px 0 8px;
  font-size:13px;
  line-height:1.7;
  color:var(--sumi-3);
}
.sister-note a{
  color:var(--ai);
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 2px;
}
/* 義務化までの残日数（actions.js の [data-kabau-countdown] が文言を入れる）。
   赤系を使わず既存トーン。JS未実行・施行後の空要素は場所を取らない。 */
.kabau-countdown, p.kabau-countdown{
  margin:12px 0;
  font-size:13.5px;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--ai);
}
.kabau-countdown:empty{display:none}
footer p.kabau-countdown, .footer p.kabau-countdown{color:var(--sumi-3);margin:6px 0 0}

.bot-card-icon,.card-title-icon,.tool-icon{display:none !important}
.skip-link{
  position:absolute;top:-100px;left:8px;background:var(--ai);color:#fff;
  padding:8px 16px;border-radius:var(--radius);font-size:14px;text-decoration:none;z-index:9999;
}
.skip-link:focus{top:8px}

@media (prefers-reduced-motion: reduce){
  .skip-link,.buy-btn,.gap-submit,.nav-cta,.start-path,.pack-cta-btn{transition:none}
}
@media (pointer: coarse), (max-width: 768px){
  .sa-search-hint{display:none !important}
}
@media (max-width:600px){
  .hero{padding:32px 20px 28px}
  .buy-btn,.pack-cta-btn{width:100%}
  .article{font-size:16px;line-height:1.9}
}

/* 2026-09-02 製品定義書 v3 §7.5 / §8.6 / §12.2: 請求書払いの導線と明細告知。
   カードの購入ボタン（.buy-btn）と並べる二次ボタン。.buy-btn の完全一致を増やさない
   （tests/sharoushi が購入ボタンを class="buy-btn" の一致数で数える）。 */
.buy-btn-invoice{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:10px 0 0;padding:0 20px;background:var(--shiro,#fff);color:var(--ai,#165E83) !important;font-size:15px;font-weight:500;text-decoration:none;border:1px solid var(--ai,#165E83);border-radius:var(--radius,4px);cursor:pointer;font-family:inherit}
.buy-btn-invoice:hover{background:var(--kami,#F7F4EC)}
.checkout-facts-notice{margin:12px 0 0;padding:10px 12px;font-size:13px;line-height:1.8;color:var(--sumi,#211F1C);background:var(--kami,#F7F4EC);border-left:3px solid var(--ai,#165E83)}
.invoice-form{margin:16px 0 28px;padding:20px;background:var(--shiro,#fff);border:1px solid var(--ai,#165E83);border-radius:var(--radius,4px)}
.invoice-field{display:block;margin:0 0 12px}
.invoice-field span{display:block;font-size:13px;color:var(--sumi-2,#4B463E);margin:0 0 4px}
.invoice-field input{width:100%;min-height:46px;padding:10px 12px;font-size:15px;color:var(--sumi,#211F1C);background:var(--shiro,#fff);border:1px solid #6B6456;border-radius:4px;box-sizing:border-box}
.invoice-field input:focus{outline:2px solid var(--ai,#165E83);outline-offset:1px}
.invoice-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.invoice-facts{font-size:13px;line-height:1.8;color:var(--sumi-2,#4B463E);margin:8px 0 12px}
.invoice-submit{width:100%;margin:0}
@media (max-width:600px){.buy-btn-invoice{width:100%}}