/* ============================================================
   index-inline.css — sharoushi-agent.com メインLP（v3・2026-07-24全面刷新）
   ビジュアルアイデンティティ「藍と生成り」= 公的書類 × 現代UI
   正典: output/0724/sharoushi_visual_identity_mockup/css/style.css（Takeshi承認済み）

   確定ルール（正典から移植・厳守）:
   - 墨#211F1C / 藍#165E83 / 生成り#F7F4EC / 常磐#10714C / 琥珀#7D5708 / 真朱#B94047
   - グラデーション・グロー・ピルバッジは使わない
   - 明朝（Shippori Mincho）は22px以上のみ（例外はワードマーク19px）
   - 最小フォント12.5px。注記は13px
   - 表はゼブラ禁止。行罫 --keisen-table ＋ ヘッダ行の藍白ベタ
   - Shippori Minchoはpalt/tnum非搭載: paltやtext-spacing-trimは書かない。
     中央揃え明朝見出しの行末約物は .punct-end のspan相殺(-.65em)
   - 桁揃えが必要な数値表はNoto Sans側で組む
   ============================================================ */

: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',sans-serif;

  /* 旧トークン互換（inline-helpers.css のu-クラスが参照するため新パレットへ張り替え） */
  --blue:var(--ai);
  --blue-dark:var(--ai-deep);
  --blue-light:var(--ai);
  --blue-bg:var(--ai-wash);
  --blue-bg2:var(--ai-wash);
  --text:var(--sumi);
  --text2:var(--sumi-2);
  --text3:var(--sumi-3);
  --bg:var(--shiro);
  --bg2:var(--kami);
  --bg3:var(--ai-wash);
  --border:var(--keisen);
  --border2:var(--keisen-2);
  --green:var(--tokiwa);
  --green-bg:var(--tokiwa-bg);
  --green-text:var(--tokiwa);
  --green-border:var(--tokiwa);
  --amber:var(--kohaku);
  --amber-bg:var(--kohaku-bg);
  --radius-sm:4px;
  --radius-lg:4px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:var(--font-body);
  background:var(--kami);
  color:var(--sumi);
  font-size:15px;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ai)}

.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;transition:top .15s}
.skip-link:focus{top:8px}

/* フォーカス可視化（キーボード・支援技術） */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--ai-deep);outline-offset:2px;
}
.btn-primary:focus-visible,.nav-cta:focus-visible,.btn-cta-white:focus-visible{outline-color:var(--sumi)}

/* ============================================================
   ナビゲーション（紙の上に髪の毛罫一本・sticky化でCTA遮蔽を解消）
   ============================================================ */
header{position:sticky;top:0;z-index:200}
nav#nav{
  background:rgba(247,244,236,.94);
  border-bottom:1px solid var(--keisen);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
nav#nav.elevated{box-shadow:0 1px 2px rgba(33,31,28,.06)}
.nav-inner{max-width:1100px;margin:0 auto;padding:13px 32px;display:flex;align-items:center;gap:24px}
.nav-logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);
  font-size:19px;font-weight:700;color:var(--sumi);
  text-decoration:none;letter-spacing:.02em;white-space:nowrap;
  /* 狭幅・ブラウザ拡大時にロゴ文字列がハンバーガーを押し出さないよう縮退させる（R1 Fix 3-9・2026-07-25） */
  min-width:0;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;
}
.nav-logo .brand-mark{width:20px;height:20px;flex:none;display:block}
.nav-logo span{color:var(--ai)}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a:not(.nav-cta){font-size:13.5px;color:var(--sumi-2);text-decoration:none;letter-spacing:.02em}
.nav-links a:not(.nav-cta):hover{color:var(--ai)}
.nav-cta{
  background:var(--ai);color:#fff;text-decoration:none;
  padding:9px 20px;border-radius:var(--radius);font-weight:500;font-size:13.5px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;
  flex-shrink:0;
}
.nav-cta:hover{background:var(--ai-deep)}
.nav-hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:8px;min-width:44px;min-height:44px;border:1px solid var(--keisen-2);border-radius:var(--radius);background:var(--shiro);flex-shrink:0}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--sumi);border-radius:1px;transition:all .2s ease-out}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;position:fixed;top:59px;left:0;right:0;background:var(--kami);border-bottom:1px solid var(--keisen);padding:6px 0 0;z-index:199;flex-direction:column;box-shadow:0 1px 2px rgba(33,31,28,.05)}
.nav-mobile.open{display:flex}
.nav-mobile a{padding:13px 24px;color:var(--sumi-2);text-decoration:none;font-size:14px;border-top:1px solid var(--keisen)}
.nav-mobile .nav-cta{color:#fff;background:var(--ai);text-align:center;margin:10px 24px 16px;border-radius:var(--radius);border-top:none}

/* ============================================================
   1. ヒーロー（予算: ブランド/H1/免責/支持文1段落/CTA群/チャットデモのみ）
   ============================================================ */
.hero{max-width:1100px;margin:0 auto;padding:36px 32px 64px;text-align:center}

/* 帳票ラベル風バッジ — 本デザイン唯一のシグネチャ要素 */
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--shiro);border:1px solid var(--ai);border-radius:2px;
  padding:6px calc(16px - .1em) 6px 16px;
  font-size:12.5px;color:var(--ai);font-weight:500;letter-spacing:.1em;
  margin-bottom:18px;
}
.hero-badge::before{content:"";width:7px;height:7px;background:var(--ai);flex:none}

