/* 台帳屋 サイト共通の見た目
   色は5つだけ：墨（文字）・帳（背景の帯）・若竹（無料）・藍（有料）・柿（30日間の無料お試し）。
   無料と有料は、台帳の見出し（インデックス）の形の札で、どのページでも同じように区切る。 */
:root {
  --ink: #1e2a36;         /* 墨：文字 */
  --ink-2: #4b5966;       /* 墨（薄）：補足の文字 */
  --paper: #ffffff;
  --ledger: #f2f5f8;      /* 帳：背景の帯 */
  --rule: #d6dee5;        /* 罫線 */
  --take: #17774a;        /* 若竹：無料 */
  --take-tint: #ecf6f0;
  --take-line: #a8d2ba;
  --ai: #1f3a5f;          /* 藍：有料・台帳屋の色 */
  --ai-tint: #edf2f8;
  --ai-line: #b5c6da;
  --kaki: #c2410c;        /* 柿：30日間の無料お試し（ボタンと札だけに使う） */
  --kaki-dark: #9a3412;
  --kaki-tint: #fff4ec;
  --kaki-line: #f1bf98;
  --link: #1d4f91;
  --focus: #e3a008;
  --r-s: 6px;             /* 札・小さな部品 */
  --r-m: 10px;            /* 画像・表・カード */
  --r-l: 16px;            /* 区切りの箱 */
  --lift: 0 12px 32px rgba(31, 58, 95, .16);   /* 浮かせる画像だけに使う影 */
  --sans: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --wide: 1040px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.85; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
strong { font-weight: 700; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.prose { max-width: 40em; }

/* 改行と行の長さ：文節の途中で折り返さない（Chrome・Edge）。最後の行に1〜2文字だけ残らないようにする */
p, li, dt, dd, td, th, figcaption, summary { word-break: auto-phrase; text-wrap: pretty; line-break: strict; }
h1, h2, h3 { line-height: 1.45; word-break: auto-phrase; text-wrap: balance; }
code { overflow-wrap: anywhere; word-break: normal; }
.phrase { display: inline-block; }

/* ヘッダー：広い画面では上に固定し、お試しのボタンがいつでも押せるように */
.site-head { position: relative; z-index: 20; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand::before { content: "台"; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px 8px 8px 2px; background: var(--ai); color: #fff; font-size: 18px; font-weight: 700; }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.brand-sub { font-size: 12px; color: var(--ink-2); }
.site-nav { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; font-size: 15px; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ai); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav .nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--kaki); color: #fff; font-weight: 700; }
.site-nav .nav-cta:hover { background: var(--kaki-dark); color: #fff; text-decoration: none; }
.head-cta { display: none; }
@media (min-width: 861px) { .site-head { position: sticky; top: 0; } }

/* 見出しと本文 */
h1 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 12px; letter-spacing: .02em; }
h2 { font-size: clamp(22px, 2.6vw, 27px); margin: 0 0 22px; letter-spacing: .02em; }
/* デモの中のプラグインの画面には、サイトの見出しの線を付けない（実際のkintoneと同じ見え方に） */
[class*="dcy-"] h2::after, [class*="dcy-"] h3::after { display: none; }
h3 { font-size: 18px; margin: 28px 0 8px; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1em; }
li { margin-bottom: 4px; }
.note { color: var(--ink-2); font-size: 14px; }
section { padding: 64px 0; }
.band { background: var(--ledger); }
.lead { font-size: 17px; }
.lead p { margin-bottom: .6em; }
.lead p:last-child { margin-bottom: 0; }
.section-lead { margin: -6px 0 24px; }

/* ボタン：角を丸め、押せるものだと分かる形に。柿色は30日間の無料お試しだけ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 24px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--ledger); text-decoration: none; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #0f1720; color: #fff; }
.btn-trial { border-color: var(--kaki); background: var(--kaki); color: #fff; }
.btn-trial:hover { border-color: var(--kaki-dark); background: var(--kaki-dark); color: #fff; }
.btn-large { min-height: 54px; padding: 0 30px; font-size: 16px; }
.btn[aria-disabled="true"] { border-color: var(--rule); color: var(--ink-2); background: var(--ledger); font-weight: 400; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.actions + .note { margin-top: 12px; }

/* 無料・有料の札（文中・表の中の小さな札） */
.plan { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 3.2em; height: 1.65em; margin-right: 8px; padding: 0 8px; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .05em; vertical-align: .12em; }
.plan-free { border: 1.5px solid var(--take); color: var(--take); background: var(--paper); }
.plan-paid { border: 1.5px solid var(--ai); color: #fff; background: var(--ai); }
.trial-pill { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--kaki-tint); border: 1px solid var(--kaki-line); color: var(--kaki-dark); font-size: 13px; font-weight: 700; line-height: 1.7; vertical-align: .12em; white-space: nowrap; }

/* 台帳の見出し（インデックス）の形の札と、それが付いた箱 */
.tab { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 10px 10px 0 0; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.tab small { font-size: 12px; font-weight: 400; letter-spacing: 0; opacity: .92; }
.tab-free { background: var(--take); }
.tab-paid { background: var(--ai); }
.tab-trial { background: var(--kaki); }
.tabbed { position: relative; margin-top: 32px; border: 2px solid var(--rule); border-radius: 0 var(--r-l) var(--r-l) var(--r-l); background: var(--paper); }
.tabbed > .tab { position: absolute; left: -2px; bottom: 100%; }
/* 見出しのすぐ下に札の付いた箱を置くときは、札が見出しの線に重ならないように空ける */
h2 + .tabbed, .section-lead + .tabbed { margin-top: 56px; }
.tabbed.is-free { border-color: var(--take); }
.tabbed.is-paid { border-color: var(--ai); }
.tabbed.is-trial { border-color: var(--kaki-line); background: var(--kaki-tint); }

/* 札のような小さなラベルの並び */
.chips { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.chips li { margin: 0; padding: 3px 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); background: var(--paper); }
.chips .free { border-color: var(--take-line); background: var(--take-tint); color: var(--take); font-weight: 700; }
.chips .paid { border-color: var(--ai); background: var(--ai); color: #fff; font-weight: 700; }
.chips .trial { border-color: var(--kaki-line); background: var(--kaki-tint); color: var(--kaki-dark); font-weight: 700; }

/* 画面の画像：帳の色の台紙に載せる */
.shot { margin: 24px 0 0; padding: 16px 16px 0; border-radius: var(--r-l); background: var(--ledger); }
.shot a { display: block; cursor: zoom-in; }
.shot img { border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--paper); }
.shot figcaption { padding: 10px 2px 12px; font-size: 13px; color: var(--ink-2); }
.dialog-shot { max-width: 760px; }
.shot-narrow { max-width: 792px; }
.shot-crop a { position: relative; max-height: 560px; overflow: hidden; border-radius: var(--r-m); }
.shot-crop a::after { content: "画像を大きく表示"; position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 0 14px; background: linear-gradient(rgba(242, 245, 248, 0), var(--ledger) 70%); color: var(--link); font-size: 14px; font-weight: 700; text-align: center; }

/* 事実を並べる表 */
.table-scroll { overflow-x: auto; }
.facts { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--paper); font-size: 15px; }
.facts th, .facts td { padding: 12px 14px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.7; word-break: auto-phrase; }
.facts tr > :last-child { border-right: none; }
.facts tbody tr:last-child > * { border-bottom: none; }
.facts thead th { background: var(--ledger); font-size: 14px; }
.facts thead th:first-child { border-top-left-radius: var(--r-m); }
.facts thead th:last-child { border-top-right-radius: var(--r-m); }
.facts tbody th { width: 22%; background: var(--ledger); font-weight: 700; }
.facts td.center { text-align: center; }
.facts code, .api code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 13px; }
.facts .col-free { background: var(--take-tint); color: var(--take); }
.facts .col-paid { background: var(--ai-tint); color: var(--ai); }
.facts .col-paid .trial-pill { margin-left: 4px; }
.facts .col-trial { background: var(--kaki-tint); color: var(--kaki-dark); }

/* 件数だけの無料点検と、30日間の無料試用を見比べる（左：若竹＝無料点検、右：柿＝無料試用） */
.vs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin: 8px 0 28px; }
.vs-card { display: flex; flex-direction: column; margin-top: 32px; padding: 20px 22px 18px; }
.vs-card h3 { margin: 0; font-size: 19px; }
.vs-key { margin: 2px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.6; }
.vs-card.is-free .vs-key { color: var(--take); }
.vs-card.is-trial .vs-key { color: var(--kaki-dark); }
.vs-cond { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.vs-sample { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--paper); font-size: 13.5px; line-height: 1.6; }
.vs-sample p { margin: 0 0 4px; }
.vs-sample-label { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--ledger); color: var(--ink-2); font-size: 12px; }
.vs-sample-head { margin-top: 6px !important; font-weight: 700; }
.vs-sample-head b { margin-left: 6px; }
.vs-more { color: var(--ink-2); }
.vs-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vs-table th, .vs-table td { padding: 3px 6px; border: 1px solid var(--rule); text-align: left; line-height: 1.5; }
.vs-table th { background: var(--ai); color: #fff; font-weight: 700; }
.vs-list { margin: 0 0 8px; padding-left: 1.2em; font-size: 14.5px; line-height: 1.75; }
.vs-action { margin: 4px 0 0; font-size: 14.5px; font-weight: 700; }
.vs-summary td { font-size: 14.5px; }
.detail-more { margin-top: 18px; }
.detail-more > summary { padding: 8px 0; color: var(--link); font-weight: 700; cursor: pointer; }
.detail-more > .table-scroll { margin-top: 8px; }

/* 有料の箱の中の「お金をかけずに使う2つの方法」 */
.try-ways { display: grid; gap: 6px; margin: 12px 0 0; font-size: 14px; line-height: 1.65; }
.try-ways > div { padding: 8px 12px; border-radius: var(--r-s); border-left: 4px solid; }
.try-ways dt { font-weight: 700; }
.try-ways dd { margin: 0; color: var(--ink-2); }
.tw-free { border-color: var(--take) !important; background: var(--take-tint); }
.tw-free dt { color: var(--take); }
.tw-trial { border-color: var(--kaki) !important; background: var(--kaki-tint); }
.tw-trial dt { color: var(--kaki-dark); }
.table-scroll + .note, .table-scroll + p { margin-top: 12px; }
.api { margin: 0; padding: 0; list-style: none; }
.api li { margin: 0; }
.mark-yes { color: var(--take); font-weight: 700; }
.mark-no { color: #66727e; }

/* ============ トップページ ============ */
/* 飾りは1か所だけ：最初の画面の、台帳の罫線の台紙に重ねた2つの資料。ほかは余白と文字の大きさで区切り、箱や線を増やさない */

/* 最初の画面：左に言葉、右に見本の資料 */
.hero { padding: 80px 0 96px; background: var(--ledger); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.hero-product { margin: 0 0 20px; font-size: 15px; font-weight: 700; color: var(--ai); letter-spacing: .04em; }
/* 「kintone管理者向けプラグイン」は広い画面ではヘッダーにあるので、狭い画面（ヘッダーに出ないとき）だけ出す */
.hero-product span { display: none; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.hero h1 { margin: 0 0 24px; font-size: clamp(32px, 4vw, 42px); line-height: 1.32; letter-spacing: .01em; }
.hero-lead { max-width: 25em; margin: 0; font-size: 18px; line-height: 1.9; }
.hero .actions { margin-top: 36px; }
.hero-note { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }

.hero-visual { margin: 0; }
.hv-board { position: relative; aspect-ratio: 11 / 9; border-radius: 22px; background-color: #e2eaf3;
  background-image: linear-gradient(90deg, transparent 30px, #8ea7c3 30px, #8ea7c3 31px, transparent 31px, transparent 34px, #8ea7c3 34px, #8ea7c3 35px, transparent 35px),
                    repeating-linear-gradient(180deg, transparent 0, transparent 31px, #c7d5e4 31px, #c7d5e4 32px); }
.hv-item { position: absolute; display: block; margin: 0; }
.hv-item .tab { position: absolute; left: 0; bottom: 100%; height: 28px; padding: 0 12px; font-size: 13px; }
.hv-item img { width: 100%; border: 1px solid var(--rule); border-radius: 0 var(--r-m) var(--r-m) var(--r-m); background: var(--paper); box-shadow: var(--lift); }
.hv-back { top: 12%; left: 8%; width: 64%; }
.hv-front { top: 42%; right: 5%; width: 68%; }
a.hv-item:hover img { border-color: var(--ai-line); }
.hero-visual figcaption { margin-top: 10px; font-size: 12px; color: var(--ink-2); text-align: right; }

/* 各段：余白を広く、見出しと短い説明だけ */
.sec { padding: 104px 0; }
.sec h2 { margin: 0 0 14px; font-size: clamp(24px, 2.9vw, 31px); }
.sec-lead { max-width: 36em; margin: 0; color: var(--ink-2); }

/* 点検すること：4つを横に。上の太い線だけで区切る */
.check-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; }
.check-cols li { margin: 0; padding-top: 20px; border-top: 2px solid var(--ink); }
.check-cols h3 { margin: 0 0 10px; font-size: 18px; }
.check-cols p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--ink-2); }

/* できる資料：画像と説明を左右に。台帳の色の台紙に載せる */
.feat-rows { display: grid; gap: 72px; margin-top: 56px; }
.feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.feat:nth-child(even) .feat-shot { order: 2; }
.feat-shot { display: block; padding: 28px 0 0 28px; border-radius: var(--r-l); background: #e2eaf3; overflow: hidden; }
.feat:nth-child(even) .feat-shot { padding: 28px 28px 0 0; }
.feat-shot img { display: block; width: 100%; border: 1px solid var(--rule); border-bottom: none; border-radius: var(--r-s) 0 0 0; box-shadow: var(--lift); background: var(--paper); }
.feat:nth-child(even) .feat-shot img { border-radius: 0 var(--r-s) 0 0; }
.feat-body h3 { margin: 0 0 12px; font-size: 21px; }
.feat-body p { margin: 0 0 14px; font-size: 16px; line-height: 1.9; }
.feat-link { font-weight: 700; }

/* 料金 */

/* 無料の6本：使う場面ごとに3列。画像は各プラグインのページで見せ、ここは名前と一言だけ */
.free-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.free-job h3 { margin: 0; font-size: 17px; }
.free-job > p { margin: 2px 0 14px; font-size: 14px; color: var(--ink-2); }
.free-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.free-list li { margin: 0; }
.free-list a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-m); background: var(--paper); color: var(--ink); text-decoration: none; }
.free-list img { flex: none; width: 36px; height: 36px; border-radius: 8px; }
.free-list b { display: block; font-size: 16px; line-height: 1.5; }
.free-list small { display: block; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.free-list a:hover b { color: var(--take); text-decoration: underline; }

/* 使い始めるまで：番号と言葉だけ */
.home-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: hstep; }
.home-steps li { margin: 0; counter-increment: hstep; }
.home-steps li::before { content: counter(hstep); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; }
.home-steps strong { display: block; margin-bottom: 4px; font-size: 18px; }
.home-steps span { display: block; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.sec .price-line { margin-top: 32px; }

/* プラグイン一覧：無料の6本と有料の1本を、札の付いた2つの台紙に分ける */

/* 無料の6本を、使う場面（仕事）ごとに3つに分ける */



/* 料金：無料と有料を2つの箱で */
.price-line { margin: 20px 0 0; font-size: 14px; color: var(--ink-2); }

/* 使い始めるまで：番号の丸を線でつなぐ */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps li { position: relative; counter-increment: step; margin: 0; padding: 20px 20px 22px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--rule); }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 16px; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 36px; left: calc(100% + 1px); width: 19px; border-top: 2px dashed var(--rule); }
.steps strong { display: block; font-size: 17px; margin-bottom: 4px; }
.steps span { display: block; font-size: 14px; line-height: 1.75; }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 安心の要点 */
.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 1.7em; margin-bottom: 10px; }
.checks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--take) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.safe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin: 44px 0 0; padding: 0; list-style: none; }
.safe-grid li { margin: 0; padding: 0 0 0 42px; position: relative; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.safe-grid li::before { content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--take) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; }
.safe-grid strong { display: block; margin-bottom: 4px; font-size: 17px; color: var(--ink); }

