/* /what-is-lark/ 専用の追加スタイル（site.css のトークンのみ使用） */

/* 4つの特長 */
.lark-point .card-num { font-size: 1rem; }
.lark-point h3 { font-size: 1.12rem; }

/* できること（8機能） */
.function-card h3 small { display: block; font-family: var(--font-en); font-size: .72rem; letter-spacing: .14em; color: var(--muted); font-weight: var(--fw-heading); }
.function-card p { font-size: .94rem; }

/* 置き換え比較（8領域・24ツール） */
.replace-card { gap: 14px; }
.replace-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.replace-head h3 { font-size: 1rem; }
.replace-head .tag { font-family: var(--font-en); font-size: .68rem; letter-spacing: .04em; white-space: nowrap; }
.replace-tools { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.replace-tools li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: calc(50px + 4.2em); font-size: .74rem; line-height: 1.4; color: var(--muted); }
.tool-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-family: var(--font-en); font-weight: var(--fw-number); font-size: .95rem; color: var(--navy); overflow: hidden; }
.tool-icon img { width: auto; height: auto; max-width: 34px; max-height: 28px; object-fit: contain; }
.replace-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.replace-arrow::after { content: "↓"; font-size: 1.1rem; font-weight: var(--fw-number); color: var(--navy); }
.replace-lark { display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; align-items: center; margin-top: auto; padding: 14px 16px; background: var(--tint); border-radius: var(--radius-sm); }
.replace-lark img { width: 36px; height: 36px; }
.replace-lark small { font-size: .84rem; color: var(--ink); line-height: 1.6; }

/* 導入前後 */
.change-table th[scope="row"] { white-space: nowrap; }
.change-table td:last-child { color: var(--navy); font-weight: var(--fw-number); }
.change-table .change-arrow { color: var(--gold); font-weight: var(--fw-number); margin-right: 6px; }

/* 業種別の使い方 */
.industry-card h3 { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; }
.industry-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--tint); color: var(--navy); }
.industry-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.industry-name { word-break: keep-all; }
.industry-card .check-list { font-size: .94rem; }
@media (min-width: 961px) { .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 960px) and (min-width: 641px) { .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-5 { grid-template-columns: 1fr; } }

/* おすすめの会社 */
.fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
@media (max-width: 760px) { .fit-list { grid-template-columns: 1fr; } }