.hero h1{
  font-family:var(--font-display);
  font-size:46px;font-weight:600;line-height:1.38;letter-spacing:.04em;
  color:var(--sumi);margin-bottom:10px;
}
.hero h1 .accent{color:var(--ai)}
h1 .punct-end,.section-title .punct-end,.cta-title .punct-end{margin-right:-.65em}

.hero-disclaimer{font-size:13px;color:var(--sumi-3);margin:0 auto 14px;max-width:640px}
.hero-sub{
  max-width:640px;margin:0 auto 18px;
  font-size:15.5px;color:var(--sumi-2);line-height:1.85;text-align:left;
}

.hero-ctas{display:flex;justify-content:center;align-items:center;gap:16px;margin:0 0 14px;flex-wrap:wrap}
.btn-primary{
  background:var(--ai);color:#fff;text-decoration:none;border:none;cursor:pointer;
  height:50px;padding:0 calc(38px - .04em) 0 38px;border-radius:var(--radius);
  font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .15s ease-out;
}
.btn-primary:hover{background:var(--ai-deep)}
.btn-secondary{
  background:var(--shiro);color:var(--ai);text-decoration:none;
  height:50px;padding:0 calc(30px - .04em) 0 30px;border-radius:var(--radius);
  border:1px solid var(--ai);
  font-size:15px;font-weight:500;letter-spacing:.04em;
  display:inline-flex;align-items:center;
  transition:background .15s ease-out;
}
.btn-secondary:hover{background:var(--ai-wash)}
.btn-primary[aria-disabled="true"],.btn-primary:disabled{
  background:var(--keisen-2);color:#6E675B;cursor:not-allowed;pointer-events:none;
}

/* R2 Fix 4-7: ヒーロー直下の就業規則ひな形への直接導線 */
.hero-quicklink{display:inline-block;font-size:13.5px;color:var(--ai);text-decoration:underline;text-underline-offset:3px;margin:0 0 18px}
.hero-quicklink:hover{color:var(--ai-deep)}

.hero-privacy-note{font-size:13px;color:var(--sumi-3);margin:0 auto 36px;max-width:560px;line-height:1.7}
.hero-privacy-note svg{vertical-align:-2px;margin-right:5px;color:var(--sumi-3)}
.hero-privacy-note a{color:var(--sumi-3);text-decoration:underline}