/* よくある質問：開け閉めできる箱 */
.qa { max-width: 46em; margin-top: 36px; border-top: 1px solid var(--rule); }
.qa details { margin: 0; border-bottom: 1px solid var(--rule); }
.qa summary { position: relative; display: block; padding: 18px 48px 18px 0; font-weight: 700; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--link); }
.qa summary::after { content: ""; position: absolute; right: 12px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .15s; }
.qa details[open] summary::after { transform: rotate(-135deg); top: 30px; }
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition: none; } }
.qa details > div { padding: 0 48px 20px 0; color: var(--ink-2); }
.qa details > div p { margin: 0; }

/* 使い方ガイドの一覧 */
.updated { margin: -4px 0 12px; font-size: 13px; color: var(--ink-2); }
.guide-list { list-style: none; padding: 0; margin: 24px 0 0; max-width: 46em; }
.guide-list li { margin: 0; border-top: 1px solid var(--rule); }
.guide-list li:last-child { border-bottom: 1px solid var(--rule); }
.guide-list a { position: relative; display: block; padding: 16px 40px 16px 0; font-size: 17px; font-weight: 700; text-decoration: none; }
.guide-list a:hover { text-decoration: underline; }
.guide-list a::after { content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.guide-list p { margin: -10px 0 16px; color: var(--ink-2); font-size: 15px; }
.refs { font-size: 14px; }
.sample td { white-space: nowrap; font-size: 14px; }

/* 最後の案内：藍の帯 */
.final { background: var(--ai); color: #fff; }
.final .note { color: #d5deea; }
.final .btn:not(.btn-trial) { border-color: #fff; background: transparent; color: #fff; }
.final .btn:not(.btn-trial):hover { background: rgba(255, 255, 255, .12); }
.final .btn-trial { border-color: #fff; }
.final a:not(.btn) { color: #fff; }

/* フッター */
.site-foot { background: var(--ledger); border-top: 1px solid var(--rule); padding: 30px 0 40px; font-size: 14px; color: var(--ink-2); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; }
.site-foot a { color: var(--ink); }

/* ============ 下層のページ ============ */
.page { padding: 32px 0 72px; }
.page h2 { margin-top: 56px; }
.breadcrumb { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.breadcrumb a { color: var(--ink-2); }
.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.page-head img { width: 48px; height: 48px; border-radius: 11px; }
.page-head h1 { margin: 0; }
.page-head .plan { margin-left: 2px; font-size: 14px; height: 1.85em; }
.tagline { margin: 0 0 14px; font-size: clamp(21px, 3vw, 26px); font-weight: 700; line-height: 1.5; }
.page .lead { margin-bottom: 6px; }
.page .steps { margin-top: 8px; }
/* 下層のページの手順も、トップと同じく番号と言葉だけ（箱と点線を付けない） */
.page .steps { gap: 28px; }
.page .steps li { padding: 0; background: none; border: none; }
.page .steps li::after { display: none; }
.page .steps span { color: var(--ink-2); }
/* 使い始めてからご契約までの3つの段階の見出し（流れの図と同じ番号と色） */
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 12px; border-radius: 50%; color: #fff; font-size: 17px; vertical-align: 3px; }
.step-free { background: var(--take); }
.step-trial { background: var(--kaki); }
.step-paid { background: var(--ai); }
.history summary { cursor: pointer; color: var(--link); margin-top: 4px; padding: 8px 0; }
.history ul { margin-top: 8px; }
.page-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; font-size: 14px; }
.page-toc a { padding: 5px 14px; border-radius: 999px; background: var(--ledger); color: var(--ink); text-decoration: none; white-space: nowrap; }
.page-toc a:hover { background: var(--ledger); color: var(--ink); }
.download { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 22px; border-radius: var(--r-l); background: var(--ledger); }
.download p { margin: 0; }
.download .hash { flex-basis: 100%; font-size: 12px; color: var(--ink-2); }
.download .hash code { font-size: 12px; overflow-wrap: anywhere; }
.download + .note { margin-top: 12px; }
.legal h2 { font-size: 20px; margin-top: 36px; }
.page > .wrap > ul.api { margin: 0 0 1em; }

/* 製品ページの下の「全アプリをまとめて調べるなら」：有料の札の付いた箱 */
.related { max-width: 46em; margin-top: 64px; padding: 20px 24px 22px; background: var(--ai-tint); }
.related p { margin: 0; }
.related p + p { margin-top: 8px; }
.related-head { font-size: 17px; font-weight: 700; }
.related .actions { margin-top: 14px; }

/* 有料のプラグインのページ */
.pro-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 36px; align-items: center; }
.pro-visual { position: relative; margin: 0; padding: 40px 0 0; }
.pro-visual .tab { position: absolute; left: 0; top: 8px; height: 32px; }
.pro-visual img { width: 100%; border: 1px solid var(--rule); border-radius: 0 var(--r-m) var(--r-m) var(--r-m); box-shadow: var(--lift); }
.pro-visual figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.trial-box { max-width: 52em; margin: 56px 0 24px; padding: 22px 24px 24px; }
.trial-box .trial-lead { margin: 0 0 10px; font-size: 16px; }
.trial-box .checks { margin: 0 0 4px; }
.trial-box .actions { margin-top: 16px; }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 20px; padding: 0; list-style: none; }
.plan-cards li { display: flex; flex-direction: column; margin: 0; padding: 20px 20px 22px; border: 1px solid var(--ai-line); border-radius: var(--r-m); background: var(--paper); }
.plan-cards h3 { margin: 0 0 6px; font-size: 16px; color: var(--ai); }
.plan-cards .month { margin: 0; font-size: 14px; color: var(--ink-2); }
.plan-cards .month strong { font-size: 28px; color: var(--ink); letter-spacing: .02em; }
.plan-cards .year { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.plan-cards .actions { flex-direction: column; margin-top: auto; gap: 8px; }
.plan-cards .btn { min-height: 42px; padding: 0 14px; font-size: 14px; }
.price-table th[scope="row"] { width: 20%; }

/* 有料版を選ぶ理由の表：狭い画面では1行ずつカードにする */
@media (max-width: 720px) {
  .why-table { border: none; background: transparent; }
  .why-table thead { display: none; }
  .why-table, .why-table tbody, .why-table tr, .why-table th, .why-table td { display: block; width: auto; }
  .why-table tr { border: 1px solid var(--rule); border-radius: var(--r-m); margin-bottom: 12px; overflow: hidden; background: var(--paper); }
  .why-table th, .why-table td { border: none; }
  .why-table tbody th { width: auto; }
  .why-table td { padding-top: 4px; }
  .why-table td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); }
}

/* ============ デモ ============ */
.demo-steps-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: dstep; }
.demo-steps-bar li { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 28px 0 0; counter-increment: dstep; font-size: 15px; line-height: 1.6; }
.demo-steps-bar li:not(:last-child)::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg); }
.demo-steps-bar li::before { content: counter(dstep); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; }
.demo-mode { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; margin: 4px 0 0; padding: 8px 0 0; border: none; border-top: 1px dashed var(--ai-line); }
.demo-mode legend { float: left; width: 100%; margin: 0; padding: 0; font-size: 13px; font-weight: 700; color: var(--ai); }
.demo-mode legend small { margin-left: 2px; font-weight: 400; color: var(--ink-2); font-size: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--ai-line); }
.seg label { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:has(input:checked) { background: var(--ai); color: #fff; font-weight: 700; }
/* 見え方の切り替え：件数だけの無料点検は若竹、試用・ご契約は藍（料金の色と同じ） */
.seg label:has(input[value="free"]:checked) { background: var(--take); }
/* デモの見え方の切り替えは、名前が長いので2段に並べる */
.demo-mode .seg { display: grid; width: 100%; border-radius: var(--r-m); }
.demo-mode .seg label { border-radius: 7px; }
/* 30日間の無料試用の申し込みの手順は、試用の色（柿）の番号 */
.trial-box + .steps li::before { background: var(--kaki); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.demo-more { margin-top: 28px; }

.demo-screen { margin-top: 14px; border: 1px solid #c9d2da; border-radius: var(--r-m); background: #fff; overflow: hidden; box-shadow: 0 6px 24px rgba(31, 58, 95, .10); }
.demo-chrome { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #e9edf1; border-bottom: 1px solid #d3dae1; font-size: 12px; color: var(--ink-2); }
.demo-chrome::before { content: ""; width: 42px; height: 10px; flex: none; background: radial-gradient(circle at 5px 5px, #c8d0d8 4px, transparent 4.5px) 0 0 / 16px 10px repeat-x; }
.demo-chrome span { flex: 1; padding: 2px 12px; border-radius: 999px; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-title { display: flex; align-items: baseline; gap: 16px; padding: 14px 16px 6px; border-bottom: 1px solid var(--rule); background: #f7f9fa; }
.demo-app { font-size: 18px; font-weight: 700; }
.demo-view { font-size: 13px; color: var(--ink-2); }
.demo-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px 12px; border-bottom: 1px solid var(--rule); }
.demo-group { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 0 var(--r-m) var(--r-m) var(--r-m); border: 2px solid; margin-top: 26px; }
.demo-group > .tab { position: absolute; left: -2px; bottom: 100%; height: 26px; padding: 0 12px; font-size: 12px; }
.demo-group-free { flex: 1 1 440px; border-color: var(--take); background: var(--take-tint); }
.demo-group-paid { flex: 0 1 350px; border-color: var(--ai); background: var(--ai-tint); }
.demo-group #header-space, .demo-group #header-paid { display: flex; flex-wrap: wrap; gap: 8px 0; }
.demo-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.demo-list th, .demo-list td { padding: 10px 12px; border-bottom: 1px solid #e3e7e8; text-align: left; white-space: nowrap; }
.demo-list th { background: #f5f5f5; font-weight: 400; color: var(--ink-2); font-size: 13px; }
#header-space .plan, #header-paid .plan { display: none; }
.dcy-ip-dialog .plan { margin: 0 0 0 8px; height: 1.5em; min-width: 0; padding: 0 6px; font-size: 11px; background-clip: padding-box; }
.dcy-ip-dialog .plan-free { background: #fff; }
.demo-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }

/* 印刷（導入前の確認事項などを、導入審査の資料として出せるように） */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { font-size: 10pt; line-height: 1.6; }
  .site-head, .site-foot nav, .breadcrumb, .no-print, .btn { display: none !important; }
  .print-only { display: block; font-size: 9pt; color: #444; }
  .wrap { max-width: none; padding: 0; }
  .page h2 { margin-top: 18px; break-after: avoid; }
  h2::after { display: none; }
  .facts th, .facts td { padding: 4px 8px; }
  tr, li { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .table-scroll { overflow: visible; }
}

/* ============ 画面の幅ごと ============ */
@media (max-width: 960px) {
  .check-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .feat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feat:nth-child(even) .feat-shot { order: 0; padding: 28px 0 0 28px; }
  .feat:nth-child(even) .feat-shot img { border-radius: var(--r-s) 0 0 0; }
  .free-jobs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-4 li:nth-child(2)::after { display: none; }
}
@media (max-width: 860px) {
  .hero-grid, .pro-hero { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 560px; width: 100%; }
  .plan-cards { grid-template-columns: 1fr; }
  .demo-steps-bar { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  section { padding: 44px 0; }
  .sec { padding: 64px 0; }
  .hero { padding: 36px 0 52px; }
  .hero-lead { font-size: 17px; }
  .hero-product span { display: block; margin: 2px 0 0; }
  .check-cols, .home-steps, .safe-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }
  .check-cols { gap: 28px; }
  .feat-rows { gap: 48px; margin-top: 36px; }
  .feat-shot, .feat:nth-child(even) .feat-shot { padding: 18px 0 0 18px; }
  .free-jobs { margin-top: 32px; }
  .hero .actions .btn, .pro-hero .actions .btn, .plugin-hero .actions .btn { flex: 1 1 100%; }
  .facts tbody th { width: 30%; }
  .site-head .wrap { min-height: 56px; padding-top: 8px; }
  .head-cta { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--kaki); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
  /* スマートフォンでは、メニューを1行にして横に送れるようにし、押しやすい高さにする */
  .site-nav { flex-basis: calc(100% + 32px); flex-wrap: nowrap; gap: 0; margin: 0 -16px; padding: 0 8px 4px; overflow-x: auto; scrollbar-width: none; font-size: 13.5px; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a:not(.nav-cta) { display: inline-flex; flex: none; align-items: center; min-height: 42px; padding: 0 6px; white-space: nowrap; }
  .site-nav .nav-cta { display: none; }
  .brand-sub { display: none; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .steps li::after { display: none; }
  .steps-4 { grid-template-columns: 1fr; }
  .safe-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sec .plan-cards { gap: 10px; }
  .sec .plan-cards li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 14px 16px; }
  .sec .plan-cards li > :not(.actions) { grid-column: 1; }
  .sec .plan-cards .actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .sec .plan-cards .month strong { font-size: 24px; }
  .sec .plan-cards .year { margin: 0; }

  .hv-item .tab { height: 24px; font-size: 11px; padding: 0 8px; }
  .qa summary { padding-right: 36px; }
  .qa details > div { padding-right: 0; }
}
.plan-cards .actions .btn + .btn { background: var(--paper); color: var(--ink); }
.plan-cards .actions .btn + .btn:hover { background: var(--ledger); }
/* 列が3つ以上ある表は、狭い画面で潰さずに横に動かして読めるように */
@media (max-width: 720px) { .table-scroll .facts:has(thead th:nth-child(3)):not(.why-table) { min-width: 600px; } }
.est-paper h1::after, .est-paper h2::after { display: none; }
.demo-mode-hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ink-2); }
@media (max-width: 560px) {
  .seg { display: flex; border-radius: var(--r-m); }
  .seg label { flex: 1 1 100%; border-radius: 7px; }
}

/* 有料のプラグインを使い始めてから、ご契約までの流れ（無料の点検 → 30日間の無料試用 → ご契約） */

/* 無料の6本と有料の1本の関係：左に無料（1つのアプリずつ）、右に有料（全アプリまとめて）を矢印でつなぐ */
.relmap { margin: 18px 0 10px; }
.relmap-head, .relmap-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; }
.relmap-head { margin-bottom: 10px; font-size: 15px; font-weight: 700; }
.relmap-head span { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.relmap-head .tab { height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.relmap-row { margin: 0 0 10px; }
.rm-free, .rm-paid { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-m); line-height: 1.6; }
.rm-free { border: 1.5px solid var(--take-line); background: var(--take-tint); color: var(--ink); text-decoration: none; }
a.rm-free:hover { border-color: var(--take); }
a.rm-free:hover b { text-decoration: underline; }
.rm-free img { flex: none; width: 34px; height: 34px; border-radius: 8px; }
.rm-paid { border: 1.5px solid var(--ai-line); background: var(--ai-tint); }
.rm-free b, .rm-paid b { display: block; font-size: 15px; }
.rm-paid b { color: var(--ai); }
.rm-free small, .rm-paid small { display: block; font-size: 13px; color: var(--ink-2); }
.rm-none { border: 1.5px dashed var(--rule); background: var(--paper); color: var(--ink-2); font-size: 14px; }
.rm-arrow { position: relative; }
.rm-arrow::before { content: ""; position: absolute; top: 50%; left: 8px; right: 12px; border-top: 2px solid var(--ai-line); }
.rm-arrow::after { content: ""; position: absolute; top: 50%; right: 10px; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--ai-line); border-right: 2px solid var(--ai-line); transform: rotate(45deg); }
.relmap-note { font-size: 14px; color: var(--ink-2); }
@media (max-width: 720px) {
  .vs-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .relmap-head { display: none; }
  .relmap-row { grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
  .rm-arrow { height: 26px; }
  .rm-arrow::before { top: 4px; bottom: 6px; left: 50%; right: auto; border-top: none; border-left: 2px solid var(--ai-line); }
  .rm-arrow::after { top: auto; bottom: 6px; right: auto; left: 50%; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .rm-free::before { content: "無料"; flex: none; order: 3; margin-left: auto; padding: 0 8px; border-radius: 4px; border: 1.5px solid var(--take); color: var(--take); font-size: 12px; font-weight: 700; line-height: 1.6; }
  .rm-paid::before { content: "有料"; flex: none; order: 3; margin-left: auto; padding: 0 8px; border-radius: 4px; background: var(--ai); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; }
  .rm-paid span, .rm-free span { order: 2; }
}
.try-ways + .note { margin-top: 8px !important; }

/* ============ 一目で分かる図 ============ */
/* 図は、箱を増やさず「線・矢印・色の帯」だけで描く。色は意味のある3色（若竹＝無料、柿＝試用、藍＝ご契約）だけ */

/* 使い始めてからご契約までの3つの段階：上の色の帯と矢印だけ */
.funnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 44px 0 0; padding: 0; list-style: none; }
.funnel li { position: relative; margin: 0; padding-top: 18px; border-top: 4px solid var(--rule); }
.funnel li:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -26px; width: 12px; height: 12px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg); }
.funnel .fn-free { border-top-color: var(--take); }
.funnel .fn-trial { border-top-color: var(--kaki); }
.funnel .fn-paid { border-top-color: var(--ai); }
.fn-name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; }
.fn-price { margin: 2px 0 8px; font-size: 15px; font-weight: 700; }
.fn-free .fn-price { color: var(--take); }
.fn-trial .fn-price { color: var(--kaki-dark); }
.fn-paid .fn-price { color: var(--ai); }
.fn-get { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.fn-link { margin: 10px 0 0; font-size: 14px; font-weight: 700; }
.funnel + .plan-cards { margin-top: 44px; }
.plan-head { margin: 56px 0 0; font-size: 18px; font-weight: 700; }
.plan-head + .plan-cards { margin-top: 16px; }

/* データの流れ：お使いのkintone → ブラウザの中のプラグイン → あなたのパソコン。台帳屋のサーバーへは行かない */
.dataflow { display: grid; grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1.15fr) 108px minmax(0, 1fr); align-items: center; margin: 44px 0 0; }
.df-node { margin: 0; padding: 16px 18px; border: 1.5px solid var(--rule); border-radius: var(--r-m); background: var(--paper); text-align: center; line-height: 1.5; }
.df-node b { display: block; font-size: 16px; }
.df-node small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.df-main { border: 2px solid var(--ink); }
.df-arrow { position: relative; height: 44px; margin: 0; }
.df-arrow::before { content: ""; position: absolute; left: 8px; right: 12px; top: 50%; border-top: 2px solid var(--ink); }
.df-arrow::after { content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.df-arrow span { position: absolute; left: 0; right: 0; bottom: 56%; font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; }
.df-no { grid-column: 3; position: relative; margin: 52px 0 0; padding: 12px 14px; border: 1.5px dashed #a9b8c8; border-radius: var(--r-m); color: var(--ink-2); font-size: 14px; line-height: 1.6; text-align: center; }
.df-no::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 52px; border-left: 2px dashed #a9b8c8; }
.df-no::after { content: "×"; position: absolute; left: 50%; bottom: calc(100% + 14px); width: 26px; height: 26px; margin-left: -12px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 17px; font-weight: 700; line-height: 25px; text-align: center; }
.df-no b { color: var(--ink); }
.dataflow + .safe-grid { margin-top: 56px; }

/* プラグインの図：読み取る設定 → まとめた結果 */
.plugin-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.plugin-hero .lead { max-width: none; }
.concept { margin: 0; padding: 22px 24px 24px; border-radius: var(--r-l); background: var(--ledger); }
.cc-label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cc-src { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cc-src li { margin: 0; padding: 4px 12px; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--paper); font-size: 14px; line-height: 1.6; }
.cc-vs { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.cc-vs span { flex: 1; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--paper); text-align: center; font-weight: 400; }
.cc-arrow { position: relative; height: 40px; margin: 0; }
.cc-arrow::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; border-left: 2px solid var(--ink); }
.cc-arrow::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 9px; height: 9px; margin-left: -5px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.cc-out { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--take); border-radius: var(--r-m); background: var(--paper); }
.cc-out img { flex: none; width: 34px; height: 34px; border-radius: 8px; }
.cc-out b { display: block; font-size: 16px; line-height: 1.5; }
.cc-out small { display: block; font-size: 13px; color: var(--ink-2); }

/* デモ：押すボタンと、出てくるもの */
.try-head { display: flex; align-items: center; margin: 40px 0 16px; font-size: 18px; }
.try-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 0; padding: 0; list-style: none; }
.try-grid li { margin: 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.try-name { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.try-name img { width: 24px; height: 24px; border-radius: 5px; }
.try-flow { display: grid; justify-items: start; gap: 6px; margin: 0; font-size: 14px; line-height: 1.6; }
.try-do { position: relative; display: inline-block; padding: 3px 10px; border: 1px solid #c9d2da; border-radius: 4px; background: #f7f9fa; color: #1f5fa8; font-size: 13px; white-space: nowrap; }
.try-get { position: relative; padding-left: 20px; }
.try-get::before { content: ""; position: absolute; left: 6px; top: -4px; width: 8px; height: 13px; border-left: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); }
.try-get { color: var(--ink-2); }
.try-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.tm { margin: 0; padding-top: 16px; border-top: 4px solid var(--rule); }
.tm-free { border-top-color: var(--take); }
.tm-paid { border-top-color: var(--ai); }
.tm-mode { margin: 0 0 4px; font-size: 13px; color: var(--ink-2); }
.tm-name { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.tm .try-flow + .try-flow { margin-top: 10px; }

@media (max-width: 860px) {
  .plugin-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .try-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .funnel { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 32px; }
  .funnel li:not(:last-child)::after { top: auto; right: auto; left: 50%; bottom: -24px; transform: rotate(135deg); }
  .dataflow { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .df-arrow { height: 48px; }
  .df-arrow::before { left: 50%; right: auto; top: 6px; bottom: 8px; border-top: none; border-left: 2px solid var(--ink); }
  .df-arrow::after { left: 50%; right: auto; top: auto; bottom: 8px; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .df-arrow span { left: calc(50% + 14px); right: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
  .df-no { grid-column: 1; margin-top: 28px; }
  .df-no::before, .df-no::after { display: none; }
  .df-no b::before { content: "× "; }
  .try-grid, .try-modes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .concept { padding: 18px; }
  /* 使用するAPIの表：狭い画面では、プラグインの名前を見出しにして縦に並べる */
  .api-table, .api-table tbody, .api-table tr, .api-table th, .api-table td { display: block; width: 100%; }
  .api-table thead { display: none; }
  .api-table tbody th { width: 100%; border-right: none; background: var(--ledger); }
}
.compare-head { margin: 56px 0 8px; font-size: 20px; }
.df-after { margin-top: 48px; }
@media print { .dataflow { break-inside: avoid; } }
@media (max-width: 860px) { .demo-steps-bar { gap: 10px; } .demo-steps-bar li { padding-right: 0; } .demo-steps-bar li::after { display: none; } }