/* SEOコンテンツセクション - SANGOテーマ準拠スタイル */

/* カラーパレット - #00A0E9テーマカラー */
:root {
  /* Primary Colors - #00A0E9ベース */
  --sango-primary: #00A0E9;
  --sango-primary-light: rgba(0, 160, 233, 0.1);
  --sango-primary-dark: #0080bb;
  
  /* Semantic Colors - Material Design準拠 */
  --sango-success: #4caf50;
  --sango-success-light: #e8f5e9;
  --sango-warning: #ff9800;
  --sango-warning-light: #fff3e0;
  --sango-danger: #f44336;
  --sango-danger-light: #ffebee;
  --sango-info: #2196f3;
  --sango-info-light: #e3f2fd;
  
  /* Neutral Colors - SANGOテーマベース */
  --sango-white: #ffffff;
  --sango-gray-50: #fafafa;
  --sango-gray-100: #f5f5f5;
  --sango-gray-200: #eeeeee;
  --sango-gray-300: #e0e0e0;
  --sango-gray-400: #bdbdbd;
  --sango-gray-500: #9e9e9e;
  --sango-gray-600: #757575;
  --sango-gray-700: #616161;
  --sango-gray-800: #424242;
  --sango-gray-900: #212121;
  --sango-text: #252525;
  --sango-background: #eaedf2;
  
  /* Typography Scale - SANGOテーマ準拠 */
  --sango-font-size-h1: 1.8rem;   /* 28.8px */
  --sango-font-size-h2: 1.5rem;   /* 24px */
  --sango-font-size-h3: 1.25rem;  /* 20px */
  --sango-font-size-h4: 1.125rem; /* 18px */
  --sango-font-size-body: 1rem;   /* 16px */
  --sango-font-size-small: 0.875rem; /* 14px */
  
  /* Spacing Scale */
  --sango-space-xs: 0.25rem;   /* 4px */
  --sango-space-sm: 0.5rem;    /* 8px */
  --sango-space-md: 1rem;      /* 16px */
  --sango-space-lg: 1.5rem;    /* 24px */
  --sango-space-xl: 2rem;      /* 32px */
  --sango-space-2xl: 3rem;     /* 48px */
  
  /* Border Radius - SANGOテーマ準拠 */
  --sango-radius-sm: 4px;
  --sango-radius-md: 8px;
  --sango-radius-lg: 12px;
  
  /* Shadows - SANGOテーマ準拠 */
  --sango-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --sango-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --sango-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/* Base SEO Content Section */
.seo-content-section {
  margin: var(--sango-space-2xl) 0;
  font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  line-height: 1.83;
  color: var(--sango-text);
  background: transparent;
}

.seo-content-section > section:not(:last-child) {
  margin-bottom: var(--sango-space-2xl);
}

/* Typography */
.seo-content-section h2 {
  font-size: var(--sango-font-size-h2);
  font-weight: bold;
  color: var(--sango-text);
  margin: 0 0 var(--sango-space-lg) 0;
  line-height: 1.4;
}

.seo-content-section h3 {
  font-size: var(--sango-font-size-h3);
  font-weight: bold;
  color: var(--sango-text);
  margin: 0 0 var(--sango-space-md) 0;
  line-height: 1.4;
}

.seo-content-section h4 {
  font-size: var(--sango-font-size-h4);
  font-weight: bold;
  color: var(--sango-text);
  margin: 0 0 var(--sango-space-sm) 0;
  line-height: 1.4;
}

.seo-content-section p {
  font-size: var(--sango-font-size-body);
  margin: 0 0 var(--sango-space-md) 0;
  line-height: 1.83;
}

.seo-content-section strong {
  font-weight: bold;
  color: var(--sango-text);
}

/* Section Icons */
.section-icon,
.emergency-icon {
  display: inline-block;
  margin-right: var(--sango-space-sm);
  font-size: 1.2em;
}

/* Content Structure */
.intro-content,
.emergency-content {
  margin-top: var(--sango-space-md);
}

.trouble-intro {
  margin-bottom: var(--sango-space-lg);
  font-weight: 500;
  color: var(--sango-gray-600);
}

/* Lists */
.trouble-list,
.choose-points-list,
.price-note-list {
  margin: var(--sango-space-lg) 0;
  padding: 0;
}

.trouble-list li,
.price-note-list li {
  list-style: none;
  padding: var(--sango-space-md);
  margin-bottom: var(--sango-space-md);
  background: white;
  border: 1px solid #f1f3f4;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.trouble-list li:hover,
.price-note-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  text-decoration: none;
}

/* Trouble List Specific Styles */
.trouble-category {
  display: flex;
  align-items: center;
  margin-bottom: var(--sango-space-sm);
}

.trouble-icon {
  display: inline-block;
  margin-right: var(--sango-space-sm);
  font-size: 1.25rem;
  width: 2rem;
  text-align: center;
}

.trouble-category strong {
  color: var(--sango-text);
  font-size: var(--sango-font-size-h4);
  margin: 0;
}

.trouble-description {
  margin: 0;
  line-height: 1.83;
  color: var(--sango-gray-700);
}

.choose-points-list {
  counter-reset: step-counter;
}

.choose-points-list li {
  list-style: none;
  padding: var(--sango-space-lg);
  margin-bottom: var(--sango-space-md);
  background: white;
  border: 1px solid #f1f3f4;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
  counter-increment: step-counter;
  transition: all 0.3s ease;
}

.choose-points-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.choose-points-list li::before {
  content: counter(step-counter);
  position: absolute;
  top: var(--sango-space-md);
  left: var(--sango-space-md);
  width: 2rem;
  height: 2rem;
  background: var(--sango-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--sango-font-size-small);
}

.choose-points-list li strong {
  display: block;
  margin-left: 3rem;
  margin-bottom: var(--sango-space-sm);
  color: var(--sango-text);
}

.choose-points-list li br + * {
  margin-left: 3rem;
}

/* Price Table */
.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #f1f3f4;
  overflow: hidden;
  margin: var(--sango-space-lg) 0;
}