/* チャット回答例（書類カード: 白地・髪の毛罫・薄い一段影のみ） */
.hero-chat-demo{max-width:640px;margin:0 auto;text-align:left}
.hero-qa-label{font-size:13px;color:var(--sumi-3);letter-spacing:.14em;margin-bottom:12px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
/* 10ペルソナ監査L4 #9(2026-07-29): このカードは静的なサンプル表示であり、クリック
   ハンドラは存在しない。しかし「クリックできそうに見える」ことで実際にタップし、
   何も起きないことに戸惑うペルソナがいたため、「見本・タップ不可」の明示バッジを
   追加し、pointer-eventsをnoneにしてタップ自体を無効化する（誤操作の可能性を構造的に
   ゼロにする）。 */
.hero-qa-tag{font-size:11px;letter-spacing:.02em;color:var(--sumi-3);
  background:var(--kami);border:1px solid var(--keisen);border-radius:999px;padding:2px 10px}
.chat-demo{
  background:var(--shiro);border:1px solid var(--keisen);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 1px 2px rgba(33,31,28,.05);text-align:left;
  pointer-events:none;cursor:default;
}
.chat-header{
  font-size:12.5px;color:var(--sumi-2);letter-spacing:.08em;
  padding:10px 18px;border-bottom:1px solid var(--keisen);background:var(--kami);
}
.chat-bubbles{padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.chat-bubble{max-width:86%;padding:12px 16px;font-size:13.5px;line-height:1.9;border-radius:var(--radius)}
.bubble-user{align-self:flex-end;background:var(--ai);color:#fff}
.bubble-ai{
  align-self:flex-start;background:var(--kami);color:var(--sumi);
  border:1px solid var(--keisen);border-left:3px solid var(--ai);
}
.hero-chat-caption{font-size:13px;color:var(--sumi-3);margin-top:12px;text-align:center}

/* ============================================================
   セクション共通（帳票ラベルシグネチャの見出し）
   ============================================================ */
.section{padding:64px 32px}
.section-inner{max-width:1000px;margin:0 auto}
.band-shiro{background:var(--shiro);border-top:1px solid var(--keisen);border-bottom:1px solid var(--keisen)}
.section-label{
  font-size:12.5px;font-weight:500;color:var(--ai);letter-spacing:.18em;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.section-label::before{content:"";width:6px;height:6px;background:var(--ai);flex:none}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:.05em;line-height:1.5;
  color:var(--sumi);padding-bottom:12px;margin-bottom:10px;
  border-bottom:2px solid var(--sumi);
}
.section-sub{font-size:14.5px;color:var(--sumi-2);margin-bottom:34px;max-width:680px;line-height:1.9}

/* ============================================================
   2. デモ体験（会社の状況を選ぶ＋助成金診断＝代表体験）
   ============================================================ */
.match-card{
  background:var(--shiro);border:1px solid var(--keisen);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(33,31,28,.05);
  padding:26px 28px;max-width:640px;text-align:left;
}
.match-row{margin-bottom:16px}
.match-label{display:block;font-size:13px;font-weight:700;color:var(--sumi-2);margin-bottom:6px}
.match-select{
  width:100%;height:50px;padding:0 14px;border:1px solid var(--input-border);border-radius:var(--radius);
  font-size:14px;font-family:inherit;color:var(--sumi);background:var(--shiro);outline:none;
}
.match-select:focus{outline:2px solid var(--ai);outline-offset:1px;border-color:var(--ai)}
.match-btn{
  width:100%;height:50px;background:var(--ai);color:#fff;border:none;border-radius:var(--radius);
  font-size:15px;font-weight:500;letter-spacing:.04em;cursor:pointer;font-family:inherit;
  transition:background .15s ease-out;margin-top:4px;
}
.match-btn:hover{background:var(--ai-deep)}
.match-result{margin-top:18px;padding:16px;background:var(--kami);border:1px solid var(--keisen);border-radius:var(--radius)}
.match-ctx{background:var(--shiro);border:1px dashed var(--keisen-2);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:var(--sumi);margin:8px 0 12px;line-height:1.7}
.match-r-title.match-r-title{font-weight:700;margin-bottom:4px}
.match-r-sub.match-r-sub{font-size:13px;color:var(--sumi-2);margin-bottom:4px}
.match-r-cta.match-r-cta{display:inline-flex}
.match-r-guide{display:block;margin-top:10px;font-size:13px;color:var(--ai);text-decoration:underline;text-underline-offset:3px}
.match-r-guide:hover{color:var(--ai-deep)}
/* R2 Fix 4-1(c): コピー結果を隠さず明示するボタン＋ステータス（誇大表現「選ぶだけで」対応） */
.match-copy-btn{
  display:inline-flex;align-items:center;height:40px;padding:0 18px;margin:0 10px 10px 0;
  background:var(--shiro);color:var(--ai);border:1px solid var(--ai);border-radius:var(--radius);
  font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s ease-out;
}
.match-copy-btn:hover{background:var(--ai-wash)}
.match-copy-status{font-size:13px;color:var(--sumi-3)}
.match-copy-status.ok{color:var(--tokiwa)}
.match-copy-status.err{color:var(--shu)}
.demo-tools-link{font-size:13.5px;color:var(--sumi-2);margin-top:26px}
.demo-tools-link a{color:var(--ai);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.demo-tools-link a:hover{color:var(--ai-deep);text-decoration-thickness:2px}
.demo-loss-note{
  max-width:640px;margin:0 0 26px;
  background:var(--kohaku-bg);border:1px solid var(--kohaku);border-radius:2px;
  padding:14px 18px;font-size:13.5px;line-height:1.9;color:var(--sumi-2);text-align:left;
}
.demo-loss-note .callout-title{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;margin-bottom:4px;color:var(--kohaku);
}
.demo-loss-note .callout-title::before{content:"";width:6px;height:6px;background:var(--kohaku);flex:none}

/* デモ体験内の見出し（サブブロック用・明朝22px下限を守る） */
.demo-block-title{
  font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:.03em;
  color:var(--sumi);margin:0 0 12px;
}
.demo-block{margin-top:44px}

/* ============================================================
   3. 信頼（監修・実数・比較表・データ取扱い）
   ============================================================ */
.trust-fact-row{
  display:flex;justify-content:flex-start;align-items:stretch;
  margin:0 0 30px;max-width:640px;
  border-top:1px solid var(--keisen-2);border-bottom:1px solid var(--keisen-2);
}
.trust-fact{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.trust-fact + .trust-fact{border-left:1px solid var(--keisen)}
.trust-fact-num{
  font-family:var(--font-display);
  font-size:22px;font-weight:600;color:var(--sumi);letter-spacing:.02em;line-height:1.4;
}
.trust-fact-num strong{color:var(--ai);font-weight:700}
.trust-fact-label{font-size:13px;color:var(--sumi-3)}
.supervisor-note{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--shiro);border:1px solid var(--keisen);border-left:3px solid var(--ai);border-radius:var(--radius);
  padding:14px 18px;margin:0 0 30px;max-width:640px;
  font-size:13.5px;color:var(--sumi-2);line-height:1.9;text-align:left;
}
.supervisor-note strong{color:var(--sumi);font-weight:700}
.social-proof{
  margin:0 0 30px;font-size:13px;color:var(--tokiwa);
  background:var(--tokiwa-bg);border:1px solid var(--tokiwa);border-radius:2px;
  padding:8px calc(16px - .02em) 8px 16px;display:none;align-items:center;gap:8px;letter-spacing:.02em;
}
.social-proof strong{font-weight:700}

/* R2 Fix 4-12: 横スクロール可能な比較表に右端フェードで続きがあることを視覚的に示す
   （R1の3-9は「ページ全体を壊さない」ことのみを基準に見送ったが、R2で2ペルソナが
   独立に「見切れて重要情報を読めないまま進んだ」と報告したため再評価・対応） */
.compare-table-wrap,.agents-table-wrap{position:relative}
.compare-table-wrap::after,.agents-table-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:28px;
  background:linear-gradient(to right,rgba(255,255,255,0),var(--shiro));
  pointer-events:none;
}
.compare-table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--shiro);border:1px solid var(--keisen);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(33,31,28,.05);
}
/* 10ペルソナ監査L4 #13(2026-07-29): 料金比較表は横スクロール前提だが、スクロール
   できることを示すヒントが無く「列が切れている」だけに見えるという指摘。モバイルのみ
   表示する明示的なヒント文言（デスクトップでは不要なため既定は非表示）。 */
.table-scroll-hint{display:none;font-size:12px;color:var(--sumi-3);text-align:center;margin:0 0 8px}
.compare-table{width:100%;min-width:560px;border-collapse:collapse;font-size:13.5px;line-height:1.8;text-align:left}
.compare-table th,.compare-table td{padding:12px 16px;border-bottom:1px solid var(--keisen-table);vertical-align:top}
.compare-table thead th{background:var(--ai-wash);color:var(--sumi);font-size:13px;font-weight:700;letter-spacing:.04em}
.compare-table thead th.compare-col-us{border-top:2px solid var(--ai);color:var(--ai)}
.compare-table tbody th{background:var(--kami);color:var(--sumi-2);font-weight:700;white-space:nowrap;width:120px}
.compare-table td{color:var(--sumi-2)}
.compare-table .compare-col-us{background:var(--shiro);color:var(--sumi)}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:none}
.compare-note{font-size:13px;color:var(--sumi-3);margin-top:14px;text-align:left;line-height:1.8}
.trust-data-note{font-size:13.5px;color:var(--sumi-2);margin-top:30px;max-width:680px;text-align:left}
.trust-data-note a{color:var(--ai)}

