/*
 * SHK 共通部品CSS（Webサイト用 C-系＋図解 F-系）
 * 出典: planning/20260706-design-system-sample.html（部品CSSは流用可）／正: 20260706-design-system.md §3
 * ルール: 部品の追加・変更は必ずデザインシステム側を先に改訂してから本ファイルへ反映する（DS優先・一方向）。
 * 前提: shk-tokens.css を先に読み込むこと。A-系（業務システム部品）は本ファイルに含めない。
 * 注意: グローバルリセット・bodyタイポグラフィは含めない（既存 common.css と共存するため .shk-* スコープのみ）。
 */

/* ============ アクセシビリティ（DS 8章: フォーカス可視化） ============ */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:3px solid var(--accent); outline-offset:2px;
}

/* ============ C-02 設置ページ用: 本文下部余白（バー重なり防止・A-17） ============ */
body.has-shk-ctabar { padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
@media (min-width:768px){ body.has-shk-ctabar { padding-bottom:0; } }

/* T4: 旧SP下部固定バー(.header_right/common.css)をC-02に置換。
 * 768px未満のみ旧バーを非表示（C-02の表示範囲と同じ）。768〜850pxの中間帯は旧挙動を維持（T6ヘッダー再設計で解消予定）。 */
@media (max-width:767.98px){ body.has-shk-ctabar .header_right { display:none; } }

/* T5: C-14 法令注記帯（フッター最下部・全ページ共通・削除禁止）。
 * 背景は現行フッター(footer_main)を継承（--navy-dark への切替はサイト全体の配色移行=T11以降で実施）。 */
.shk-footnote { max-width:1024px; margin:40px auto 0; padding:20px 20px 0; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.8); font-size:12px; line-height:1.7; }

/* T7: 役割明示バー（サービス詳細FV直下・--info-bg帯。完成版§5「銀行交渉支援」等） */
.cf-infobar { background:var(--info-bg); color:var(--info); font-size:14px; line-height:1.7; padding:12px 16px; border-radius:8px; margin:16px 0 8px; }