.price-table thead {
  background: var(--sango-primary);
  color: white;
}

.price-table th,
.price-table td {
  padding: var(--sango-space-md) var(--sango-space-lg);
  text-align: left;
  border-bottom: 1px solid var(--sango-gray-200);
}

.price-table th {
  font-weight: bold;
  font-size: var(--sango-font-size-body);
}

.price-table tbody tr:hover {
  background: #f8f9fa;
}

.price-table tbody tr:last-child td {
  border-bottom: none;
}

/* Emergency Contact Box - シンプルなデザイン */
.emergency-box {
  background: white;
  padding: var(--sango-space-xl);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 2px solid var(--sango-primary);
  margin: var(--sango-space-xl) 0;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.emergency-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}



.emergency-box h3 {
  color: var(--sango-primary);
  margin-bottom: var(--sango-space-lg);
  font-size: var(--sango-font-size-h3);
  display: flex;
  align-items: center;
}

.emergency-problems {
  font-style: italic;
  color: var(--sango-gray-700);
  margin-bottom: var(--sango-space-md);
}

.emergency-solution {
  margin-bottom: var(--sango-space-md);
  font-weight: 500;
  color: var(--sango-text);
}

.emergency-instruction {
  margin-bottom: var(--sango-space-lg);
  color: var(--sango-text);
}

.cta-placeholder {
  background: #f8f9fa;
  padding: var(--sango-space-lg);
  border-radius: 8px;
  text-align: center;
  margin-top: var(--sango-space-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f1f3f4;
}

.cta-placeholder:hover {
  background: #f1f3f4;
  transform: scale(1.02);
}

.cta-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: var(--sango-space-sm);
  animation: pulse 2s infinite;
}

.cta-placeholder p {
  margin: 0;
  font-weight: bold;
  font-size: var(--sango-font-size-h4);
  color: var(--sango-primary);
}

/* CTA画像のスタイル */
.cta-image {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto var(--sango-space-md) auto;
  border-radius: var(--sango-radius-md);
  box-shadow: var(--sango-shadow-sm);
  transition: all 0.3s ease-in-out;
}