/* ============================================================
   4. 料金（アンカリング＋13分野表＋プランカード）
   ============================================================ */
.agents-table-wrap{
  background:var(--shiro);border:1px solid var(--keisen);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 1px 2px rgba(33,31,28,.05);margin-bottom:44px;
}
.agents-table{width:100%;border-collapse:collapse;font-size:13.5px;text-align:left}
.agents-table th:first-child,.agents-table td:first-child{width:40%}
.agents-table th{
  background:var(--ai-wash);color:var(--sumi);font-weight:700;
  padding:12px 18px;font-size:13px;letter-spacing:.04em;
  border-bottom:1px solid var(--keisen-table);vertical-align:top;
}
.agents-table td{padding:12px 18px;color:var(--sumi-2);border-bottom:1px solid var(--keisen-table);vertical-align:top;line-height:1.9}
.agents-table tr:last-child td{border-bottom:none}
.agents-table td strong{color:var(--sumi);font-weight:700}
/* R2 Fix 4-7: 有料分野一覧内の対応先リンク（就業規則ひな形・36協定チェック等） */
.agents-table td a{color:var(--ai);text-decoration:underline;text-underline-offset:3px}
.agents-table td a:hover{color:var(--ai-deep)}
.agents-free-links{display:flex;flex-direction:column;gap:8px}
.agents-free-links a{
  color:var(--ai);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
  width:fit-content;
}
.agents-free-links a:hover{color:var(--ai-deep);text-decoration-thickness:2px}
.agents-free-links .free-desc{color:var(--sumi-3);font-size:12.5px}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  border-radius:2px;padding:5px calc(12px - .06em) 5px 12px;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;
}
.badge::before{content:"";width:6px;height:6px;flex:none}
.badge-label{background:var(--shiro);border:1px solid var(--ai);color:var(--ai)}
.badge-label::before{background:var(--ai)}
.badge-success{background:var(--tokiwa-bg);border:1px solid var(--tokiwa);color:var(--tokiwa)}
.badge-success::before{background:var(--tokiwa)}
.badge-warning{background:var(--kohaku-bg);border:1px solid var(--kohaku);color:var(--kohaku)}
.badge-warning::before{background:var(--kohaku)}

