/* =========================================================
   導入事例ページ用CSS（株式会社トリニティ）ブロック分割版
   貼り付け先：外観 → カスタマイズ → 追加CSS（1回だけ）
   すべて tcs- で始まるクラスに限定しているので、他のページには影響しません
   ========================================================= */
.tcs-wrap { color: #222; font-size: 15px; line-height: 2; }
.tcs-wrap *, .tcs-wrap *::before, .tcs-wrap *::after { box-sizing: border-box; }
.tcs-wrap p { margin: 0 0 16px; }
.tcs-wrap a { text-decoration: none; }

/* 確認中の箇所（公開前にすべて埋める・消すこと） */
.tcs-ph { background: #fff0a8; color: #5c4a00; padding: 0 2px; }

/* ---------- 段落ブロック・見出しブロック（赤松さんが直接編集する部分） ---------- */
p.tcs-lead { max-width: 760px; margin: 0 0 40px !important; color: #333; font-size: 15px; line-height: 2; }
h2.tcs-catch { font-size: 28px !important; font-weight: 600 !important; line-height: 1.6 !important; margin: 0 0 32px !important; padding: 0 !important; border: none !important; background: none !important; text-align: left !important; color: #222 !important; }
h2.tcs-catch::before, h2.tcs-catch::after { display: none !important; }
p.tcs-intro { color: #333; font-size: 15px; line-height: 2; margin: -16px 0 48px !important; }
p.tcs-text { color: #333; font-size: 15px; line-height: 2.1; margin: 0 0 16px !important; }
p.tcs-text.tcs-li { margin: 0 0 6px !important; padding-left: 1em; text-indent: -1em; }
p.tcs-voice-head { background: #f6f6f6; margin: 48px 0 0 !important; padding: 32px 32px 8px; color: #cf2e2e; font-weight: 600; font-size: 14px; letter-spacing: .08em; line-height: 1.6; }
p.tcs-voice-text { background: #f6f6f6; margin: 0 0 40px !important; padding: 8px 32px 32px; font-size: 16px; line-height: 2.1; }
p.tcs-sales-head { border: 1px solid #ddd; border-bottom: none; margin: 0 !important; padding: 28px 32px 4px; font-weight: 600; font-size: 14px; letter-spacing: .08em; line-height: 1.6; }
p.tcs-sales-text { border: 1px solid #ddd; border-top: none; margin: 0 0 64px !important; padding: 4px 32px 28px; font-size: 15px; line-height: 2; }

/* ---------- 一覧ページ ---------- */
.tcs-filter { display: block; position: relative; }
.tcs-filter-label { font-size: 14px; font-weight: 600; margin-right: 8px; }
.tcs-filter input { position: absolute; opacity: 0; pointer-events: none; }
.tcs-filter label { font-size: 14px; font-weight: 500; padding: 10px 20px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid #ccc; background: #fff; color: #333; cursor: pointer; line-height: 1.4; }
.tcs-filter label:hover { border-color: #cf2e2e; color: #cf2e2e; }
#tcs-f-all:checked ~ .tcs-filter-btns label[for="tcs-f-all"],
#tcs-f-equip:checked ~ .tcs-filter-btns label[for="tcs-f-equip"],
#tcs-f-net:checked ~ .tcs-filter-btns label[for="tcs-f-net"],
#tcs-f-web:checked ~ .tcs-filter-btns label[for="tcs-f-web"],
#tcs-f-sign:checked ~ .tcs-filter-btns label[for="tcs-f-sign"] { background: #cf2e2e; border-color: #cf2e2e; color: #fff; }
#tcs-f-equip:checked ~ .tcs-grid .tcs-card:not(.tcs-c-equip),
#tcs-f-net:checked ~ .tcs-grid .tcs-card:not(.tcs-c-net),
#tcs-f-web:checked ~ .tcs-grid .tcs-card:not(.tcs-c-web),
#tcs-f-sign:checked ~ .tcs-grid .tcs-card:not(.tcs-c-sign) { display: none; }
.tcs-filter-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px; }
.tcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
.tcs-card { display: flex; flex-direction: column; border: 1px solid #ddd; background: #fff; color: #222 !important; transition: box-shadow .2s ease, transform .2s ease; }
.tcs-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); transform: translateY(-2px); }
.tcs-card-logo { height: 160px; background: #f6f6f6; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center; }
.tcs-card-logo img { max-width: 70%; max-height: 90px; width: auto; height: auto; }
.tcs-card-logo .tcs-logo-text { display: flex; align-items: center; justify-content: center; width: 180px; height: 64px; border: 1px dashed #999; background: #fff; font-size: 12px; letter-spacing: .1em; color: #555; line-height: 1.4; text-align: center; }
.tcs-logo-text-wrap .tcs-logo-text { border: none !important; background: none !important; }
.tcs-card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; line-height: 1.8; }
.tcs-card-cat { font-size: 12px; font-weight: 600; color: #cf2e2e; }
.tcs-card-title { font-size: 17px; font-weight: 600; line-height: 1.6; }
.tcs-card-summary { font-size: 14px; color: #444; }
.tcs-card-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 4px; }
.tcs-card-company { font-size: 14px; font-weight: 600; line-height: 1.6; }
.tcs-card-industry { font-size: 12px; color: #555; }
.tcs-card-more { font-size: 13px; font-weight: 600; color: #cf2e2e; margin-top: 6px; }
.tcs-card:hover .tcs-card-more { color: #b11010; }

/* ---------- 詳細ページ ---------- */
.tcs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tcs-tag { font-size: 12px; padding: 4px 12px; border: 1px solid #ddd; color: #444; line-height: 1.6; }
.tcs-tag-main { background: #cf2e2e; border-color: #cf2e2e; color: #fff; font-weight: 600; }
.tcs-info { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; border: 1px solid #ddd; padding: 32px; margin-bottom: 48px; }
.tcs-detail-logo { width: 220px; height: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f6f6f6; border: 1px dashed #999; }
.tcs-detail-logo img { max-width: 90%; max-height: 80px; width: auto; height: auto; }
.tcs-detail-logo .tcs-logo-text { font-size: 12px; letter-spacing: .1em; color: #555; }
.tcs-info dl { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; flex: 1 1 320px; min-width: 0; line-height: 1.7; }
.tcs-info dt { color: #555; font-weight: 400; }
.tcs-info dd { margin: 0; }
.tcs-result { background: #f6f6f6; padding: 32px; margin-bottom: 16px; }
.tcs-result-head { font-size: 14px; font-weight: 600; letter-spacing: .08em; color: #cf2e2e; margin: 0 0 20px !important; }
.tcs-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tcs-metric { background: #fff; padding: 24px; text-align: center; line-height: 1.5; }
.tcs-metric-label { font-size: 13px; color: #555; }
.tcs-metric-after { font-size: 30px; font-weight: 700; color: #cf2e2e; line-height: 1.3; margin: 8px 0 6px; }
.tcs-metric-before { font-size: 13px; color: #555; }
.tcs-note { font-size: 12px !important; color: #555; line-height: 1.8; margin: 14px 0 0 !important; }
.tcs-section-head { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid #222; padding-bottom: 12px; margin: 40px 0 24px; }
.tcs-section-no { font-size: 32px; font-weight: 700; color: #cf2e2e; letter-spacing: .04em; line-height: 1.2; }
.tcs-wrap h3.tcs-section-title { font-size: 22px !important; font-weight: 600 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; line-height: 1.4 !important; }
.tcs-wrap h3.tcs-section-title::before, .tcs-wrap h3.tcs-section-title::after { display: none !important; }
.tcs-back { text-align: center; margin: 0 0 72px; }
.tcs-back a { display: inline-block; border: 1px solid #222; color: #222; padding: 16px 48px; font-size: 15px; font-weight: 500; border-radius: 999px; line-height: 1.4; }
.tcs-back a:hover { background: #222; color: #fff; }
.tcs-related-head { font-size: 20px; font-weight: 600; margin: 0 0 24px !important; }
.tcs-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-bottom: 40px; }
.tcs-related a { display: flex; flex-direction: column; gap: 8px; border: 1px solid #ddd; padding: 20px; color: #222; line-height: 1.6; }
.tcs-related a:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); }

/* ---------- お問い合わせ導線 ---------- */
.tcs-cta { background: #cf2e2e; color: #fff; padding: 48px 40px; margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.tcs-cta p { margin: 0 !important; line-height: 1.9; color: #fff; }
.tcs-cta-en { font-size: 14px; letter-spacing: .1em; font-weight: 600; }
.tcs-cta-title { font-size: 24px; font-weight: 600; margin: 6px 0 10px !important; }
.tcs-cta a { background: #fff; color: #cf2e2e; font-weight: 600; font-size: 16px; padding: 18px 48px; border-radius: 999px; line-height: 1.4; }

/* ---------- スマートフォン ---------- */
@media (max-width: 767px) {
  .tcs-wrap, p.tcs-text, p.tcs-lead, p.tcs-intro { font-size: 14px; }
  .tcs-grid { grid-template-columns: 1fr; gap: 20px; }
  h2.tcs-catch { font-size: 21px !important; margin-bottom: 24px !important; }
  .tcs-info { padding: 20px; gap: 20px; }
  .tcs-detail-logo { width: 100%; }
  .tcs-info dl { grid-template-columns: 96px minmax(0, 1fr); }
  .tcs-result { padding: 24px 20px; }
  p.tcs-voice-head { padding: 24px 20px 6px; }
  p.tcs-voice-text { padding: 6px 20px 24px; font-size: 15px; }
  p.tcs-sales-head { padding: 22px 20px 4px; }
  p.tcs-sales-text { padding: 4px 20px 22px; }
  .tcs-section-no { font-size: 26px; }
  .tcs-wrap h3.tcs-section-title { font-size: 18px !important; }
  .tcs-cta { padding: 32px 20px; }
  .tcs-cta a { width: 100%; text-align: center; }
}