/* T9: tel部品（C-03中＋受付時間行）。ヘッダー・フッター・本文で共用 */
.shk-telpart { display:inline-block; text-align:center; }
.shk-telpart__hours { font-size:12px; color:var(--ink-sub); margin-top:4px; line-height:1.4; }
.footer_main .shk-telpart__hours { color:rgba(255,255,255,.85); }
@media (max-width:850px){ .header_right .shk-telpart__hours { color:#fff; } }
/* 安心行はフッター濃色面でも可読に */
.footer_main .shk-cta-assure, .section_contact .shk-cta-assure { width:100%; }

/* ============ レイアウト ============ */
.shk-container { max-width:1024px; margin:0 auto; padding:0 20px; }
.shk-section { padding:40px 0; border-bottom:1px solid var(--line); }
.shk-section h2 { font-size:24px; color:var(--navy); font-weight:700; line-height:1.4; }
.shk-section h2::after { content:""; display:block; width:64px; height:4px; background:var(--accent); border-radius:9999px; margin-top:12px; }
.shk-section h3 { font-size:18px; color:var(--navy); margin:24px 0 12px; }
.shk-note { font-size:12px; color:var(--ink-sub); line-height:1.6; margin-top:8px; }
.shk-grid { display:grid; gap:16px; }
@media (min-width:640px){ .shk-grid--2{ grid-template-columns:1fr 1fr; } .shk-grid--3{ grid-template-columns:1fr 1fr 1fr; } }
.shk-grid--blog { gap:20px; } /* C-19ブログカード一覧はgap20px */

/* ============ C-01 ヘッダー ============ */
.shk-header { position:sticky; top:0; z-index:var(--z-header); background:rgba(15,37,71,.95); backdrop-filter:blur(4px); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
/* C-01: SPヘッダーに電話ボタンは置かない（下部固定バーと重複させない） */
.shk-header .shk-btn--tel-mid { display:none; }
@media (min-width:768px){ .shk-header .shk-btn--tel-mid { display:inline-flex; } }
.shk-header__in { max-width:1152px; margin:0 auto; padding:0 20px; height:56px; display:flex; align-items:center; justify-content:space-between; }
@media (min-width:768px){ .shk-header__in{ height:64px; } }
.shk-header__logo { font-weight:700; font-size:14px; color:#fff; text-decoration:none; }
@media (min-width:768px){ .shk-header__logo{ font-size:18px; } }
.shk-header__sub { display:none; font-size:12px; font-weight:400; color:rgba(255,255,255,.7); margin-left:8px; }
@media (min-width:1024px){ .shk-header__sub{ display:inline; } }

/* ============ C-03 電話CTA・ボタン類 ============ */
.shk-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; text-decoration:none; font-family:inherit; border-radius:var(--radius-btn); transition:background .2s, transform .2s, box-shadow .2s; }
/* C-03大: 代表者の顔写真が主役・受話器アイコンは16px上限の脇役 */
.shk-btn--tel { background:var(--accent); color:#fff; font-weight:700; padding:12px 24px 12px 16px; box-shadow:var(--shadow-cta); gap:12px; text-align:left; }
.shk-btn--tel:hover { background:var(--accent-dark); }
.shk-btn--tel:active { transform:translateY(1px); }
.shk-btn--tel__face { width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid rgba(255,255,255,.65); color:var(--navy); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.shk-btn--tel__face img { width:100%; height:100%; object-fit:cover; }
.shk-btn--tel__txt { display:flex; flex-direction:column; align-items:flex-start; }
.shk-btn--tel .l1 { font-size:18px; }
.shk-btn--tel .l2 { display:flex; align-items:center; gap:6px; font-size:16px; font-weight:600; margin-top:2px; flex-wrap:wrap; }
.shk-btn--tel .l2 svg { flex-shrink:0; }
/* T9: 狭幅時は「番号」「（受付時間）」の単位で折り返す（文中折れ防止） */
.shk-btn--tel .l2 .num { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.shk-btn--tel .l2 .hrs { white-space:nowrap; }
.shk-btn--tel-mid { background:var(--accent); color:#fff; font-weight:700; font-size:16px; padding:8px 16px; border-radius:8px; }
.shk-btn--tel-mid:hover { background:var(--accent-dark); }
.shk-btn--sub { background:#fff; color:var(--navy); font-weight:700; padding:16px 28px; box-shadow:var(--shadow-cta); }
.shk-btn--sub:hover { background:rgba(255,255,255,.9); }
.shk-btn--sub-alt { background:var(--bg-alt); color:var(--navy); font-weight:700; padding:16px 28px; border:1px solid var(--line); }
.shk-btn--sub-alt:hover { background:var(--line); }
.shk-btn--navy { background:var(--navy); color:#fff; font-weight:700; padding:16px 28px; }
.shk-btn--navy:hover { background:var(--navy-light); }
.shk-btn--danger-ghost { background:#fff; color:var(--danger); border:1px solid var(--danger); font-weight:700; padding:8px 16px; font-size:14px; border-radius:8px; }
.shk-btn[disabled] { opacity:.6; cursor:not-allowed; }
.shk-cta-assure { font-size:14px; color:var(--ink-sub); margin-top:8px; }

/* ============ C-02 SP下部固定CTAバー ============ */
.shk-ctabar { position:fixed; bottom:0; left:0; right:0; z-index:var(--z-ctabar); background:rgba(15,37,71,.95); backdrop-filter:blur(4px); border-top:1px solid rgba(255,255,255,.1); box-shadow:0 -4px 12px rgba(0,0,0,.25); padding:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:3fr 2fr; gap:8px; }
@media (min-width:768px){ .shk-ctabar{ display:none; } }
.shk-ctabar__tel { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--accent); border-radius:8px; color:#fff; font-weight:700; text-decoration:none; padding:10px 12px; }
.shk-ctabar__tel:active { background:var(--accent-dark); }
.shk-ctabar__tel .t1 { display:flex; gap:6px; align-items:center; font-size:16px; }
.shk-ctabar__tel .t2 { font-size:12px; font-weight:400; color:#fff; } /* 11px・白90%はAA未達のため12px・白100% */
.shk-ctabar__form { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border-radius:8px; color:var(--navy); font-weight:700; font-size:14px; line-height:1.3; text-align:center; text-decoration:none; padding:8px; }

/* ============ C-15 フォーム ============ */
.shk-field { margin-bottom:16px; }
.shk-field label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
.shk-field .req { color:var(--accent); font-size:12px; margin-left:6px; }
.shk-field input, .shk-field select, .shk-field textarea {
  width:100%; height:48px; padding:12px 16px; font-size:16px; font-family:inherit;
  border:1px solid #d1d5db; border-radius:var(--radius-input); background:#fff;
}
.shk-field textarea { height:auto; }
.shk-field input:focus { border-color:var(--accent); }
.shk-field--error input { border:2px solid var(--danger); }
.shk-field__error { display:flex; gap:4px; align-items:center; color:var(--danger); font-size:14px; margin-top:4px; }
.shk-panel--ok { background:var(--ok-bg); border:1px solid rgba(21,128,61,.25); border-radius:12px; padding:20px; color:var(--ok); }
.shk-panel--ng { background:var(--danger-bg); border:1px solid rgba(190,18,60,.25); border-radius:12px; padding:20px; color:var(--danger); }

/* ============ カード類 ============ */
.shk-card { background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); border:1px solid var(--line); padding:24px; }
a.shk-card { display:block; text-decoration:none; color:inherit; transition:border-color .2s, transform .2s, box-shadow .2s; }
a.shk-card:hover { border-color:rgba(194,65,12,.4); transform:translateY(-2px); box-shadow:var(--shadow-cta); }
.shk-card--check { display:flex; gap:12px; align-items:flex-start; padding:20px; }
.shk-card--check .mk { color:var(--accent); flex-shrink:0; }
.shk-card__title { font-size:18px; font-weight:700; color:var(--navy); }
.shk-card__desc { font-size:14px; color:var(--ink); margin-top:8px; }
.shk-card__more { display:block; text-align:right; font-size:14px; font-weight:700; color:var(--accent-dark); margin-top:12px; }
.shk-tag { display:inline-block; font-size:12px; padding:2px 12px; border-radius:9999px; background:rgba(15,37,71,.1); color:var(--navy); }

/* C-18 実績紹介 */
.shk-stat { text-align:center; }
.shk-stat .num { font-size:32px; font-weight:700; color:var(--navy); line-height:1.2; }
.shk-stat .num small { font-size:18px; }
.shk-stat .label { font-size:14px; color:var(--ink-sub); }

/* C-19 ブログカード */
.shk-blogcard { padding:0; overflow:hidden; }
.shk-blogcard__thumb { aspect-ratio:16/9; background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:12px; }
.shk-blogcard__body { padding:16px; }
.shk-blogcard__title { font-size:16px; font-weight:700; color:var(--navy); margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.shk-blogcard__date { font-size:12px; color:var(--ink-sub); margin-top:8px; }

/* ============ C-09 FAQ ============ */
.shk-faq details { background:#fff; border-radius:12px; box-shadow:var(--shadow-card); border:1px solid var(--line); margin-bottom:12px; }
.shk-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:20px; font-weight:600; color:var(--navy); }
.shk-faq summary::-webkit-details-marker { display:none; }
.shk-faq summary .pm { color:var(--accent); font-size:24px; line-height:1; transition:transform .2s; flex-shrink:0; }
.shk-faq details[open] .pm { transform:rotate(45deg); }
.shk-faq .a { padding:0 20px 20px; }

/* ============ C-10 比較表 ============ */
.shk-tablewrap { overflow-x:auto; }
.shk-comparetable { border-collapse:collapse; min-width:680px; width:100%; font-size:14px; }
.shk-comparetable th, .shk-comparetable td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.shk-comparetable thead tr { background:var(--navy); color:#fff; }
.shk-comparetable .self { background:rgba(194,65,12,.05); color:var(--accent-dark); font-weight:600; }

/* ============ 図解共通（F-系） ============ */
.shk-fig { background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); padding:20px; overflow-x:auto; }
.shk-fig svg { display:block; min-width:560px; width:100%; height:auto; }
.shk-fig__note { font-size:12px; color:var(--ink-sub); margin-top:12px; line-height:1.6; }

/* F-03 型B（AI業務効率化マップ表） */
.shk-aimapwrap { overflow-x:auto; }
.shk-aimap { border-collapse:collapse; width:100%; min-width:640px; font-size:14px; }
.shk-aimap th { background:var(--navy); color:#fff; padding:10px 12px; text-align:left; font-size:13px; }
.shk-aimap td { padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
.shk-aimap td:first-child { font-weight:700; color:var(--navy); background:var(--bg-alt); }