.price-anchor{font-size:13.5px;color:var(--sumi-2);margin:-22px 0 34px;max-width:680px;text-align:left;line-height:1.9}

.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px}
.pricing-card{
  background:var(--shiro);border:1px solid var(--keisen);border-radius:var(--radius);
  padding:30px 28px;box-shadow:0 1px 2px rgba(33,31,28,.05);text-align:left;
}
.pricing-card.featured{border-top:2px solid var(--ai)}
.pricing-recommended{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--shiro);border:1px solid var(--ai);border-radius:2px;color:var(--ai);
  font-size:12.5px;font-weight:500;letter-spacing:.06em;
  padding:4px calc(12px - .06em) 4px 12px;margin-bottom:12px;
}
.pricing-recommended::before{content:"";width:6px;height:6px;background:var(--ai);flex:none}
.pricing-plan{font-size:13px;font-weight:700;color:var(--sumi-3);letter-spacing:.1em;margin-bottom:8px}
.pricing-price{
  font-family:var(--font-display);
  font-size:34px;font-weight:700;color:var(--sumi);line-height:1.2;margin-bottom:4px;
}
.pricing-price span{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--sumi-3)}
.pricing-desc{font-size:13.5px;color:var(--sumi-2);padding:14px 0;border-top:1px solid var(--keisen);border-bottom:1px solid var(--keisen);margin:14px 0;line-height:1.8}
.pricing-trial{
  background:var(--tokiwa-bg);border:1px solid var(--tokiwa);border-radius:2px;
  padding:9px 12px;font-size:13px;font-weight:700;color:var(--tokiwa);margin-bottom:12px;
}
.pricing-features{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.pricing-feature{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--sumi-2);line-height:1.7}
.pricing-feature::before{content:"";width:6px;height:6px;background:var(--tokiwa);flex:none;margin-top:9px}
.pricing-feature strong{color:var(--sumi);font-weight:700}
.pricing-note{font-size:12.5px;color:var(--sumi-3);line-height:1.8;margin-top:12px}
.pricing-note a{color:var(--sumi-3)}
.btn-plan{
  display:flex;align-items:center;justify-content:center;text-align:center;
  height:50px;border-radius:var(--radius);font-size:15px;font-weight:500;letter-spacing:.04em;
  text-decoration:none;transition:background .15s ease-out;
}
.btn-plan-primary{background:var(--ai);color:#fff}
.btn-plan-primary:hover{background:var(--ai-deep)}
.btn-plan-outline{border:1px solid var(--ai);color:var(--ai);background:var(--shiro)}
.btn-plan-outline:hover{background:var(--ai-wash)}
.plan-annual-link{
  display:block;text-align:center;font-size:12.5px;color:var(--sumi-2);margin-top:4px;
  padding:12px 8px;min-height:44px;box-sizing:border-box;
  text-decoration:underline;text-underline-offset:3px;
}
.plan-annual-link:hover{color:var(--ai)}
/* 10ペルソナ監査L2 #6(2026-07-28): 「初回7日間は無料」の注記が年払いリンクの直前にあり、
   年払いにも適用されるように読めた（persona04指摘）。年払いは即時全額課金のため、
   年払いリンク直後に明示の打ち消し注記を置く。 */
.plan-annual-note{text-align:center;font-size:11.5px;color:var(--sumi-3);margin-top:-2px;line-height:1.6}

/* ---- 番頭（同じ家の別部屋・料金直後のコンパクト帯） ---- */
.banto-band{
  background:var(--kami);border:1px solid var(--keisen);border-left:3px solid var(--ai);
  border-radius:var(--radius);padding:24px 28px;max-width:760px;margin-top:44px;text-align:left;
}
.banto-band-label{font-size:12.5px;font-weight:500;color:var(--ai);letter-spacing:.14em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.banto-band-label::before{content:"";width:6px;height:6px;background:var(--ai);flex:none}
.banto-band-title{font-size:16px;font-weight:700;color:var(--sumi);margin-bottom:8px}
.banto-band-desc{font-size:13.5px;color:var(--sumi-2);line-height:1.9;margin-bottom:16px}
.banto-band-cta{
  display:inline-flex;align-items:center;height:44px;
  padding:0 calc(24px - .04em) 0 24px;border-radius:var(--radius);
  background:var(--shiro);border:1px solid var(--ai);color:var(--ai);
  font-size:14px;font-weight:500;letter-spacing:.04em;text-decoration:none;
  transition:background .15s ease-out;
}
.banto-band-cta:hover{background:var(--ai-wash)}

/* ============================================================
   5. FAQ
   ============================================================ */
.faq-list{display:flex;flex-direction:column;background:var(--shiro);border:1px solid var(--keisen);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px rgba(33,31,28,.05);max-width:760px}
.faq-item + .faq-item{border-top:1px solid var(--keisen)}
button.faq-q{
  width:100%;text-align:left;font-family:inherit;background:none;border:none;cursor:pointer;
  padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:14.5px;font-weight:500;color:var(--sumi);
}
.faq-icon{font-size:15px;color:var(--ai);flex:none;font-weight:500;transition:transform .2s ease-out}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{display:none;padding:14px 20px 18px;font-size:13.5px;color:var(--sumi-2);line-height:1.9;background:var(--kami);border-top:1px solid var(--keisen)}
.faq-item.open .faq-a{display:block}
.faq-a a{color:var(--ai)}

/* ============================================================
   6. 最終CTA（藍ベタ＋メール登録1箇所）
   ============================================================ */
.cta-section{padding:80px 32px;text-align:center;background:var(--ai)}
.cta-title{
  font-family:var(--font-display);
  font-size:clamp(24px,3.6vw,34px);font-weight:600;letter-spacing:.05em;line-height:1.5;
  color:#fff;margin-bottom:12px;
}
.cta-sub{font-size:14.5px;color:#DEEAF1;margin-bottom:32px}
.btn-cta-white{
  background:#fff;color:var(--ai);
  height:50px;padding:0 calc(40px - .04em) 0 40px;border-radius:var(--radius);
  font-size:15px;font-weight:500;letter-spacing:.04em;text-decoration:none;
  display:inline-flex;align-items:center;transition:background .15s ease-out;
}
.btn-cta-white:hover{background:var(--ai-wash)}
.signup-block{max-width:520px;margin:44px auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.28)}
.signup-title{font-size:14.5px;font-weight:700;color:#fff;margin-bottom:6px}
.signup-sub{font-size:13px;color:#DEEAF1;margin-bottom:16px;line-height:1.8}
.signup-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.signup-input{
  flex:1;min-width:220px;height:50px;padding:0 16px;
  border:1px solid var(--input-border);border-radius:var(--radius);
  font-size:14px;font-family:inherit;color:var(--sumi);background:var(--shiro);outline:none;
}
.signup-input::placeholder{color:var(--sumi-3)}
.signup-input:focus{outline:2px solid var(--sumi);outline-offset:1px}
/* 10ペルソナ監査L1 #14(2026-07-28): 未入力で送信してもフォーカス移動すらなく
   無反応だった(js側でsilent return)。赤枠+メッセージで明示する。 */
.signup-input.sa-field-error{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.25)}
.signup-btn{
  height:50px;padding:0 24px;background:var(--sumi);color:#fff;border:none;border-radius:var(--radius);
  font-size:14px;font-weight:500;letter-spacing:.04em;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background .15s ease-out;
}
.signup-btn:hover{background:#000}
.signup-btn:disabled{background:var(--keisen-2);color:#6E675B;cursor:not-allowed}
.signup-msg{margin-top:12px;font-size:13px;min-height:18px;color:#fff}
.signup-msg.ok{color:#CDE8DA}
.signup-msg.err{color:#F6D5D7}

/* ============================================================
   7. フッター
   ============================================================ */
.rc-footer{background:var(--kami);border-top:1px solid var(--keisen);padding:56px 32px 28px}
.rc-footer-top{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1.2fr;gap:36px}
.footer-logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--sumi);letter-spacing:.02em;
}
.footer-logo .brand-mark{width:18px;height:18px;flex:none;display:block}
.footer-logo span{color:var(--ai)}
.rc-footer-tag{font-size:12.5px;color:var(--sumi-3);line-height:1.85;margin:12px 0 16px;max-width:300px}
.rc-footer-x{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--sumi-2);
  text-decoration:none;padding:7px 14px;border:1px solid var(--keisen-2);border-radius:var(--radius);background:var(--shiro);
}
.rc-footer-x:hover{color:var(--ai);border-color:var(--ai)}
.rc-footer-h{font-size:12.5px;font-weight:700;color:var(--sumi);letter-spacing:.08em;margin-bottom:14px}
.rc-footer-col{display:flex;flex-direction:column;gap:10px}
.rc-footer-col a{font-size:12.5px;color:var(--sumi-3);text-decoration:none;width:fit-content}
.rc-footer-col a:hover{color:var(--ai)}
.rc-footer-sister{max-width:1100px;margin:36px auto 0;padding-top:20px;border-top:1px solid var(--keisen);font-size:12.5px;color:var(--sumi-3)}
.rc-footer-sister a{color:var(--sumi-3);text-decoration:underline;text-underline-offset:3px}
.rc-footer-sister a:hover{color:var(--ai)}
.rc-footer-legal{max-width:1100px;margin:20px auto 0;padding-top:20px;border-top:1px solid var(--keisen)}
.rc-footer-operator{font-size:12.5px;color:var(--sumi-3);line-height:1.85}
.rc-footer-operator a{color:var(--sumi-3)}
.rc-footer-disc{font-size:12.5px;color:var(--sumi-3);line-height:1.85;margin-top:8px}
.rc-footer-bottom{max-width:1100px;margin:18px auto 0}
.footer-copy{font-size:12.5px;color:var(--sumi-3)}

/* ---- 復帰キャッチャー（番頭・return-catcher.js） ---- */
.rc-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--shiro);border-top:1px solid var(--keisen-2);
  box-shadow:0 -1px 2px rgba(33,31,28,.06);padding:14px 20px;display:none;
}
.rc-bar-inner{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rc-bar-text{flex:1;min-width:220px;font-size:13.5px;color:var(--sumi);line-height:1.7}
.rc-bar-cta{
  display:inline-flex;align-items:center;white-space:nowrap;height:44px;
  padding:0 calc(20px - .04em) 0 20px;border-radius:var(--radius);
  background:var(--ai);color:#fff;font-size:14px;font-weight:500;letter-spacing:.04em;text-decoration:none;
}
.rc-bar-cta:hover{background:var(--ai-deep)}
.rc-bar-close{background:none;border:none;color:var(--sumi-3);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}

/* モーダルとウィザード共通部品は css/dx-widgets.css（index / tools.html 共用）に定義 */

/* ===== REVEAL =====
   スクロール出現モーションは廃止（正典: モーションは2〜3個に絞る・削って強くする）。
   .revealクラスはHTML/JS互換のため残すが常時表示（JS無効環境・SEOレンダラでも内容が見える）。 */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media(max-width:768px){
  .nav-inner{padding:11px 20px;gap:12px}
  .nav-links{display:none}
  .nav-hamburger{display:flex;margin-left:auto}
  .hero{padding:28px 20px 52px}
  /* 10ペルソナ監査L3 #13(2026-07-29): 「社労士に聞く前に、」「労務の答えが数秒で出る。」の
     2行は各行が1行に収まる前提で<br>を固定配置しているが、従来のfont-size(9vw上限34px)+
     letter-spacing .04emでは狭いモバイル幅で2行目がさらに折り返され、意図しない3行・
     不自然な改行位置になっていた。サイズを少し絞り、<wbr>で万一の折り返し位置も自然な
     文節（「労務の答えが」／「数秒で出る。」）に寄せる。 */
  .hero h1{font-size:clamp(26px,8vw,32px)}
  .hero-sub{font-size:14.5px}
  .btn-primary,.btn-secondary{width:100%;justify-content:center}
  .section{padding:52px 20px}
  .trust-fact-row{flex-direction:column}
  .trust-fact + .trust-fact{border-left:none;border-top:1px solid var(--keisen)}
  .pricing-grid{grid-template-columns:1fr}
  .match-card{padding:22px 20px}
  /* 10ペルソナ監査L4 #8(2026-07-29): 「相談AI13分野の内訳」表はモバイルで水平スクロール
     方式にしていたが、右端フェード(::after)が可視領域の最後の文字にかぶさり、
     「省略記号なしに文字単位でカットされた」ように見えるという指摘があった。この表は
     1行しかなく本質的に表組みである必要が薄いため、水平スクロールをやめて2ブロックの
     縦積みカードへ組み替える（読めない/切れる問題を構造的に解消・スワイプ操作も不要にする）。
     注意: thead(th,th)→tbody(td,td)の順にdisplay:blockで単純に縦積みすると、見出しが
     2つ連続したあとに内容が2つ連続してしまい、どの見出しがどの内容に対応するか分から
     なくなる（初版で見落とし・実装後の自己レビューで発見し是正）。thead自体を隠し、
     各tdにdata-label属性を持たせ、::beforeでその場に見出しを再掲することで、
     見出しと内容が必ず1組ずつ隣接するようにする。 */
  .agents-table-wrap{overflow-x:visible}
  .agents-table-wrap::after{display:none}
  .agents-table{min-width:0;width:100%;display:block}
  .agents-table thead{display:none}
  .agents-table tbody,.agents-table tr{display:block;width:100%}
  .agents-table td{display:block;width:100%;box-sizing:border-box;padding:14px 16px;font-size:13px}
  .agents-table td{border-bottom:1px solid var(--keisen-table)}
  .agents-table td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:700;
    color:var(--ai);letter-spacing:.02em;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--ai)}
  .agents-table tr:last-child td:last-child{border-bottom:none}
  /* 料金比較表（ChatGPT等との比較）は行見出し付きの多行表のため、引き続き横スクロール
     方式を維持する。代わりにスクロール可能であることを示す明示ヒントを付ける（#13対応）。 */
  .compare-table th,.compare-table td{padding:10px 12px;font-size:12.5px}
  .table-scroll-hint{display:block}
  .cta-section{padding:60px 20px}
  .rc-footer{padding:44px 20px 24px}
  .rc-footer-top{grid-template-columns:1fr 1fr;gap:28px 20px}
  .rc-footer-brand{grid-column:1 / -1}
}
@media(max-width:440px){
  .rc-footer-top{grid-template-columns:1fr}
}
@media(max-width:360px){
  .nav-inner{padding:10px 12px;gap:8px}
  .nav-logo{font-size:15px}
  .nav-logo .brand-mark{width:17px;height:17px}
  .nav-cta{padding:7px 10px;font-size:12.5px}
  .nav-hamburger{min-width:40px;min-height:40px;padding:6px}
}
/* R2 Fix 4-16（軽・R1 Fix 3-9の副作用対応）: 150%ズーム等で有効幅が狭まると
   「AI労務 アシス…」のように省略記号で切れて見える。480px以下では「アシスタント」の
   サブラベルごと非表示にし、「AI労務」のみを完全な文字列として見せる方が読みやすい。 */
@media(max-width:480px){
  .nav-logo span{display:none}
}
/* 狭幅・ブラウザ拡大時のボタン折り返し崩れ対策（R1 Fix 3-9・2026-07-25）:
   .btn-primary/.btn-secondary は height 固定のため、文字が折り返すと2行目がボタン外へ
   はみ出して崩れる（「AIを開く →」等）。480px以下では可変高さ＋中央寄せの複数行に切り替える。 */
@media(max-width:480px){
  .btn-primary,.btn-secondary,.match-r-cta.match-r-cta{
    height:auto;min-height:48px;white-space:normal;text-align:center;
    padding:12px 22px;line-height:1.4;
  }
}

/* ---- 印刷（労務担当者は印刷する） ---- */
@media print{
  body{background:#fff}
  nav#nav,.nav-mobile,.hero-ctas,.cta-section,.rc-bar,.modal-overlay{display:none!important}
}

/* ---- Dify埋め込みの読み込みスピナー（dify-embed.jsが使用・2026-07-25 UX第4班） ---- */
.dify-embed-spinner{width:28px;height:28px;border-radius:50%;
  border:3px solid rgba(22,94,131,.16);border-top-color:var(--ai);
  animation:sa-embed-spin .8s linear infinite}
@keyframes sa-embed-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dify-embed-spinner{animation-duration:1.6s}}

/* 10ペルソナ監査L2 #8(2026-07-28): 背景クリックは即クローズせず、パネルを軽く揺らして
   「閉じるには×かESC」を示す（入力消失の誤クローズ防止・dify-embed.js が付け外し）。 */
@keyframes sa-panel-shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}
#dify-embed-panel.sa-shake{animation:sa-panel-shake .3s ease-in-out}
@media (prefers-reduced-motion:reduce){#dify-embed-panel.sa-shake{animation:none}}