/* ==========================================================
   LITONE LP 事例セクション（litone_cases）
   外側 .litone-cases でスコープして既存スタイルと衝突回避
   2026-05-22 追加
   ========================================================== */

/* litone_lp ページ全体でスムーズスクロール（アンカーリンク用） */
html { scroll-behavior: smooth; }

.litone-cases { font-size: 14px; line-height: 1.7; color: #333; }
.litone-cases * { box-sizing: border-box; }
.litone-cases .lc-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.litone-cases .lc-section { padding: 80px 0; }

/* セクション見出し（事例側は既存テーマh3スタイルに従う） */
.litone-cases .lc-heading { margin-bottom: 40px; }
.litone-cases .lc-heading h3 .accent { color: #f0a106; display: inline; }
.litone-cases .lc-heading p { font-size: 14px; color: #888; }

/* ロゴウォール側の見出しのみセンター寄せ */
.litone-cases .lc-logos-section .lc-heading,
.litone-cases .lc-logos-section .lc-heading h3 { text-align: center; }

/* ────────── ロゴウォール ────────── */
.litone-cases .lc-logos-section { background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.litone-cases .lc-logo-flow-wrap {
  overflow: hidden; position: relative; margin-bottom: 30px;
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.litone-cases .lc-logo-flow {
  display: flex; gap: 24px; width: max-content;
  animation: lcLogoScroll 60s linear infinite;
}
.litone-cases .lc-logo-flow:hover { animation-play-state: paused; }
@keyframes lcLogoScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.litone-cases .lc-logo-card {
  flex: 0 0 200px; height: 100px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #666; font-weight: 600;
  border: 1px solid #e8e8e8; border-radius: 8px;
  transition: all 0.2s;
  text-align: center; padding: 12px;
  overflow: hidden;
}
.litone-cases .lc-logo-card img {
  max-width: 90%; max-height: 80%;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.2s;
}
.litone-cases .lc-logo-card:hover img { filter: grayscale(0%); }

/* ロゴ比率別のサイズ調整 */
.litone-cases .lc-logo-card.is-square img {
  height: 100%; width: auto;
  max-width: 95%; max-height: 100%;
}
.litone-cases .lc-logo-card.is-tall { padding: 4px; }
.litone-cases .lc-logo-card.is-tall img {
  height: 100%; width: auto;
  max-height: 100%;
}
.litone-cases .lc-logo-card.is-wide { padding: 4px; }
.litone-cases .lc-logo-card.is-wide img {
  width: 100%; height: auto;
  max-width: 100%;
}

/* 白/淡色ロゴ用の背景色（各社ブランドカラー） */
.litone-cases .lc-logo-card.bg-tasuta          { background: #8B7355; border-color: transparent; }
.litone-cases .lc-logo-card.bg-ryukyu_keibitai { background: #003366; border-color: transparent; }
.litone-cases .lc-logo-card.bg-tepros          { background: #333333; border-color: transparent; }
.litone-cases .lc-logo-card.bg-kawa-sho        { background: #3e2412; border-color: transparent; }
.litone-cases .lc-logo-card.bg-tonegawa-s      { background: #2E7D32; border-color: transparent; }
.litone-cases .lc-logo-card.bg-kitano          { background: #1B4D3E; border-color: transparent; }
.litone-cases .lc-logo-card[class*="bg-"] img { filter: none; }

/* ────────── 事例カード ────────── */
.litone-cases .lc-cases-section { background: #fafafa; }
.litone-cases .lc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.litone-cases .lc-cards > a { display: block; height: 100%; text-decoration: none; color: inherit; }
.litone-cases .lc-card {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: all 0.3s;
  display: flex; flex-direction: column;
  height: 100%;
}
.litone-cases .lc-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-4px); }
.litone-cases .lc-card .lc-hero {
  aspect-ratio: 4/3;
  background: #f5f5f5;
  background-repeat: no-repeat;
  background-position: center;
}
.litone-cases .lc-card .lc-hero.has-photo { background-size: cover; }
.litone-cases .lc-card .lc-hero.has-logo  { background-size: 70% auto; background-color: #fff; }
.litone-cases .lc-card .lc-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.litone-cases .lc-card .lc-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; font-size: 10px; }
.litone-cases .lc-card .lc-badge { background: #f0f0f0; color: #555; padding: 2px 8px; border-radius: 10px; }
.litone-cases .lc-card .lc-badge.scale { background: #ebebeb; color: #666; }
.litone-cases .lc-card .lc-badge.usage { background: #e5e5e5; color: #555; }
.litone-cases .lc-card .lc-title {
  font-size: 13px; font-weight: 700; color: #222;
  margin-bottom: 10px; line-height: 1.5;
  min-height: 3em;
}
.litone-cases .lc-card .lc-result {
  background: #fdf6e3; color: #d68b00;
  padding: 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
  min-height: 3em;
  display: flex; align-items: center; justify-content: center;
}
.litone-cases .lc-card .lc-company {
  font-size: 11px; color: #888;
  margin-bottom: auto;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.litone-cases .lc-card .lc-link {
  color: #f0a106; font-size: 12px; font-weight: 700;
  text-decoration: none;
  padding-top: 12px;
  text-align: right;
}

/* ────────── 「事例を見る」ボタン ────────── */
.litone-cases .lc-more-wrap { text-align: center; margin-top: 30px; }
.litone-cases .lc-more-btn {
  display: inline-block;
  padding: 14px 50px;
  background: #fff; color: #333;
  border: 1px solid #333; border-radius: 4px;
  font-weight: 500; font-size: 15px;
  text-decoration: none;
  transition: all 0.2s;
}
.litone-cases .lc-more-btn:hover { background: #333; color: #fff; }

/* ────────── レスポンシブ ────────── */
@media (max-width: 991px) {
  .litone-cases .lc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .litone-cases .lc-section { padding: 40px 0; }
  .litone-cases .lc-heading h3 { font-size: 22px; }
  .litone-cases .lc-cards { grid-template-columns: 1fr; }
  .litone-cases .lc-logo-card { flex: 0 0 140px; height: 70px; }
}

/* ────────── 余白調整（2026-05-22 ユーザー指示） ────────── */
.litone-cases .lc-section { padding: 40px 0; }
.litone-cases .lc-more-wrap { text-align: center; margin-top: 30px; }
.litone-cases .lc-logos-section .lc-more-wrap { margin-top: 0; }
.litone-cases .lc-logo-flow-wrap { margin-bottom: 10px; padding-top: 10px; }
.litone-cases .lc-heading { margin-bottom: 10px; }