.cta-placeholder:hover .cta-image {
  transform: scale(1.02);
  box-shadow: var(--sango-shadow-md);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Content Cards - area-cardと同じシンプルなデザイン */
.content-intro,
.trouble-examples,
.area-how-to-choose,
.prefecture-how-to-choose,
.how-to-choose,
.area-price-guide,
.prefecture-price-guide,
.price-guide,
.company-list-intro,
.area-local-info,
.prefecture-area-selection {
  background: white;
  padding: var(--sango-space-xl);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #f1f3f4;
  transition: all 0.3s ease;
  margin-bottom: var(--sango-space-lg);
}

.content-intro:hover,
.trouble-examples:hover,
.area-how-to-choose:hover,
.prefecture-how-to-choose:hover,
.how-to-choose:hover,
.area-price-guide:hover,
.prefecture-price-guide:hover,
.price-guide:hover,
.company-list-intro:hover,
.area-local-info:hover,
.prefecture-area-selection:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Responsive Design */
@media (max-width: 768px) {
  .seo-content-section {
    margin: var(--sango-space-xl) 0;
  }
  
  .seo-content-section h2 {
    font-size: var(--sango-font-size-h3);
  }
  
  .seo-content-section h3 {
    font-size: var(--sango-font-size-h4);
  }
  
  .content-intro,
  .trouble-examples,
  .area-how-to-choose,
  .prefecture-how-to-choose,
  .how-to-choose,
  .area-price-guide,
  .prefecture-price-guide,
  .price-guide,
  .company-list-intro,
  .area-local-info,
  .prefecture-area-selection {
    padding: var(--sango-space-lg);
  }
  
  .emergency-box {
    padding: var(--sango-space-lg);
  }
  
  .choose-points-list li {
    padding: var(--sango-space-md);
  }
  
  .choose-points-list li::before {
    position: static;
    display: inline-flex;
    margin-right: var(--sango-space-sm);
    margin-bottom: var(--sango-space-sm);
  }
  
  .choose-points-list li strong,
  .choose-points-list li br + * {
    margin-left: 0;
  }
  
  .price-table {
    font-size: var(--sango-font-size-small);
  }
  
  .price-table th,
  .price-table td {
    padding: var(--sango-space-sm) var(--sango-space-md);
  }
}

@media (max-width: 480px) {
  .emergency-box {
    padding: var(--sango-space-md);
  }
  
  .content-intro,
  .trouble-examples,
  .area-how-to-choose,
  .prefecture-how-to-choose,
  .how-to-choose,
  .area-price-guide,
  .prefecture-price-guide,
  .price-guide,
  .company-list-intro,
  .area-local-info,
  .prefecture-area-selection {
    padding: var(--sango-space-md);
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  .trouble-list li,
  .price-note-list li,
  .choose-points-list li,
  .content-intro,
  .trouble-examples,
  .area-how-to-choose,
  .prefecture-how-to-choose,
  .how-to-choose,
  .area-price-guide,
  .prefecture-price-guide,
  .price-guide,
  .company-list-intro,
  .area-local-info,
  .prefecture-area-selection,
  .emergency-box,
  .cta-placeholder {
    transition: none;
    transform: none;
    animation: none;
  }
}

/* Focus Styles for Accessibility */
.emergency-box:focus-within {
  outline: 2px solid var(--sango-primary);
  outline-offset: 2px;
}

.cta-placeholder:focus {
  outline: 2px solid var(--sango-primary);
  outline-offset: 2px;
}

/* Area Type Badge - 所在地/対応エリア表示 */
.area-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  margin-left: auto;
  white-space: nowrap;
}

.area-type-badge--location {
  background-color: #e3f2fd;
  color: #1976d2;
}

.area-type-badge--service {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.area-type-icon {
  font-size: 0.875rem;
  margin-right: 0.25rem;
}

.company-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.company-card-header .company-title {
  flex: 1;
  min-width: 0;
}

/* 統計情報の詳細表示 */
.stat-item--small {
  font-size: 0.875rem;
  color: var(--sango-gray-600);
}

.stat-detail {
  font-weight: normal;
}

/* Animation for Loading State */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.seo-content-section > section {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.seo-content-section > section:nth-child(1) { animation-delay: 0.1s; }
.seo-content-section > section:nth-child(2) { animation-delay: 0.2s; }
.seo-content-section > section:nth-child(3) { animation-delay: 0.3s; }
.seo-content-section > section:nth-child(4) { animation-delay: 0.4s; }
.seo-content-section > section:nth-child(5) { animation-delay: 0.5s; }
.seo-content-section > section:nth-child(6) { animation-delay: 0.6s; }