/* ========================================
PREMIUM FOOTER
======================================== */
/* --- [PC表示] フッター最下部のベース --- */
.footer-bottom {
    width: 100%;
    background-color: #111111; 
    border-top: 1px solid #222222; 
    overflow: hidden; 
}

/* [PC表示] 左右に綺麗に振り分け */
.footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright {
    font-size: 0.75rem;
    color: #888888;
    letter-spacing: 0.12em;
    margin: 0;
}

.footer-sub-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
}

.footer-sub-links a {
    font-size: 0.75rem;
    color: #888888;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
    display: inline-block;
}

.footer-sub-links a:hover {
    color: #00c853; 
}

/* --- [PC表示] 固定バーは完全に非表示 --- */
.mobile-action-bar {
    display: none;
}

/* ==========================================================
   📱 【スマホ専用】レスポンシブ表示（画面幅768px以下）
   ========================================================== */
/* --- 共通インナー枠 --- */
.footer-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    position: relative;
}

/* ==========================================================
   ★デモ用「機能解説バッジ」の装飾
   ========================================================== */
.demo-feature-badge {
    background: rgba(0, 200, 83, 0.1);
    border-left: 4px solid #00c853; /* LINE相談と同じテーマの緑 */
    padding: 12px 16px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.demo-feature-badge .badge-label {
    background: #00c853;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
}
.demo-feature-badge .badge-desc {
    color: #cccccc;
    font-size: 0.8rem;
}

/* ==========================================================
   追加セクション1：インフォグラフィック
   ========================================================== */
.footer-stats-section {
    background-color: #1a1a1a; /* 墨黒 */
    border-top: 1px solid #222;
}
.stats-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
}
.stats-item {
    text-align: center;
    flex: 1;
}
.stats-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}
.stats-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 8px;
    font-family: 'Impact', 'Arial Black', sans-serif; /* 骨太フォント */
}
.stats-unit {
    color: #00c853; /* 数字の単位だけ緑にしてアクセントに */
    margin-left: 4px;
}
.stats-label {
    font-size: 0.85rem;
    color: #aaaaaa;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.stats-label .en {
    display: block;
    font-size: 0.65rem;
    color: #666666;
    margin-top: 2px;
}

/* ==========================================================
   追加セクション2：地域SEO ＆ Googleマップ
   ========================================================== */
.footer-seo-section {
    background-color: #151515; /* さらに深い黒 */
    border-top: 1px solid #222;
}
.seo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50%ずつ左右分割 */
    gap: 40px;
}
.seo-info-area {
    color: #cccccc;
}
.seo-company-name {
    font-size: 1.4rem;
    color: #ffffff;
    margin: 0 0 15px 0;
    font-weight: bold;
}
.seo-company-address, .seo-company-tel {
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    color: #999999;
}
.seo-target-map {
    margin-top: 30px;
    background: #1e1e1e;
    padding: 20px;
    border: 1px solid #252525;
}
.seo-target-map h4 {
    font-size: 0.9rem;
    color: #ffffff;
    margin: 0 0 10px 0;
    border-left: 3px solid #00c853;
    padding-left: 8px;
}
.seo-target-map p {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #aaaaaa;
    margin: 0;
}

/* Googleマップのレスポンシブ ＆ ダークモード化 */
.seo-map-area {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    /* ★重要：Googleマップを反転させ、テーマの世界観に合わせる呪文 */
    filter: grayscale(100%) invert(90%) contrast(110%);
}
.seo-map-area iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================
   📱 レスポンシブ表示（画面幅768px以下）
   ========================================================== */
@media (max-width: 768px) {
    .footer-section-inner {
        padding: 40px 16px;
    }
    .demo-feature-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    /* インフォグラフィックのスマホ縦並び */
    .stats-grid {
        flex-direction: column;
        gap: 40px;
    }
    .stats-number {
        font-size: 2.8rem;
    }
    /* 地域SEOのスマホ縦並び */
    .seo-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .seo-map-area {
        height: 250px;
        min-height: auto;
    }
}



/* ① 実績セクション：ディープグレー */
.footer-stats-section {
    background-color: #1a1a1a; 
    border-top: 2px solid #222;
    padding: 80px 0; /* 余白を広めにとって高級感を出す */
}

/* 数字をデカく、インパクト重視（LINEグリーン） */
.stats-number {
    font-size: 4.5rem;
    color: #ffffff;
    font-family: 'Impact', sans-serif;
}
.stats-unit {
    color: #00c853; 
}

/* ② 地域SEOセクション：漆黒（True Black） */
.footer-seo-section {
    background-color: #000000;
    border-top: 1px solid #1a1a1a;
}

.seo-target-map {
    background: #0f0f0f; /* マップ横のエリアも黒で統一 */
    border: 1px solid #1a1a1a;
}

/* ③ コピーライトエリア：ミッドナイトグレー */
.footer-bottom {
    background-color: #111111; 
    border-top: 1px solid #222;
}

/* Googleマップの反転（より渋く） */
.seo-map-area {
    filter: grayscale(100%) invert(95%) contrast(110%);
    opacity: 0.8; /* 少し透かすことで黒い背景に馴染ませる */
}

.stats-sub-label{display:block;font-size:.75em;color:#888;text-transform:uppercase;margin-top:4px;}
/* ==================================================
   Premium Footer SP Fix
   スマホ時のフッターリンク崩れ修正
================================================== */

@media (max-width: 768px) {

  .footer-bottom-inner {
    display: block;
    padding: 34px 20px 42px;
  }

  .footer-bottom .copyright {
    font-size: 0.78rem;
    line-height: 1.9;
    letter-spacing: 0.08em;
    margin: 0 0 26px;
  }

  .footer-bottom .footer-sub-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin: 0 0 20px;
    padding: 0;
    width: 100%;
  }

  .footer-bottom .footer-sub-links li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-bottom .footer-sub-links a {
    display: inline-block;
    font-size: 0.86rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .footer-bottom .footer-sub-links li:nth-child(4),
  .footer-bottom .footer-sub-links li:nth-child(5) {
    grid-column: 1 / -1;
  }

  .footer-bottom .footer-tel-link {
    display: block;
    margin-top: 22px;
  }

  .footer-bottom .footer-tel-link li {
    display: block;
  }

  .footer-bottom .footer-tel-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1b130d 0%, #4a2d18 100%);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }
}