/* LINE友達追加キャンペーン共通バナー
 * 2026-04-28 導入
 * 全ページ共通で使う「LINE友達追加で出張見積もり無料」訴求ブロック
 * 後で一括変更する想定でマーカーコメント <!-- LINE-CAMPAIGN-START v1 --> と組み合わせる
 *
 * 構造（2層）:
 *   .line-campaign-wrapper（外側・薄いグレー枠）
 *     └ .line-campaign（内側・白カード）
 */

.line-campaign-wrapper {
  max-width: 760px;
  margin: 36px auto;
  padding: 20px 18px;
  background: #f0f2f5;
  border-radius: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.line-campaign {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.line-campaign picture,
.line-campaign img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
}

/* 画像のみクリッカブル版（service-area-map.html などページ目的が明確なページ用） */
.line-campaign-banner-only {
  display: block;
  max-width: 560px;
  margin: 24px auto 8px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}

.line-campaign-banner-only:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.line-campaign-banner-only picture,
.line-campaign-banner-only img {
  display: block;
  width: 100%;
  height: auto;
}

.line-campaign-note-mini {
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 0 12px;
  font-size: 12.5px;
  color: #595959;
  line-height: 1.7;
  text-align: center;
}

.line-campaign-text {
  padding: 18px 22px 22px;
}

.line-campaign-area {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
}

.line-campaign-area a {
  color: #06c755;
  text-decoration: underline;
  font-weight: 700;
  margin-left: 4px;
}

.line-campaign-area a:hover {
  text-decoration: none;
}

.line-campaign-notes {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #595959;
  line-height: 1.7;
}

.line-campaign-notes li {
  padding-left: 1em;
  text-indent: -1em;
}

.btn-line-campaign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: #06c755;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(6, 199, 85, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-line-campaign:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(6, 199, 85, 0.4);
  color: #ffffff !important;
  text-decoration: none;
}

.btn-line-campaign::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19.365 9.89c.50 0 .906.41.906.91s-.406.91-.906.91h-1.385v.834h1.385c.5 0 .906.41.906.91s-.406.91-.906.91h-2.295c-.5 0-.91-.41-.91-.91V7.04c0-.5.41-.91.91-.91h2.295c.5 0 .906.41.906.91s-.406.91-.906.91h-1.385v.834h1.385c.5 0 .906.41.906.91s-.406.91-.906.91h-1.385zm-3.49 3.474c0 .392-.25.74-.625.864-.094.03-.187.046-.281.046-.297 0-.563-.124-.75-.36l-2.343-3.187v2.637c0 .5-.41.91-.906.91-.5 0-.906-.41-.906-.91V7.04c0-.392.25-.74.625-.864.093-.03.187-.046.28-.046.298 0 .564.124.75.36l2.345 3.187V7.04c0-.5.41-.91.906-.91.5 0 .906.41.906.91v6.324zm-6.985 0c0 .5-.405.91-.906.91s-.91-.41-.91-.91V7.04c0-.5.41-.91.91-.91s.906.41.906.91v6.324zm-2.86.91H3.736c-.5 0-.91-.41-.91-.91V7.04c0-.5.41-.91.91-.91s.91.41.91.91v5.414h1.385c.5 0 .91.41.91.91s-.41.91-.91.91zM24 10.314C24 4.628 18.617.001 12 .001S0 4.628 0 10.314c0 5.094 4.272 9.358 10.04 10.165.39.083.92.258 1.054.59.12.302.078.776.04 1.084 0 0-.143.85-.172 1.03-.052.302-.243 1.187 1.04.647 1.282-.54 6.913-4.066 9.43-6.965 1.737-1.9 2.568-3.83 2.568-5.952z'/></svg>") no-repeat center / contain;
}

/* service-area-map.html の Aエリアセクションに付ける LINE特典バッジ */
.line-bonus {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  background: #06c755;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .line-campaign-wrapper {
    margin: 24px 12px;
    padding: 14px 12px;
    border-radius: 14px;
  }
  .line-campaign {
    border-radius: 12px;
  }
  .line-campaign-text {
    padding: 16px 16px 18px;
  }
  .line-campaign-area {
    font-size: 14px;
  }
  .line-campaign-notes {
    font-size: 11.5px;
  }
  .btn-line-campaign {
    font-size: 16px;
    padding: 13px 18px;
  }
}